Canvas：畫布面板

畫布，用于完全控制每個元素的精確位置。他是布局控件中最為簡單的一種，直接將元素放到指定位置，主要來布置圖面。使用Canvas，必須指定一個子元素的位置（相對于畫布），否則所有元素都將出現在畫布的左上角。調整位置用Left、Right、Top和Bottom四個附加屬性。如果Canvas是窗口主元素（即最外層的布局面板是Canvas），用戶改變窗口大小時，Canvas也會隨之變化，子元素的位置也會隨之移動，以保證相對于Canvas的位置屬性不變。

Canvas允許子元素的部分或全部超過其邊界，默認不會裁剪子元素，同時可以使用負坐標，即溢出的內容會顯示在Canvas外面，這是因為默認?ClipToBounds=”False”，因此畫布不需要指定大小。如果想復制畫布內容，將ClipToBounds設為true即可。

1、子元素不超出邊界

使用XAML代碼實現：

2、子元素超出邊界

使用XAML代碼實現：

在XAML設計界面，超出的部分不會進行裁剪，如圖所示：

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

注意：要說明一點Canvas內的子控件不能使用兩個以上的Canvas附加屬性，如果同時設置Canvas.Left和Canvas.Right屬性，那么后者將會被忽略。

ZIndex屬性

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

如圖所示：

除此之外，我們還可以通過代碼的方式設置ZIndex的值，代碼如下：

using System.Windows;
using System.Windows.Controls;

namespace CanvasDemo
{
    /// 

    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        /// 

        /// 點擊按鈕，修改ZIndex屬性值
        /// 
        /// 
        /// 
        private void btnClick_Click(object sender, RoutedEventArgs e)
        {
            // 設置按鈕的ZIndex屬性
            Canvas.SetZIndex(this.btn, 2);
        }
    }
}