StackPanel堆疊布局
StackPanel是簡單布局方式之一,可以很方便的進行縱向布局和橫向布局 StackPanel默認是縱向布局的
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <StackPanel> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Label Content="Label"></Label> <Label Content="Label"></Label> <Label Content="Label"></Label> </StackPanel> </Window>
![]()
如果要橫向布局的話,只要把StackPanel的Orientation屬性設置成Horizontal即可
這個屬性的默認值是Vertical
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <StackPanel Orientation="Horizontal"> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Button Content="按鈕"></Button> <Label Content="Label"></Label> <Label Content="Label"></Label> <Label Content="Label"></Label> </StackPanel> </Window>
WrapPanel包裹布局
在WrapPanel面板中的元素以一次一行或一列的方式布局控件
WrapPanel也有Orientation屬性,但與StackPanel不同的是,WrapPanel的Orientation屬性的默認值是Horizontal
也就是說WrapPanel的默認展現方向是橫向的
WrapPanel與StackPanel另一個不同的地方是,當容器實際寬度不夠的情況下,內容將以多行或者多列的形式展現
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <WrapPanel> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> <Button Content="allen"></Button> </WrapPanel> </Window>
WrapPanel的縱向展現方式
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <WrapPanel Orientation="Vertical"> <Button Content="allen1"></Button> <Button Content="allen2"></Button> <Button Content="allen3"></Button> <Button Content="allen4"></Button> <Button Content="allen5"></Button> <Button Content="allen6"></Button> <Button Content="allen7"></Button> <Button Content="allen8"></Button> <Button Content="allen9"></Button> <Button Content="allen10"></Button> </WrapPanel> </Window>
DockPanel停靠布局
這種布局把布局容器分為上、下、左、右四個邊緣,容器內的元素沿着某一個邊緣來拉伸自己
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <DockPanel> <!--沿着上邊緣拉伸--> <Button Content="Top" DockPanel.Dock="Top"></Button> <!--沿着下邊緣拉伸--> <Button Content="Bottom" DockPanel.Dock="Bottom"></Button> <!--沿着左邊緣拉伸--> <Button Content="Left" DockPanel.Dock="Left"></Button> <!--沿着右邊緣拉伸--> <Button Content="Right" DockPanel.Dock="Right"></Button> <!--默認沿着左邊緣拉伸--> <Button Content="allen5"></Button> <!--默認沿着左邊緣拉伸--> <Button Content="allen6"></Button> <!--最后一個元素默認填充滿整個容器剩余的空間--> <Button Content="默認最后一個自適應"></Button> </DockPanel> </Window>
Grid表格布局
Grid布局容器可以把空間分割成多行多列,用以擺放不同的控件
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <Grid> <!--定義兩行--> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <!--定義三列--> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <!--Grid.Row或 Grid.Column的默認值為0--> <Button Content="默認在第一行第一列且填充"></Button> <!--如果我把Grid.Row的值設置成2,因為沒有第三行,所以按鈕會自動被放在最后一行,仍然是第二行--> <Button Grid.Row="1" Grid.Column="1" Content="第二行第二列"></Button> </Grid> </Window>
Canvas畫布布局
Canvas畫布布局容器允許使用精確的坐標來擺放畫布內的元素
如果兩個元素共用了同一塊區域,那么后設置的元素將覆蓋先設置的元素
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <Canvas> <Button Canvas.Left="100" Canvas.Top="100" Content="第一個按鈕"></Button> <Button Canvas.Left="136" Canvas.Top="112" Content="第二個按鈕"></Button> </Canvas> </Window>
Window窗口
窗口是容納所有WPF界面元素的最初容器,任何的界面元素都要放在Window窗口內才能呈現
WPF窗口只能包含一個兒子控件,這是因為Window類繼承自ContentControl類。
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--你不能在這里放置多個同級元素--> </Window>
ContentControl就是我們常說的內容控件,這種控件與容器控件(Grid或StackPanel)不同,
內容控件的頂級子元素只能有一個,容器控件可以包含多個頂級子元素
如果我們想要在一個ContentControl內展示多個子控件,
我們可以先放置一個容器控件作為內容控件的頂級子元素,然后再在此容器控件中放置更多的控件
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Button Content="Button" /> <Button Content="Button" /> </Grid> </Window>
修改記錄
14-12-26:完成了一部分內容(未發布)
14-12-27:完成了所有內容,刪除了一部分與此文無關的內容(未發布)
14-12-28:使用自己做的客戶端程序,調整格式,並保存成草稿(未發布)
參考
《Pro WPF 4.5 in C# 4th Edition》
備注
有些專家認為InkCanvas也是布局元素,我覺得它非常特殊,所以就暫時不列在這里進行說明了