名称 | 描述 |
StackPanel | 在水平或垂直的堆栈中放置元素,通常应用于一个复杂的布局中的一小块区域 |
WrapPanel | 在一系列可换行(列)的行中放置元素,支持水平、垂直方向,一行(列)放不下自动拍到下一行(列) |
DockPanel | 根据容器整个边界调整元素,指定上、下、左、右 |
Grid | 网格布局,指定行列,经常使用 |
UniformGrid | 在一个不可见但是强制所有单元格具有相同尺寸的网格中放置元素,不经常用 |
Canvas | 使用固定坐标绝对定位,不太常用 |
1、StackPanel
名称 | 描述 |
Orientation(Horizontal、Vertical) | 布局方向:水平与垂直 |
HorizontalAlignment、VerticalAlignment | 水平方向:Center、Left、Right、Stretch 垂直方向:Center、Top、Bottom、Stretch 该属性决定元素在容器中靠左还是靠右还是居中 |
Margin="5,5,5,5" | 容器周围的控件,左、上、右、下 |
MinWidth与MinHeight | 设置最小宽度与高度 |
MaxWidth与MaxHeight | 设置最大宽度与高度 |
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="5,5,5,5" MinHeight="50" MinWidth="100" MaxWidth="600" MaxHeight="300" Height="200" Width="400">
<Button Content="Hello World1" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World2" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World3" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World4" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World5" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World6" MinWidth="50" MaxWidth="100"></Button>
</StackPanel>
2、WrapPanel
<WrapPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="5,5,5,5" MinHeight="50" MinWidth="100" MaxWidth="600" MaxHeight="300" Height="200" Width="400">
<Button Content="Hello World1" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World2" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World3" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World4" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World5" MinWidth="50" MaxWidth="100"></Button>
<Button Content="Hello World6" MinWidth="50" MaxWidth="100"></Button>
</WrapPanel>
指定水平、垂直方向
3、DockPanel
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="文件"></MenuItem>
<MenuItem Header="编辑"></MenuItem>
</Menu>
<TextBox DockPanel.Dock="Bottom"></TextBox>
</DockPanel>
指定上下左右
4、Grid
<Grid ShowGridLines="True" MinHeight="200" MinWidth="400">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="第一行第一列" Height="40" Width="100" Grid.Row="0" Grid.Column="0" MinHeight="40" MinWidth="100"></Button>
<Button Content="第一行第二列(跨两列)" Height="40" Width="150" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" MinHeight="40" MinWidth="150"></Button>
</Grid>
5、UniformGrid
<UniformGrid Rows="2" Columns="2">
<Button Content="Hello(0,0)" Margin="10,10,10,10"></Button>
<Button Content="Hello(0,1)" Margin="10,10,10,10"></Button>
<Button Content="Hello(1,0)" Margin="10,10,10,10"></Button>
<Button Content="Hello(1,1)" Margin="10,10,10,10"></Button>
</UniformGrid>
每一个网格大小一样
6、Canvas
<Canvas>
<Button Canvas.Left="10" Canvas.Top="10" Content="(10,10)"></Button>
<Button Canvas.Left="30" Canvas.Top="30" Content="(30,30)"></Button>
<Button Canvas.Left="100" Canvas.Top="60" Content="(100,60)"></Button>
</Canvas>
点点滴滴