2. 程式人生 > 其它 >【WPF】 Canvas介紹

【WPF】 Canvas介紹

阿新 • • 發佈：2022-05-30

      

從這篇文章開始是對WPF中的介面如何佈局做一個較簡單的介紹，大家都知道：UI是做好一個軟體很重要的因素，如果沒有一個漂亮的UI，功能做的再好也無法吸引很多使用者使用，而且沒有漂亮的介面，那麼普通使用者會感覺這個軟體沒有多少使用價值。

1、canvas 中的元素通過canvas的附件屬性left|right、bottom|top 來佈局， 不能同時使用left 和right或者top和bottom

2、zindex控制層級。

一. 總體介紹

        WPF的佈局控制元件都在System.Windows.Controls.Panel這個基類下面，使用 WPF提供的各種控制元件在WPF應用程式中介面進行佈局，同時對各種子控制元件（如按鈕、文字框，下拉框等）進行排列組合。

Pane類的公共屬性太多了。就簡單介紹幾個常見的屬性如下表。

  

名稱

說明

Cursor

獲取或設定在滑鼠指標位於此元素上時顯示的游標。 

DataContext

獲取或設定元素參與資料繫結時的資料上下文。 

Dispatcher

獲取與此 DispatcherObject 關聯的 Dispatcher。 

FontFamily

獲取或設定控制元件的字體系列。 

FontSize

獲取或設定字號。 

FontWeight

獲取或設定指定的字型的權重或粗細。 

Foreground

獲取或設定描述前景色的畫筆。 

HandlesScrolling

獲取一個值控制元件是否支援滾動。

Height

獲取或設定元素的建議高度。 

HorizontalContentAlignment

獲取或設定控制元件內容的水平對齊。 

IsLoaded

獲取一個值，該值指示是否已載入此元素以供呈現。 

IsMouseOver

獲取一個值，該值指示滑鼠指標是否位於此元素（包括可視樹上的子元素）上。這是一個依賴項屬性。 

IsTabStop

獲取或設定一個值控制是否在選項卡上導航包含。 

IsVisible

獲取一個值，該值指示此元素在使用者介面 (UI) 中是否可見。這是一個依賴項屬性。 

LayoutTransform

獲取或設定在執行佈局時應該應用於此元素的圖形轉換方式。 

Margin

獲取或設定元素的外邊距。 

Name

獲取或設定元素的標識名稱。 該名稱提供一個引用，以便當 XAML 處理器在處理過程中構造標記元素之後，程式碼隱藏（如事件處理程式程式碼）可以對該元素進行引用。

Opacity

獲取或設定當 UIElement 在使用者介面 (UI) 中呈現時為其整體應用的不透明度因子。這是一個依賴項屬性。 

Padding

獲取或設定控制元件中的空白。 

RenderTransform

獲取或設定影響此元素的呈現位置的轉換資訊。這是一個依賴項屬性。 

TabIndex

獲取或設定使用 tab 鍵時，確定順序接收焦點的元素的值，當用戶將控制元件定位。 

Tag

獲取或設定任意物件值，該值可用於儲存關於此元素的自定義資訊。 

ToolTip

獲取或設定在使用者介面 (UI) 中為此元素顯示的工具提示物件。 

TouchesCaptured

獲取在此元素上捕獲的所有觸控裝置。 

TouchesCapturedWithin

獲取在此元素或其視覺化樹中的任何子元素上捕獲的所有觸控裝置。 

VerticalContentAlignment

獲取或設定控制元件內容的垂直對齊方式。 

Visibility

獲取或設定此元素的使用者介面 (UI) 可見性。這是一個依賴項屬性。 

VisualOpacityMask

獲取或設定 Brush 值，該值表示 Visual 的不透明蒙板。 

Width

獲取或設定元素的寬度。 

       一個Panel 的呈現就是測量和排列子控制元件，然後在螢幕上繪製它們。所以在佈局的過程中會經過一系列的計算，那麼子控制元件越多，執行的計算次數就越多，則效能就會變差。如果不需要進行復雜的佈局，則儘量少用複雜佈局控制元件（如 Grid和自定義複雜的Panel）；如果能簡單佈局實現就儘量使用構造相對簡單的佈局（如 Canvas、UniformGrid等），這種佈局可帶來更好的效能。 如果有可能，我們應儘量避免呼叫 UpdateLayout方法。 
      每當Panel內的子控制元件改變其位置時，佈局系統就可能觸發一個新的處理過程。對此，瞭解哪些事件會呼叫佈局系統就很重要，因為不必要的呼叫可能導致應用程式效能變差。 
       換句話說，佈局是一個遞迴系統，實現在螢幕上對控制元件進行大小調整、定位和繪製，然後進行呈現。具體如下圖，要實現控制元件0的佈局,那麼先要實現0的子控制元件 01,02...的佈局,要實現01的佈局,那麼得實現01的子控制元件001,002...的佈局,如此迴圈直到子控制元件的佈局完成後,再完成父控制元件的佈局, 最後遞歸回去直到遞迴結束,這樣整個佈局過程就完成了.

      佈局系統為Panel中的每個子控制元件完成兩個處理過程：測量處理過程（Measure）和排列處理過程（Arrange）。每個子 Panel 均提供自己的 MeasureOverride 和 ArrangeOverride 方法，以實現自己特定的佈局行為。

二. Canvas 

      Canvas是最基本的面板，只是一個儲存控制元件的容器，它不會自動調整內部元素的排列及大小，它僅支援用顯式座標定位控制元件，它也允許指定相對任何角的座標，而不僅僅是左上角。可以使用Left、Top、Right、 Bottom附加屬性在Canvas中定位控制元件。通過設定Left和Right屬性的值表示元素最靠近的那條邊，應該與Canvas左邊緣或右邊緣保持一個固定的距離，設定Top和Bottom的值也是類似的意思。實質上，你在選擇每個控制元件停靠的角時，附加屬性的值是作為外邊距使用的。如果一個控制元件沒有使 用任何附加屬性，它會被放在Canvas的左上方（等同於設定Left和Top為0）。

      Canvas的主要用途是用來畫圖。Canvas預設不會自動裁減超過自身範圍的內容，即溢位的內容會顯示在Canvas外面，這是因為預設 ClipToBounds=”False”；我們可以通過設定ClipToBounds=”True”來裁剪多出的內容。

 如果將ClipToBounds屬性設為true，在設計介面將會對子元素的超出部分進行裁剪：

接下來我們來看兩個例項，第一個例項使用XAML程式碼實現：

<Window x:Class="WpfApp1.WindowCanvas"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowCanvas" Height="400" Width="500">

    <Grid>

        <Canvas Margin="0,0,0,0" Background="White">

            <Rectangle Fill="Blue" 

                Stroke="Azure" 

                Width="250" 

                Height="200" 

                Canvas.Left="210" Canvas.Top="101"/>

            <Ellipse Fill="Red" 

                Stroke="Green" 

                Width="250" Height="100" 

                Panel.ZIndex="1" 

                Canvas.Left="65" Canvas.Top="45"/>

        </Canvas>

        <Canvas>

            <Button Name="btnByCode" Click="btnByCode_Click">後臺程式碼實現</Button>

        </Canvas>

    </Grid>

</Window>

例項後的效果如下圖。

第二個例項，我們使用後臺程式碼來實現。下面紅色字型是如何設定控制元件的Canvas.Left 和Canvas.Top值

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

 

namespace WpfApp1

{

    /// <summary>

    /// WindowCanvas.xaml 的互動邏輯

    /// </summary>

    public partial class WindowCanvas : Window

    {

        public WindowCanvas()

        {

            InitializeComponent();

            

        }

 

        public void DisplayCanvas()

        {

            Canvas canv = new Canvas();

            //把canv新增為窗體的子控制元件

            this.Content = canv;

            canv.Margin = new Thickness(0, 0, 0, 0);

            canv.Background = new SolidColorBrush(Colors.White);

 

            //Rectangle

            Rectangle r = new Rectangle();

            r.Fill = new SolidColorBrush(Colors.Red);

            r.Stroke = new SolidColorBrush(Colors.Red);

            r.Width = 200;

            r.Height = 140;

            r.SetValue(Canvas.LeftProperty, (double)200);

            r.SetValue(Canvas.TopProperty, (double)120);

            canv.Children.Add(r);

            //Ellipse

            Ellipse el = new Ellipse();

            el.Fill = new SolidColorBrush(Colors.Blue);

            el.Stroke = new SolidColorBrush(Colors.Blue);

            el.Width = 240;

            el.Height = 80;

            el.SetValue(Canvas.ZIndexProperty, 1);

            el.SetValue(Canvas.LeftProperty, (double)100);

            el.SetValue(Canvas.TopProperty, (double)80);

            canv.Children.Add(el);

 

        }

 

        private void btnByCode_Click(object sender, RoutedEventArgs e)

        {

            DisplayCanvas();

        }

    }

}

 實現後的效果如下圖。

最後 要說明一點Canvas內的子控制元件不能使用兩個以上的Canvas附加屬性，如果同時設定Canvas.Left和Canvas.Right屬性，那麼後者將會被忽略。

2、ZIndex屬性

Canvas面板中可能會有多個相互重疊的元素，可以設定Canvas的ZIndex附加屬性，來控制他們的重疊方式 ZIndex屬性預設值都是0，屬性值必須是整數。

除此之外，我們還可以通過程式碼的方式設定ZIndex的值，程式碼如下：Canvas.SetZIndex(this.btn, 2);

3、測量處理過程（Measure）和排列處理過程（Arrange）

      

從這篇文章開始是對WPF中的介面如何佈局做一個較簡單的介紹，大家都知道：UI是做好一個軟體很重要的因素，如果沒有一個漂亮的UI，功能做的再好也無法吸引很多使用者使用，而且沒有漂亮的介面，那麼普通使用者會感覺這個軟體沒有多少使用價值。

1、canvas 中的元素通過canvas的附件屬性left|right、bottom|top 來佈局， 不能同時使用left 和right或者top和bottom

2、zindex控制層級。

一. 總體介紹

        WPF的佈局控制元件都在System.Windows.Controls.Panel這個基類下面，使用 WPF提供的各種控制元件在WPF應用程式中介面進行佈局，同時對各種子控制元件（如按鈕、文字框，下拉框等）進行排列組合。

Pane類的公共屬性太多了。就簡單介紹幾個常見的屬性如下表。

  

名稱

說明

Cursor

獲取或設定在滑鼠指標位於此元素上時顯示的游標。 

DataContext

獲取或設定元素參與資料繫結時的資料上下文。 

Dispatcher

獲取與此 DispatcherObject 關聯的 Dispatcher。 

FontFamily

獲取或設定控制元件的字體系列。 

FontSize

獲取或設定字號。 

FontWeight

獲取或設定指定的字型的權重或粗細。 

Foreground

獲取或設定描述前景色的畫筆。 

HandlesScrolling

獲取一個值控制元件是否支援滾動。

Height

獲取或設定元素的建議高度。 

HorizontalContentAlignment

獲取或設定控制元件內容的水平對齊。 

IsLoaded

獲取一個值，該值指示是否已載入此元素以供呈現。 

IsMouseOver

獲取一個值，該值指示滑鼠指標是否位於此元素（包括可視樹上的子元素）上。這是一個依賴項屬性。 

IsTabStop

獲取或設定一個值控制是否在選項卡上導航包含。 

IsVisible

獲取一個值，該值指示此元素在使用者介面 (UI) 中是否可見。這是一個依賴項屬性。 

LayoutTransform

獲取或設定在執行佈局時應該應用於此元素的圖形轉換方式。 

Margin

獲取或設定元素的外邊距。 

Name

獲取或設定元素的標識名稱。 該名稱提供一個引用，以便當 XAML 處理器在處理過程中構造標記元素之後，程式碼隱藏（如事件處理程式程式碼）可以對該元素進行引用。

Opacity

獲取或設定當 UIElement 在使用者介面 (UI) 中呈現時為其整體應用的不透明度因子。這是一個依賴項屬性。 

Padding

獲取或設定控制元件中的空白。 

RenderTransform

獲取或設定影響此元素的呈現位置的轉換資訊。這是一個依賴項屬性。 

TabIndex

獲取或設定使用 tab 鍵時，確定順序接收焦點的元素的值，當用戶將控制元件定位。 

Tag

獲取或設定任意物件值，該值可用於儲存關於此元素的自定義資訊。 

ToolTip

獲取或設定在使用者介面 (UI) 中為此元素顯示的工具提示物件。 

TouchesCaptured

獲取在此元素上捕獲的所有觸控裝置。 

TouchesCapturedWithin

獲取在此元素或其視覺化樹中的任何子元素上捕獲的所有觸控裝置。 

VerticalContentAlignment

獲取或設定控制元件內容的垂直對齊方式。 

Visibility

獲取或設定此元素的使用者介面 (UI) 可見性。這是一個依賴項屬性。 

VisualOpacityMask

獲取或設定 Brush 值，該值表示 Visual 的不透明蒙板。 

Width

獲取或設定元素的寬度。 

       一個Panel 的呈現就是測量和排列子控制元件，然後在螢幕上繪製它們。所以在佈局的過程中會經過一系列的計算，那麼子控制元件越多，執行的計算次數就越多，則效能就會變差。如果不需要進行復雜的佈局，則儘量少用複雜佈局控制元件（如 Grid和自定義複雜的Panel）；如果能簡單佈局實現就儘量使用構造相對簡單的佈局（如 Canvas、UniformGrid等），這種佈局可帶來更好的效能。 如果有可能，我們應儘量避免呼叫 UpdateLayout方法。 
      每當Panel內的子控制元件改變其位置時，佈局系統就可能觸發一個新的處理過程。對此，瞭解哪些事件會呼叫佈局系統就很重要，因為不必要的呼叫可能導致應用程式效能變差。 
       換句話說，佈局是一個遞迴系統，實現在螢幕上對控制元件進行大小調整、定位和繪製，然後進行呈現。具體如下圖，要實現控制元件0的佈局,那麼先要實現0的子控制元件 01,02...的佈局,要實現01的佈局,那麼得實現01的子控制元件001,002...的佈局,如此迴圈直到子控制元件的佈局完成後,再完成父控制元件的佈局, 最後遞歸回去直到遞迴結束,這樣整個佈局過程就完成了.

      佈局系統為Panel中的每個子控制元件完成兩個處理過程：測量處理過程（Measure）和排列處理過程（Arrange）。每個子 Panel 均提供自己的 MeasureOverride 和 ArrangeOverride 方法，以實現自己特定的佈局行為。

二. Canvas 

      Canvas是最基本的面板，只是一個儲存控制元件的容器，它不會自動調整內部元素的排列及大小，它僅支援用顯式座標定位控制元件，它也允許指定相對任何角的座標，而不僅僅是左上角。可以使用Left、Top、Right、 Bottom附加屬性在Canvas中定位控制元件。通過設定Left和Right屬性的值表示元素最靠近的那條邊，應該與Canvas左邊緣或右邊緣保持一個固定的距離，設定Top和Bottom的值也是類似的意思。實質上，你在選擇每個控制元件停靠的角時，附加屬性的值是作為外邊距使用的。如果一個控制元件沒有使 用任何附加屬性，它會被放在Canvas的左上方（等同於設定Left和Top為0）。

      Canvas的主要用途是用來畫圖。Canvas預設不會自動裁減超過自身範圍的內容，即溢位的內容會顯示在Canvas外面，這是因為預設 ClipToBounds=”False”；我們可以通過設定ClipToBounds=”True”來裁剪多出的內容。

 如果將ClipToBounds屬性設為true，在設計介面將會對子元素的超出部分進行裁剪：

接下來我們來看兩個例項，第一個例項使用XAML程式碼實現：

<Window x:Class="WpfApp1.WindowCanvas"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowCanvas" Height="400" Width="500">

    <Grid>

        <Canvas Margin="0,0,0,0" Background="White">

            <Rectangle Fill="Blue" 

                Stroke="Azure" 

                Width="250" 

                Height="200" 

                Canvas.Left="210" Canvas.Top="101"/>

            <Ellipse Fill="Red" 

                Stroke="Green" 

                Width="250" Height="100" 

                Panel.ZIndex="1" 

                Canvas.Left="65" Canvas.Top="45"/>

        </Canvas>

        <Canvas>

            <Button Name="btnByCode" Click="btnByCode_Click">後臺程式碼實現</Button>

        </Canvas>

    </Grid>

</Window>

例項後的效果如下圖。

第二個例項，我們使用後臺程式碼來實現。下面紅色字型是如何設定控制元件的Canvas.Left 和Canvas.Top值

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

 

namespace WpfApp1

{

    /// <summary>

    /// WindowCanvas.xaml 的互動邏輯

    /// </summary>

    public partial class WindowCanvas : Window

    {

        public WindowCanvas()

        {

            InitializeComponent();

            

        }

 

        public void DisplayCanvas()

        {

            Canvas canv = new Canvas();

            //把canv新增為窗體的子控制元件

            this.Content = canv;

            canv.Margin = new Thickness(0, 0, 0, 0);

            canv.Background = new SolidColorBrush(Colors.White);

 

            //Rectangle

            Rectangle r = new Rectangle();

            r.Fill = new SolidColorBrush(Colors.Red);

            r.Stroke = new SolidColorBrush(Colors.Red);

            r.Width = 200;

            r.Height = 140;

            r.SetValue(Canvas.LeftProperty, (double)200);

            r.SetValue(Canvas.TopProperty, (double)120);

            canv.Children.Add(r);

            //Ellipse

            Ellipse el = new Ellipse();

            el.Fill = new SolidColorBrush(Colors.Blue);

            el.Stroke = new SolidColorBrush(Colors.Blue);

            el.Width = 240;

            el.Height = 80;

            el.SetValue(Canvas.ZIndexProperty, 1);

            el.SetValue(Canvas.LeftProperty, (double)100);

            el.SetValue(Canvas.TopProperty, (double)80);

            canv.Children.Add(el);

 

        }

 

        private void btnByCode_Click(object sender, RoutedEventArgs e)

        {

            DisplayCanvas();

        }

    }

}

 實現後的效果如下圖。

最後 要說明一點Canvas內的子控制元件不能使用兩個以上的Canvas附加屬性，如果同時設定Canvas.Left和Canvas.Right屬性，那麼後者將會被忽略。

2、ZIndex屬性

Canvas面板中可能會有多個相互重疊的元素，可以設定Canvas的ZIndex附加屬性，來控制他們的重疊方式 ZIndex屬性預設值都是0，屬性值必須是整數。

除此之外，我們還可以通過程式碼的方式設定ZIndex的值，程式碼如下：Canvas.SetZIndex(this.btn, 2);

3、測量處理過程（Measure）和排列處理過程（Arrange）

相關推薦

【WPF】 Canvas介紹

       從這篇文章開始是對WPF中的介面如何佈局做一個較簡單的介紹，大家都知道：UI是做好一個軟體很重要的因素，如果沒有一個漂亮的UI，功能做的再好也無法吸引很多使用者使用，而且沒有漂亮的介面，那麼普通

【WPF】自動完成/智慧提示的文字框（AutoCompleteBox）

原文:【WPF】自動完成/智慧提示的文字框（AutoCompleteBox） 使用了外掛WPFToolKit。（直接在Nuget中搜即可）

【WPF】Combox 下拉選項增加圖片顯示 ItemTemplate

效果圖如上所示： 前端Xmal程式碼： <Window x:Class=\"WpfTest.MainWindow\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"

【WPF】DataGrid多表頭的樣式設計

需求 在使用WPF開發時，使用DataGrid列表顯示資料時，有些欄位可以進行分組顯示，用於更好的表達它們之間存在的某種關係，因此就考慮到要對DataGrid的表頭進行擴充套件，可以顯示多行表頭，讓這些有關聯的欄位內容顯

【Docker】Dockerfile 介紹

參考教程：https://docs.docker.com/engine/reference/builder/ 環境 virtual box 6.1 centos 7.8 docker 19.03

【WPF】WPF ScorllView觸控滾動實現

有時候需要這個效果，觸控向下可以向下滑動，不需要滑鼠滑輪。 使用 ListBox 可以簡單做到，那麼如何使用 ScrollViewer 做到相同效果？

【Android】FragmentFactory介紹：構建Fragment的好幫手

技術標籤：AndroidandroidFragmentactoryFragment 1. 為何需要FragmentFactory 關於Fragment的使用約定

【Subverse】種族介紹：Teelee

個人暫定翻譯： Teelee 提利 Kloi 克洛伊 種族名，尚未登場，暫無資訊 ------提利一族身形矮小，但在星河之間有著巨大的影響力。男性提利身高4英尺出頭（一米二），而女性提利最高不過3.5英尺（一米多）。他們的膚

【WPF】WPF的二維路徑標記語法繪圖PathGeometry

我們用Path來實現一條直線： <Path Stroke=\"Black\" StrokeThickness=\"1\" > <Path.Data>

【轉】Prometheus 介紹

原文：https://www.cnblogs.com/zqj-blog/p/10871033.html ------------------------------------ 我們知道zabbix在監控界佔有不可撼動的地位，功能強大。但是對容器監控顯得力不從心。為解決監控容器的問題，引入了

【Docker】基本介紹

Docker 基本使用介紹 Docker - 基礎 Docker - 基礎 Docker簡介 什麼是Docker 為什麼使用Docker

【MySQL】01_介紹與安裝

1.0 概述 MySQL是一個 開放原始碼的關係型資料庫管理系統 ，由瑞典MySQL AB（創始人Michael Widenius）公 司1995年開發，迅速成為開源資料庫的 No.1。

【WPF】Image控制元件顯示Gif圖片

class GifImage : Image { private bool _isInitialized; private GifBitmapDecoder _gifDecoder; private Int32Animation _animation;

【Zeekr_Tech】TSN 介紹

  前言 TSN 是時間敏感網路（Time-Sensitive Network）的英文縮寫，是 IEEE802.1 TSN 工作組開發的一系列資料鏈路層協議規範的統稱，用於指導和開發低延遲、低抖動，並具有傳輸時間確定性的乙太網區域網，是傳統乙

【模擬】Carla介紹與基本使用 [1] (附程式碼 基礎版)

0. 參考與前言 主要介紹無人駕駛的模擬環境CARLA，開源社群維護，以下為相關參考連結：

【WPF】依賴屬性

依賴屬性DependencyProperty的誕生背景 WPF開發中，必須使用依賴物件作為依賴屬性的宿主，使二者結合起來。依賴物件的概念被DependencyObject類所實現，依賴屬性的概念則由DependencyProperty類所實現

【WPF】高效能繪圖的方法

如果我們只需要在畫布中擺放少量的圖形元素，那麼直接使用Line、Rectangle這些物件是沒有問題的。但當我們的圖形元素數量巨大（比如說10萬個），或是重新整理頻繁（比如說50毫秒重新整理一次）時，WPF就會消耗大量的

【WPF】Panel

一. 總體介紹         WPF的佈局控制元件都在System.Windows.Controls.Panel這個基類下面，使用 WPF提供的各種控制元件在WPF應用程式中介面進行佈局，同時對各種子控制元件（如按鈕、文字框，下拉框等）進行排

深入瞭解Netty【一】BIO、NIO、AIO簡單介紹

引言 在Java中提供了三種IO模型：BIO、NIO、AIO，模型的選擇決定了程式通訊的效能。

【WPF學習】第六十六章 支援視覺化狀態

原文:【WPF學習】第六十六章 支援視覺化狀態 　　上一章介紹的ColorPicker控制元件，是控制元件設計的最好示例。因為其行為和視覺化外觀是精心分離的，所以其他設計人員可開發動態改變其外觀的新模板。