WPF-Panel常用的9种布局方式详解

所有WPF布局容器都是派生自System.Windows.Controls.Panel抽象类的面板。（7、8、9除外）

1.Grid表格布局

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

<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的列宽与行高可采用固定、自动、按比例三种方式定义。

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

2.StackPanel堆叠布局

StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（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，则元素将从右向左排列。

3.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>

4.DockPanel泊靠试面板

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

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

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

5.UniformPanel

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>

6.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"为准

7.ScrollViewer滚动装饰

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

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

注意：

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

8.ViewBox

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

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

9.Border边框装饰

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

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

参考：https://blog.csdn.net/qq_44034384/article/details/106154954

posted @ 2026-06-15 13:53 Tony.Jia 阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

Tony.Jia