布局控件是用于进行控件布局的容器类控件,其内部控件按照一定规律自动排列,且在父控件改变大小时,会自动适应。常用布局控件如下:
1. 一维布局控件(StackPanel)
其内部控件按照某个维度自动排列,排列方向通过Orientation属性控制。
- 水平方向(Orientation=Horizontal)
<StackPanel Orientation="Horizontal">
<Label Width="50" Height="50" Background="Red" Margin="10"></Label>
<Label Width="50" Height="50" Background="Blue" Margin="10"></Label>
<Label Width="50" Height="50" Background="Yellow" Margin="10"></Label>
</StackPanel>
- 垂直方向(Orientation=Vertical)
<StackPanel Orientation="Horizontal">
<Label Width="50" Height="50" Background="Red" Margin="10"></Label>
<Label Width="50" Height="50" Background="Blue" Margin="10"></Label>
<Label Width="50" Height="50" Background="Yellow" Margin="10"></Label>
</StackPanel>
2. 停靠布局控件(DockPanel)
指定控件停靠区域,默认为充满,通过在子控件中指定DockPanel.Dock来确定停靠位置
<DockPanel>
<Label DockPanel.Dock="Left" Background="Red">靠左停靠</Label>
<Label DockPanel.Dock="Right" Background="Blue">靠右停靠</Label>
<Label DockPanel.Dock="Top" Background="Yellow">靠上停靠</Label>
<Label DockPanel.Dock="Bottom" Background="LemonChiffon">靠下停靠</Label>
<Label Background="AliceBlue">充满</Label>
</DockPanel>
3. 二维布局控件(Grid)
该控件为WPF中最常用的布局控件,提供二维方向的控件布局。类似于一个EXCEL表格;控件中,通过`ColumnDefinitions`和`RowDefinitions`定义行和列信息。其内部子控件,通过Grid.Row和Grid.Column属性指定控件所在单元格,通过Grid.RowSpan和Grid.ColumnSpan属性指定控件的列跨度和行跨度(类似于EXCEL中的合并单元格)
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<!--指定列宽度为100像素-->
<ColumnDefinition Width="100"></ColumnDefinition>
<!--表示列宽度自适应内容-->
<ColumnDefinition Width="Auto"></ColumnDefinition>
<!--未指定时,默认为*,表示按照剩余宽度分配,这里表示本列占据剩余宽度的1/3,下面2*列占据2/3-->
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Background="Yellow">Label1</Label>
<Label Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Background="Red">Label2</Label>
<Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Background="AntiqueWhite">Label3</Label>
</Grid>