WPF布局元素
WPF中的布局元素有以下五个元素
- Grid:网格布局。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。类似于HTML中的Table标签。
- StackPanel:栈式面板。可将包含的元素在竖直或水平方向上排成一条直线,当移除一个元素后,后面的元素会自动向前移动以填充空缺。
- Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位,类似于Windows Form编程的布局方式。
- DockPanel:泊靠式面板。内部元素可以选择泊靠方向,类似于Windows Form编程中设置控件的Dock属性。
- WrapPanel:自动折行面板。内部元素在排满一行后能够自动折行,类似于HTML中的流式布局。
下面我们就逐个研究一下他们的基本用法。
- 1Grid
Grid的特点如下:
* 可以定义任意的数量的行和列。
* 行的高度和列的宽度可以使用绝对数值(数字)、相对比(*5)例或自动调整(Auto)的方式进行精确设定,并可以设置最大和最小值。
* 内部元素可以设置自己所在的行和列,还可以设置自己纵向跨几行(Grid.RowSpan="跨行数"),横向跨几列(Grid.ColumnSpan="跨列数")。
示例:
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="8*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="8*"/>
</Grid.ColumnDefinitions>
<Grid>
上面定义两行两列,行只能设置高度,列只能设置宽度,第一行1份,第二行占8份,第一列占100的宽度,第列占8份,布局内容就在第一个Grid元素中编写。
显示图:
2.1 StackPanel
StackPanel特点:
* 可以把内部元素在纵向或横向上紧凑排列,形成栈式布局。
* 移除前面的空间后可以自动向前补充空余。
一般我们只需使用Orientation、HorizontalAlignment、VerticalAlignment这三个属性组合出各种排列和对齐方式。Orientation决定内部元素是横向排列还是纵向排列,默认是纵向排列(Vertical),横向排列为Horizontal
示例:
<StackPanel>
<GroupBox Header="标题" Height="50">
<StackPanel Orientation="Horizontal">
<Button Width="50">一</Button>
<Button Width="50">二</Button>
<Button Width="50">三</Button>
<Button Width="50">四</Button>
<Button Width="50">五</Button>
<Button Width="50">六</Button>
</StackPanel>
</GroupBox>
</StackPanel>
显示图:
3.1 Canvas
Canvas使用起来比较简单,与Windows Form窗体上布局基本上是一致的,简单示例下。
<Canvas>
<TextBlock Text="用户名:" Canvas.Left="12" Canvas.Top="12"/>
<TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="9"/>
<TextBlock Text="密码:" Canvas.Left="12" Canvas.Top="41" Height="16" Width="36"/>
<TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="38"/>
<Button Content="确定" Width="80" Height="22" Canvas.Left="100" Canvas.Top="67"/>
<Button Content="清除" Width="80" Height="22" Canvas.Left="186" Canvas.Top="67"/>
</Canvas>
显示图:
4.1DockPanel
DockPanel内元素会被附加上DockPanel.Dock这个属性,这个属性的数据类型为Dock的枚举。Dock枚举可取Left、Top、Right和Bottom四个值,根据Dock属性值,DockPanel内的元素会向指定方向积累,切分DockPanel内部的剩余可用空间。
示例:
<DockPanel>
<TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"/>
<TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Black"/>
<TextBox BorderBrush="Black"/>
</DockPanel>
显示图:
默认情况向DockPanel最后一个子元素会自动填充最后剩余空间,若是不想让他填充,可DockPanel使用属性LastChildFill="False"取消自动填充。
5.1 WrapPanel
WarpPanel内部采用的是流式布局。使用Orientation属性来控制流延伸的方向,使用HorizontalAlignment和VerticalAlignment两个属性来控制内部控件的对齐。在流延伸的方向上,WrapPanel会排列尽可能多的控件,排不下去的控件会将新的一行或一列继续排列。
示例:
<WrapPanel>
<GroupBox Header="标题">
<WrapPanel Orientation="Horizontal" ItemHeight="20" ItemWidth="80">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
<Button>Five</Button>
<Button>Six</Button>
</WrapPanel>
</GroupBox>
</WrapPanel>
显示图: