WPF常用的9种布局方式，建议收藏！

概述：本文简要介绍了WPF中布局常用控件及布局相关的属性。

一、Grid

Grid为WPF中最常用的布局容器, 作为View中的主要组成部分, 负责框架中整体的页面布局。

标签	含义
ShowGridLines	可以设置行业的边距线的显示
Grid. RowDefinitions	可以创建任意行, 进行固定高度与百分比高度设置
Grid. ColumnDefinitions	可以创建任意列, 进行固定宽度与百分宽度设置

示例：

<Grid>
    <Grid.RowDefinitions>   
        <RowDefinition Height="40"></RowDefinition> 
        <RowDefinition Height="Auto"></RowDefinition>   
        <RowDefinition Height="2*"></RowDefinition>    
        <RowDefinition Height="*"></RowDefinition>   
    </Grid.RowDefinitions>  
    <Button Grid.Row="0" Content="Button 1"></Button> 
    <Button Grid.Row="1" Content="Button 2"></Button>
    <Button Grid.Row="2" Content="Button 3"></Button> 
    <Button Grid.Row="3" Content="Button 4"></Button>
</Grid>

效果图：

注意：

Grid的列宽与行高可采用固定、自动、按比例三种方式定义。

1. 固定长度：值为一个确定的数字
2. 自动长度：值为Auto，实际作用就是取实际控件所需的最小值
3. 比例长度：*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3

二、StackPanel

StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。

属性	含义
Orientation	用于设置StackPanel的元素排列方式。默认以垂直的方式布局
Horizontal	水平布局, 设置水平效果
Vertical	垂直布局, 设置垂直效果

示例：

<StackPanel Name="stackpanel1" Orientation="Horizontal">
    <Button Content="Button1"></Button>
    <Button Content="Button2"></Button>
    <Button Content="Button3"></Button>
</StackPanel>
<StackPanel Name="stackpanel2" Orientation="Vertical">
    <Button Content="Button4"></Button>
    <Button Content="Button5"></Button>
    <Button Content="Button6"></Button>
</StackPanel>
<StackPanel Name="stackpanel3" Orientation="Horizontal" FlowDirection="RightToLeft">
    <Button Content="Button7"></Button>
    <Button Content="Button8"></Button>
    <Button Content="Button9"></Button>
</StackPanel>

效果图：

注意：

Orientation="Horizontal"时，设置FlowDirection属性为RightToLeft，则元素将从右向左排列。

三、WrapPanel

WrapPanel与StackPanel类似的功能, 相对于WrapPanel , 具有在有限的容器范围内, 可以自动换行, 或者换列处理。具体则取决于WrapPanel的排列方式 (Orientation)。

• Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列
• Orientation="Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列

示例：

<WrapPanel Orientation="Horizontal">
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
    <Button Content="Button 200" Width="200"></Button>
    <Button Content="Button 150" Width="150"></Button>
</WrapPanel>

效果图：

四、DockPanel

DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

• 包含在DockPanel中的元素, 具备DockPanel.Dock的4个枚举值 （Top/Left/Right/Bottom） 用于设置元素的锚定位置
• LastChildFill : 容器中的最后一个元素时, 默认该元素填充DockPanel所有空间, 默认值为True
• DockPanel中的元素未显示添加DockPanel.Dock属性时, 系统则会默认为 DockPanel.Dock=“Left”

示例：

<DockPanel>
    <Button Content="上" DockPanel.Dock="Left"></Button>
    <Button Content="下" DockPanel.Dock="Bottom"></Button>
    <Button Content="左" DockPanel.Dock="Left"></Button>
    <Button Content="右" DockPanel.Dock="Right"></Button>
</DockPanel>

效果图：

五、 UniformGrid

UniformGrid就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件。

• 与Grid不同的是, 该容器具备Columns/Rows 属性, 通过设置该属性, UniformGrid则具备相应的 行与列, 但是设置的Columns/Rows不允许单独的进行容器的大小设置
• 位于UniformGrid中的子元素, 按输入顺序排列至容器中, 直至填充容器的所有空间
• 未显示指定Columns/Rows, UniformGrid则为子元素动态分配Columns/Rows, 换行与换列的基 准主要基于UniformGrid的容器大小( 宽度与高度)

示例：

<UniformGrid>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
    <Button Content="Button"></Button>
</UniformGrid>

效果图：

六、Canvas

Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。

示例：

<Canvas>
    <Button Canvas.Left="50" Canvas.Top="50" Content="Button 1"></Button>
    <Button Canvas.Right="50" Canvas.Top="50" Content="Button 2"></Button>
    <Button Canvas.Left="50" Canvas.Bottom="50" Content="Button 3"></Button>
    <Button Canvas.Right="50" Canvas.Bottom="50" Content="Button 4"></Button>
</Canvas>

效果图：

注意：

• 如果同时设置 Canvas.Left="50"Canvas.Right=“50”，则以Canvas.Left="50"为准
• 如果同时设置Canvas.Top=“50” Canvas.Bottom=“50”，则以Canvas.Top ="50"为准

七、ScrollViewer

ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel控件放置在父 ScrollViewer中。然后可以将子控件放置在该控件中。

属性	含义
HorizontalScrollBarVisibility	水平滚动条是否显示默认为Hidden
VerticalScrollBarVisibility	垂直滚动条是否显示 默认为Visible

示例：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Button Content="Button" Width="800" Height="800"></Button>
</ScrollViewer>

效果图：

注意：

一般我们都会设置 HorizontalScrollBarVisibility=“Auto” VerticalScrollBarVisibility=“Auto”，意思是：当内容超出可视范围时，才显示横向/纵向滚动条。

八、ViewBox

Viewbox的作用是拉伸或延展位于其中的组件，以填满可用空间。在Viewbox中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Viewbox中。然后可以将子控件放置在该控件中。

常用属性：Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间，Stretch默认值为Uniform。

属性值	含义
None	不进行拉伸，按子元素设置的长宽显示
Uniform	按原比例缩放子元素，使得一边不足，另一边恰好填充
Fill	缩放子元素，使得子元素的长变为Viewbox的长，宽变为Viewbox的宽
UniformToFill	按原比例缩放子元素，使得子元素一边恰好填充，另一边超出Viewbox的区域

示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition>        
        </RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition>    
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Viewbox Grid.Row="0" Grid.Column="0" Stretch="None">
        <Button Width="100" Height="50" Content="None"></Button>
    </Viewbox>
    <Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform">
        <Button Width="100" Height="50" Content="Uniform"></Button>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="0" Stretch="Fill">
        <Button Width="100" Height="50" Content="Fill"></Button>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">
        <Button Width="100" Height="50" Content="UniformToFill"></Button>
    </Viewbox>
</Grid>

效果图：

九、Border

Border 是一个装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Border中。然后可以将子控件放置在该 Panel控件中。

属性	含义
Background	背景色
BorderBrush	边框色
BorderThickness	边框宽度
CornerRadius	各个角，圆的半径

示例：

<Grid>
    <Border Background="YellowGreen" BorderBrush="Black" BorderThickness="0, 2, 4, 6" CornerRadius="0, 10, 20, 30"></Border>
</Grid>

效果图：