首页 > 代码库 > WPF UI布局（Layout）
WPF UI布局（Layout）
WPF是专门用户界面技术，布局是核心功能之一。
每个布局元素都有自己的特点，要灵活使用。
WPF中布局元素有如下：
Grid：网格
可以自行定义行和列并通过行列的数量、行高和列宽来调整布局。类似Table。
Grid具有ColumnDefinitions和RowDefinitions属性，它们分别是ColumnDefinition和RowDefinition的集合，
表示Grid定义了多少行多少列。
StackPanel：栈式面板
可以将包含的元素在垂直或水平方向上排成一条直线，移除前一个元素后面一个元素会自动向前填充。
StackPanel使用3个属性来控制内部元素的布局，分别为:
Orientation（绝对内部元素横向还是纵向累积）
HorizontalAlignment（水平方向对齐方式）
VerticalAlignment(竖直方向对齐方式)
例：使用StackPanel布局的选项表
<Grid> <GroupBox Header="请选择没有错别字的成语" BorderBrush="Black" Margin="5"> <StackPanel Margin="5"> <CheckBox Content="A.迫不及待"/> <CheckBox Content="A.唉声叹气"/> <CheckBox Content="A.不可理喻"/> <CheckBox Content="A.婆子敏捷"/> <CheckBox Content="A.迫不及待"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="清空" Width="60" Margin="5"/> <Button Content="确认" Width="60" Margin="5"/> </StackPanel> </StackPanel> </GroupBox> </Grid>
效果：
Canvas 画布
内部元素可以以像素为单位的绝对坐标进行定位，类似于winFrom
下面例子用Canvas代替Grid设计登录界面：（窗口布局不改变，尺寸固定。不然Grid布局弹性比较好
<Canvas> <TextBlock Text="用户名：" Canvas.Left="12" Canvas.Top="12"/> <TextBox Width="200" Canvas.Left="66" Height="23" Canvas.Top="9" BorderBrush="Black"/> <TextBlock Text="密码：" Canvas.Left="12" Canvas.Top="40.72" Height="16" Width="36"/> <TextBox Width="200" Canvas.Left="66" Height="23" Canvas.Top="38" BorderBrush="Black"/> <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>
效果：
DockPanel 泊考式面板
DockPanel 内的元素会被附加上Dock属性，数据类型为Dock枚举。
Dock枚举可取Lift、Top、Right、Bottom。
DockPanel有一个重要属性bool类型的LastChildFill，默认为True。
LastChildFill为True，最后一个元素的Dock属性会被忽略。这个元素会把所有剩余空间充满。
<Grid> <DockPanel> <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"/> <TextBox DockPanel.Dock="Left" Width="120" BorderBrush="Black"/> <TextBox BorderBrush="Black"/> </DockPanel> </Grid>
WrapPanel 自动折行面板
内部元素排满后自动折行，类似于流式布局。
WranpPanel使用Orientation属性控制流延伸方向。
使用VerticalAlignment和HorizontalAlignment控制内部对齐方式
PS：平时使用最多的还是Grid和StackPanel。
WPF UI布局（Layout）