WPF教程四；布局之Canvas面板

標籤：xaml   windows   內容   裁剪   idt   也會   canvas   使用者   rtu   

Canvas：換行面板

      畫布，用於完全控制每個元素的精確位置。他是布局控制項中最為簡單的一種，直接將元素放到指定位置，主要來布置圖面。使用Canvas，必須指定一個子項目的位置（相對於畫布），否則所有元素都將出現在畫布的左上方。調整位置用Left、Right、Top和Bottom四個附加屬性。如果Canvas是視窗主要元素（即最外層的布局面板是Canvas），使用者改變視窗大小時，Canvas也會隨之變化，子項目的位置也會隨之移動，以保證相對於Canvas的位置屬性不變。
     Canvas允許子項目的部分或全部超過其邊界，預設不會裁剪子項目，同時可以使用負座標，即溢出的內容會顯示在Canvas外面，這是因為預設 ClipToBounds=”False”，因此畫布不需要指定大小。如果想複製畫布內容，將ClipToBounds設為true即可。

1、子項目不超出邊界

使用XAML代碼實現：

 1 <Window x:Class="WpfDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="Canvas面板" Height="237" Width="525" WindowStartupLocation="CenterScreen"> 5     <Canvas> 6         <TextBox Width="100" BorderBrush="Blue"></TextBox> 7         <TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox> 8         <Button Height="20" Canvas.Right="10" Canvas.Bottom="10" Content="按鈕"></Button> 9     </Canvas>10 </Window>

2、子項目超出邊界

使用XAML代碼實現：

 1 <Window x:Class="WpfDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="Canvas面板" Height="237" Width="525" WindowStartupLocation="CenterScreen"> 5     <Canvas> 6         <TextBox Width="100" BorderBrush="Blue"></TextBox> 7         <TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox> 8         <Button Height="200" Canvas.Right="10" Canvas.Bottom="-130" Content="按鈕"></Button> 9     </Canvas>10 </Window>

在XAML設計介面，超出的部分不會進行裁剪，：

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

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

WPF教程四；布局之Canvas面板