一個成功的軟體,離不開人性化的UI設計,如何抓住用戶第一視覺,讓用戶產生依賴感,合適優雅的布局必不可少,本文以一些簡單的小例子,簡述WPF中布局面板控制元件的使用,僅供學習分享使用,如有不足之處,還請指正,
涉及知識點
在WPF中,關于布局面板控制元件,主要有以下幾種:
- StackPanel:堆疊面板,可以將元素排列成一行或者一列,其特點是:每個元素各占一行或者一列,
- WrapPanel:環繞面板,將各個控制元件從左至右按照行或列的順序羅列,當長度或高度不夠時就會自動調整進行換行,后續排序按照從上至下或從左至右的順序進行,
- DockPanel:停靠面板,定義一個區域,在此區域中,您可以使子元素通過描點的形式排列,這些物件位于 Children 屬性中,
- Grid:網格面板, Grid顧名思義就是“網格”,以表格形式布局元素,對于整個面板上的元素進行布局,它的子控制元件被放在一個一個事先定義好的小格子里面,整齊配列, Grid和其他各個Panel比較起來,功能最多也最為復雜,
- Canvas:畫布面板,畫布,用于完全控制每個元素的精確位置,他是布局控制元件中最為簡單的一種,直接將元素放到指定位置,主要來布置圖面,
下面讓我們一起學習各個控制元件的使用,
StackPanel【堆疊面板】
堆疊面板,可以將元素排列成一行或者一列,其特點是:每個元素各占一行或者一列,
Orientation屬性指定排列方式:
- Vertical(垂直)【默認】,垂直排列時,每個元素都與面板一樣寬,
- Horizontal(水平),水平排列時,每個元素都與面板一樣高;
如果包含的元素超過了面板空間,它只會截斷多出的內容, 元素的Margin屬性用于使元素之間產生一定得間隔,當元素空間大于其內容的空間時,剩余空間將由HorizontalAlignment和 VerticalAlignment屬性來決定如何分配,
Vertical(垂直),默認情況下,每一個元素都與面板一樣寬,如下所示:

示例代碼,如下所示:
1 <Window x:Class="WpfApp1.SecondWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="StackPanel示例" Height="450" Width="500"> 9 10 11 <StackPanel Margin="5,5,5,5"> 12 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5">Button> 13 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5">Button> 14 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5">Button> 15 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5">Button> 16 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5">Button> 17 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5">Button> 18 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5">Button> 19 StackPanel> 20 Window>
Horizontal(水平),水平排列時,每個元素都與面板一樣高,如下所示:

示例代碼,與垂直排列相同,只是多了一個Oriention屬性,如下所示:
1 <StackPanel Margin="5,5,5,5" Orientation="Horizontal"> 2 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5">Button> 3 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5">Button> 4 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5">Button> 5 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5">Button> 6 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5">Button> 7 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5">Button> 8 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5">Button> 9 StackPanel>
StackPanel其他常用屬性:
- HorizontalAlignment:水平對齊方式,值:Left,Center,Right,Stretch,
- VerticalAlignment:垂直對齊方式,值:Bottom , Center,Stretch,Top,
- Visibility:設定StackPanel是否可見,值:Visible,Hidden,Collapsed,
- Background:設定背景顏色,值為Bursh型別的列舉值,
- Width,Height,MinWidth,MinHeight,MaxWidth,MaxHeight:分別用來設定StackPanel的寬,高,最小寬,最小高,最大寬,最大高,
WrapPanel【環繞面板】
WrapPanel布局面板將各個控制元件從左至右按照行或列的順序羅列,當長度或高度不夠時就會自動調整進行換行,后續排序按照從上至下或從左至右的順序進行,
水平排列:當Orientation屬性的值設定為 Horizontal:元素是從左向右排列的,然后自上至下自動換行,如下所示:

示例原始碼所示:
1 <Window x:Class="WpfApp1.ThirdWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="WrapPanel示例" Height="450" Width="400"> 9 <WrapPanel Margin="5,5,5,5"> 10 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5">Button> 11 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5">Button> 12 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5">Button> 13 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5">Button> 14 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5">Button> 15 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5">Button> 16 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5">Button> 17 18 WrapPanel> 19 Window>
垂直排列:默認為水平排列,通過設定WrapPanel的Orientation屬性為Vertical,可以修改排列方向,垂直排列,如下所示:

示例原始碼如下所示:
1 <WrapPanel Margin="5,5,5,5" Orientation="Vertical"> 2 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Height="40">Button> 3 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Height="40">Button> 4 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Height="40">Button> 5 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Height="40">Button> 6 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Height="40">Button> 7 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Height="40">Button> 8 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Height="40">Button> 9 10 WrapPanel>
WrapPanel其他常用屬性,除了StackPanel屬性常用屬性,還有兩個,如下所示:
- ItemHeight:所有的元素都相同高度,
- ItemWidth:所有的元素都相同寬度,
其他子元素設定的屬性,如果大于ItemHeight,ItemWidth的值,則被截取,如下所示:

原始碼如下所示:
1 <WrapPanel Margin="5,5,5,5" Orientation="Vertical" ItemHeight="30" ItemWidth="100"> 2 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Height="40">Button> 3 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Height="40">Button> 4 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Height="40">Button> 5 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Height="40">Button> 6 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Height="40">Button> 7 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Height="40">Button> 8 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Height="40">Button> 9 10 WrapPanel>
DockPanel【停靠面板】
DockPanel定義一個區域,在此區域中,您可以使子元素通過描點的形式排列,這些物件位于 Children 屬性中,停靠面板類似于WinForm中控制元件的Dock屬性,DockPanel會對每個子元素進行排序,并將根據指定的邊進行停靠,多個停靠在同側的元素則按順序排序,在DockPanel中,指定停靠邊的控制元件,會根據定義的順序占領邊角,所有控制元件絕不會交疊,
默認情況下,所有子元素都是靠左停靠【DockPanel.Dock=Left】

可以單獨設定每一個子元素的Dock屬性,如下所示:

示例原始碼如下所示:
1 <Window x:Class="WpfApp1.FourWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="DockPanel示例" Height="450" Width="600"> 9 <DockPanel LastChildFill="True" > 10 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" DockPanel.Dock="Left">Button> 11 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" DockPanel.Dock="Top">Button> 12 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" DockPanel.Dock="Right">Button> 13 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" DockPanel.Dock="Bottom">Button> 14 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" DockPanel.Dock="Left">Button> 15 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" DockPanel.Dock="Top">Button> 16 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" DockPanel.Dock="Right">Button> 17 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" DockPanel.Dock="Bottom">Button> 18 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5">Button> 19 DockPanel> 20 Window>
注意:在DockPanel中,元素的先后順序很重要,關系著元素是否“頂邊”,
DockPanel其他常用屬性,除了StackPanel屬性常用屬性,還有一個,如下所示:
- LastChildFill:最后一個子元素,是否填充剩余空間,默認為True,
Grid【網格面板】
Grid顧名思義就是“網格”,以表格形式布局元素,對于整個面板上的元素進行布局,它的子控制元件被放在一個一個事先定義好的小格子里面,整齊配列, Grid和其他各個Panel比較起來,功能最多也最為復雜,
要使用Grid,首先要向RowDefinitions和ColumnDefinitions屬性中添加一定數量的RowDefinitions和 ColumnDefinitions元素,從而定義行數和列數,
而放置在Grid面板中的控制元件元素都必須顯示采用Row和Column附加屬性定義其放置所在的行和列,這兩個屬性的值都是從0開始的索引數,如果沒有顯式設定任何行或列,Grid將會隱式地將控制元件加入在第0行第0列,
由于Grid的組成并非簡單的添加屬性標記來區分行列,這也使得用戶在實際應用中可以具體到某一單 元格中,所以布局起來就很精細了,
Grid的單元格可以是空的,一個單元格中可以有多個元素,而在單元格中元素是根據它們的Z順序一個接著一個呈現的,
Grid面板將元素分割到不可見的行列網格中,盡管可以在一個單元格中放置多個元素(這時這些元素會相互重疊),但在每個單元格中只放置一個元素通常更合理,當然,在Grid單元格中的元素本身也可能是另一個容器,該容器組織它所包含的一組控制元件,
默認情況下,如果不設定Grid面板的行列寬,與高,則默認均分,且如果不顯示設定子元素的大小,則默認填充,如下所示:

示例代碼,如下所示:
1 <Window x:Class="WpfApp1.FiveWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="GridPanel示例" Height="450" Width="700"> 9 <Grid> 10 <Grid.RowDefinitions> 11 <RowDefinition>RowDefinition> 12 <RowDefinition>RowDefinition> 13 <RowDefinition>RowDefinition> 14 Grid.RowDefinitions> 15 <Grid.ColumnDefinitions> 16 <ColumnDefinition>ColumnDefinition> 17 <ColumnDefinition>ColumnDefinition> 18 <ColumnDefinition>ColumnDefinition> 19 Grid.ColumnDefinitions> 20 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0" >Button> 21 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1" >Button> 22 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2" >Button> 23 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0" >Button> 24 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1" >Button> 25 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2" >Button> 26 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0" >Button> 27 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1" >Button> 28 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2" >Button> 29 Grid> 30 31 Window>
Grid行高與列寬設定
列寬和行高,分別可以在ColumnDefinition、RowDefinition里面指定Width、Height的值,
設定寬與高的幾種方式:
- 固定值:設定具體的數字,單位為像素px,
- Auto:根據子元素的大小,自動分配大小,剛好能夠容納子元素的內容,
- 星號*:根據比例自動分配剩余空間,
行高列寬設定示例

示例原始碼如下所示:
1 <Grid> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="1*">RowDefinition> 4 <RowDefinition Height="2*">RowDefinition> 5 <RowDefinition Height="3*">RowDefinition> 6 Grid.RowDefinitions> 7 <Grid.ColumnDefinitions> 8 <ColumnDefinition Width="1*">ColumnDefinition> 9 <ColumnDefinition Width="2*">ColumnDefinition> 10 <ColumnDefinition Width="3*">ColumnDefinition> 11 Grid.ColumnDefinitions> 12 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0" >Button> 13 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1" >Button> 14 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2" >Button> 15 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0" >Button> 16 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1" >Button> 17 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2" >Button> 18 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0" >Button> 19 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1" >Button> 20 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2" >Button> 21 Grid>
Grid面板其他屬性,除了StackPanel屬性常用屬性,還有兩個,如下所示:
- Grid.ColumnSpan:用于設定元素跨越的單元格列數,
- Grid.RowSpan:用于設定元素跨越的單元格行數,
Canvas【畫布面板】
畫布,用于完全控制每個元素的精確位置,他是布局控制元件中最為簡單的一種,直接將元素放到指定位置,主要來布置圖面,
使用Canvas,必須指定一個子元素的位置(相對于畫布),否則所有元素都將出現在畫布的左上角,如果Canvas是視窗主元素(即最外層的布局面板是Canvas),用戶改變視窗大小時,Canvas也會隨之變化,子元素的位置也會隨之移動,以保證相對于Canvas的位置屬性不變,
Canvas通過設定Left,Top,Bottom,Right等屬性的值,來設定子元素的位置,如下所示:

示例原始碼,如下所示:
1 <Window x:Class="WpfApp1.SixWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="Canvas面板示例" Height="500" Width="500"> 9 <Canvas> 10 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Canvas.Left="0" Canvas.Top="0">Button> 11 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Canvas.Left="50" Canvas.Top="50">Button> 12 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Canvas.Left="100" Canvas.Top="100">Button> 13 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Canvas.Left="150" Canvas.Top="150">Button> 14 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Canvas.Left="200" Canvas.Top="200">Button> 15 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Canvas.Left="250" Canvas.Top="250">Button> 16 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Canvas.Left="300" Canvas.Top="300">Button> 17 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Canvas.Left="350" Canvas.Top="350">Button> 18 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Canvas.Left="400" Canvas.Top="400">Button> 19 Canvas> 20 Window>
注意:要說明一點Canvas內的子控制元件不能使用兩個以上的Canvas附加屬性,如果同時設定Canvas.Left和Canvas.Right屬性,那么后者將會被忽略,
Canvas的其他屬性,除了StackPanel的常用屬性外,還有兩個屬性,如下所示:
- ClipToBounds:超出邊界部分,是否需要進行剪裁,
- Panel.ZIndex:用于設定子元素在Z方向上的順序,值越大,越靠上,如果兩個元素重疊,則ZIndex值小的將會被覆寫,
備注
1024程式員節,祝大家節日快樂,
望江南·梳洗罷
溫庭筠 〔唐代〕
梳洗罷,獨倚望江樓,過盡千帆皆不是,斜暉脈脈水悠悠,腸斷白蘋洲, 
作者:Alan.hsiang
出處:http://www.cnblogs.com/hsiang/
本文著作權歸作者和博客園共有,寫文不易,支持原創,歡迎轉載【點贊】,轉載請保留此段宣告,且在文章頁面明顯位置給出原文連接,謝謝,
關注個人公眾號,定時同步更新技術及職場文章
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/335030.html
標籤:.NET技术
上一篇:C# WPF框架Caliburn.Micro快速搭建
下一篇:WCF 動態呼叫
