【WPF】桌面程序开发之xaml页面基础布局方式详解

使用Visual Studio开发工具，我们可以编写在Windows系统上运行的桌面应用程序。其中，WPF（Windows Presentation Foundation）项目是一种常见的选择。然而，对于初学者来说，WPF项目中xaml页面的布局设计可能是一个难点。下面，将简要介绍WPF项目中xaml页面的基础布局知识。

文章目录

页面布局
网格布局
- Grid
层叠布局
- Grid
内联布局
- WrapPanel
块布局
- StackPanel
弹性布局
- DockPanel
一些控件
- Border

如果还不知道怎么创建WPF项目，可以看以下文章，回顾一下再来

Windows系统桌面应用程序编程开发新手入门-打造自己的小工具

学过web前端页面设计的同学应该很熟悉，等看完这篇文章，相信你很快就会掌握了。

页面布局

首先看看页面布局文件，带后缀名xaml的是页面布局文件，内容如下

<Window x:Class="WpfApp4.MainWindow"
        ...
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!-- 这里开始添加控件布局 -->
    </Grid>
</Window>

其中xmlns:local="clr-namespace:WpfApp4"是指定本地可用控件local的命令空间

接下来讲一讲通常用到的布局容器控件，这些控件下是可以有多个子控件的

网格布局

从上面的页面可以看到，常用的是Grid控件，如何使用它呢

Grid

这个控件<Grid>是网格面板，可以将所有子控件按行和列数进行布局。

往里面添加的一些控件，默认是放在第一个格子位置上，通过设置它的列数和行数来确定子控件的位置，内容如下

<Grid>
	<Grid.RowDefinitions>
	   <RowDefinition></RowDefinition>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	    <ColumnDefinition></ColumnDefinition>
	    <ColumnDefinition></ColumnDefinition>
	    <ColumnDefinition></ColumnDefinition>
	    <ColumnDefinition></ColumnDefinition>
	</Grid.ColumnDefinitions>
     <Button Content="Hello zs1028" Grid.Row="0" Grid.Column="0" />
     <Button Content="Hello zs1028" Grid.Column="1" />
     <Button Content="Hello zs1028" Grid.Column="2" />
     <Button Content="Hello zs1028" Grid.Column="3" />
     <Button Content="Hello zs1028" Grid.Column="4" />
     <Button Content="Hello zs1028" Grid.Column="5" />
 </Grid>

其中 Grid.Row="0" Grid.Column="0"是决定网格位置的，可不设置，因为默认均是0

显示效果如下图
在这里插入图片描述

若要限制网格为2行，需要在</RowDefinition>标签后面再加一行，

<RowDefinition></RowDefinition>

继续添加子控件，设置Grid.Row="1" 即可放置在第二行

若要进一步限制其中的列宽，就设置一个属性，内容如下

<ColumnDefinition Width="100"></ColumnDefinition>

层叠布局

在网格布局中，所有子控件不设置行列数就是默认都在第一个网格，是可以层叠存放的，

Grid

用网格布局就行，它可以实现层叠布局

<Grid>
    <Button Content="No.1 zs1028" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <Button Content="No.2 zs1028" HorizontalAlignment="Center" VerticalAlignment="Top" />
    <Button Content="No.3 zs1028" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
    <Button Content="No.4 zs1028" HorizontalAlignment="Left" VerticalAlignment="Center" />
    <Button Content="No.5 zs1028" HorizontalAlignment="Right" VerticalAlignment="Center" />
    <Button Content="No.6 zs1028" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

显示效果如下图
在这里插入图片描述
避免子控件被上下层控件覆盖至看不见，需要设置属性：

通过其HorizontalAlignment和VerticalAlignment属性来控制子控件如何选择上下左右居中放置，
还有个选择值为Stretch，不常用，它表示往水平或者垂直方向填充；

内联布局

也是在静态布局中的说法，所有子控件都是内联控件，要设置宽高，

若不设置的子控件会由系统默认自动调整最小宽高

WrapPanel

这个控件WrapPanel是自动换行面板，可以将所有子控件按顺序排列，从左到右，当空间宽度不足存放时，剩下的子控件才会自动换行放置在下面。

<WrapPanel>
    <Button Content="Hello zs1028" />
    <Button Content="Hello zs1028" />
    <Button Content="Hello zs1028" />
    <Button Content="Hello zs1028" />
    <Button Content="Hello zs1028" />
    <Button Content="Hello zs1028" />
</WrapPanel>

显示效果如下图
在这里插入图片描述

块布局

也是在静态布局中的说法，所有子控件都是块控件，占用整行或者整列，

StackPanel

这个控件</StackPanel>是堆栈面板，可以将控件按顺序垂直或水平排列, 是一种常用来布局的面板，

它可以在单个方向（水平或垂直）上排列其子元素，

设置属性Orientation值有：

Horizontal 水平
Vertical 垂直

往里面添加的一些控件是堆起来放的，内容如下

<StackPanel Background="Gray">
   <Button Content="Hello zs1028" />
	<Button Content="Hello zs1028" />
	<Button Content="Hello zs1028" />
	<Button Content="Hello zs1028" />
	<Button Content="Hello zs1028" />
	<Button Content="Hello zs1028" />
</StackPanel>

可设置属性Margin=”10,5“的边距来调整控件距离父级控件和相邻控件的位置

默认占整行，显示效果如下图
在这里插入图片描述

将属性改成Orientation="Horizontal"，会占整列，显示效果如下
在这里插入图片描述

这里与之前的控件WrapPanel不同的是，它是不会自动换行，超出的部分会被遮挡

弹性布局

DockPanel

这个控件<DockPanel>是停靠用的面板，可以将所有子控件停靠在面板的四个边缘,

需要决定布局方向，通过属性DockPanel.Dock可设置子控件在上下左右方向布局，

属性DockPanel.Dock决定子控件的布局位置，其值有

Top
Left
Right
Bottom

如DockPanel.Dock="Top" 决定布局位置在上边，内容如下

<DockPanel Margin="0,0,0,0">
    <DockPanel DockPanel.Dock="Top">
        <TextBlock Text="Hello zs1028" />
    </DockPanel>
    <StackPanel Background="Gray">
        <Label Content="填充区域" />
    </StackPanel>
</DockPanel>

如果第一个控件设置了Top或者Buttom，父控件会将所有子控件按照上下（垂直）方向布局；
如果设置了Left或者Right，那就是按照左右（水平）方向布局；

显示效果如下
在这里插入图片描述

最后一个控件大小是不受控制的，因为这会填充剩余空间

如果不想被用来填充，就设置父控件LastChildFill="False"，内容如下

<DockPanel Margin="0,0,0,0" LastChildFill="False">
	<DockPanel DockPanel.Dock="Top">
        <TextBlock Text="Hello zs1028" />
    </DockPanel>
	<StackPanel Background="Gray">
        <Label Content="填充区域" />
    </StackPanel>
</DockPanel>

显示效果图如下
在这里插入图片描述

可发现，如果布局方向是垂直的，它只给填充了高度

果然填充的都是最后一个控件，

那如果要填充第一个控件，应该怎么办呢，内容如下

<DockPanel Margin="0,0,0,0">
	<DockPanel DockPanel.Dock="Bottom">
        <TextBlock Text="Hello zs1028" />
    </DockPanel>
	<StackPanel Background="Gray">
        <Label Content="填充区域" />
    </StackPanel>
</DockPanel>

效果图如下
在这里插入图片描述

没错吧，看布局方向，只要设置DockPanel.Dock="Bottom"，它就会放到下边，

布局规律不变，最后的子控件，可在父控件里的最上边填充

一些控件

还有一些控件，都只能有一个子控件，多个子控件它是会报错误的，要注意区分，

Border

这个控件，可以给子控件添加边框的效果，

修改边框控件的属性，内容如下

<Grid Margin="0,0,0,0">
    <Border Width="100" Height="50" BorderThickness="2" BorderBrush="Blue" CornerRadius="10">
        <TextBlock Text="Hello zs1028" />
    </Border>
</Grid>