WPF 项目开发入门（二） WPF 页面布局

WPF 项目开发入门（一） 安装运行
WPF 项目开发入门（二） WPF 页面布局
WPF 项目开发入门（三）WPF 窗体与页面
WPF 项目开发入门（四） MVVM 模式 与 TreeView树组件
WPF 项目开发入门（五）ListView列表组件 与 Expander组件
WPF 项目开发入门（六）DataGrid组件
WPF 项目开发入门（七） From表单组件
WPF 项目开发入门（八）数据库驱动配置与数据库操作
WPF 项目开发入门（九）数据库连接 NHibernate使用
WPF 项目开发入门（十）DevExpress 插件+NHibernate登录
WPF 项目开发入门（十一）DevExpress 插件 Grid表格应用
布局是页面元素进行排版的重要组件，大到项目的后台UI框架，小到页面UI元素的排放组合都需要用到布局元素进行排版。

在WPF中布局分为以下几种布局方式
名称备注Gird表格布局StackPanel顺序布局DockPanel上下左右布局WrapPanel折叠排序布局

1 Gird表格布局

Gird表格布局是行和列组合在一起布局方式。它与HTML中的table，Excel 单元格非常显示，通过设置行与列来达到对UI组件的位置进行排放。

Gird布局定义内容

• 定义Gird列。
• 定义Gird行。
• 定义其他组件在grid中的位置。
• Grid.Row 和 Grid.Column 中指定放置其他组件的位置。索引从左上角的 0 开始。

<Grid.ColumnDefinitions>----列设置
<Grid.RowDefinitions>-------行设置
<ButtonGrid.Row="1"Grid.Column="2"/> ----组件所在位置，Grid.Row行，Grid.Column列位置

Grid.ColumnDefinitions 列

<Grid.ColumnDefinitions><ColumnDefinitionWidth="200"></ColumnDefinition>----第1列 对应Grid.Column="0"
    <ColumnDefinitionWidth="*"></ColumnDefinition>------第2列 对应Grid.Column="1"
</Grid.ColumnDefinitions><ButtonGrid.Row="0"Grid.Column="0"/><ButtonGrid.Row="0"Grid.Column="1"/>

Grid. ColumnDefinitions列属性设置，定义列的固定宽度与列宽百分。

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

Grid.RowDefinitions 行

<Grid.RowDefinitions><RowDefinitionHeight="40"></RowDefinition>----第1行 对应Grid.Row="0"
 <RowDefinitionHeight="Auto"></RowDefinition>--第2行 对应Grid.Row="1"
 <RowDefinitionHeight="*"></RowDefinition>-----第4行 对应Grid.Row="3"
</Grid.RowDefinitions><ButtonGrid.Row="0"Grid.Column="0"/><ButtonGrid.Row="1"Grid.Column="0"/><ButtonGrid.Row="3"Grid.Column="0"/>

Grid. RowDefinitions行属性设置，定义行的固定宽度与列宽百分。

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

计算器实例

创建个计算器布局。首先，创建一个显示值的标签，然后创建计算器按钮。每个按钮的边距为 5，以确保控件周围有 5 个像素的边距。显示值的标签部分使用了像HTML中table合并单元格 ColumnSpan 一样合并第一行的所有列。

xaml代码部分

<Grid><Grid.ColumnDefinitions><ColumnDefinitionWidth="*"/>-----------列1设置
            <ColumnDefinitionWidth="*"/>-----------列2设置
            <ColumnDefinitionWidth="*"/>-----------列3设置
            <ColumnDefinitionWidth="*"/>-----------列4设置
        </Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinitionHeight="2*"/>-----------行1设置
            <RowDefinitionHeight="*"/>------------行2设置
            <RowDefinitionHeight="*"/><RowDefinitionHeight="*"/><RowDefinitionHeight="*"/><RowDefinitionHeight="*"/></Grid.RowDefinitions><LabelContent="0"HorizontalAlignment="Right"VerticalAlignment="Bottom"FontSize="60"Grid.ColumnSpan="4"/><ButtonContent="AC"Margin="5"Grid.Column="0"Grid.Row="1"/><ButtonContent="+/-"Margin="5"Grid.Row="1"Grid.Column="1"/><ButtonContent="%"Margin="5"Grid.Row="1"Grid.Column="2"/><ButtonContent="/"Margin="5"Grid.Row="1"Grid.Column="3"/><ButtonContent="7"Margin="5"Grid.Row="2"Grid.Column="0"/><ButtonContent="8"Margin="5"Grid.Row="2"Grid.Column="1"/><ButtonContent="9"Margin="5"Grid.Row="2"Grid.Column="2"/><ButtonContent="*"Margin="5"Grid.Row="2"Grid.Column="3"/><ButtonContent="4"Margin="5"Grid.Row="3"Grid.Column="0"/><ButtonContent="5"Margin="5"Grid.Row="3"Grid.Column="1"/><ButtonContent="6"Margin="5"Grid.Row="3"Grid.Column="2"/><ButtonContent="-"Margin="5"Grid.Row="3"Grid.Column="3"/><ButtonContent="1"Margin="5"Grid.Row="4"Grid.Column="0"/><ButtonContent="2"Margin="5"Grid.Row="4"Grid.Column="1"/><ButtonContent="3"Margin="5"Grid.Row="4"Grid.Column="2"/><ButtonContent="+"Margin="5"Grid.Row="4"Grid.Column="3"/><ButtonContent="0"Margin="5"Grid.Row="5"Grid.Column="0"Grid.ColumnSpan="2"/><ButtonContent="."Margin="5"Grid.Row="5"Grid.Column="2"/><ButtonContent="="Margin="5"Grid.Row="5"Grid.Column="3"/></Grid>

其他grid布局例子

<Windowx:Class="WpfApp1.布局.grid"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:WpfApp1.布局"mc:Ignorable="d"d:DesignHeight="450"d:DesignWidth="800"Title="grid"><Grid><Grid.RowDefinitions><RowDefinitionHeight="40"></RowDefinition>-----定义位置高度
        <RowDefinitionHeight="Auto"></RowDefinition><RowDefinitionHeight="2*"></RowDefinition><RowDefinitionHeight="*"></RowDefinition></Grid.RowDefinitions><ButtonGrid.Row="0"Content="Button 1"></Button>//Grid.Row指位置高度    
        <ButtonGrid.Row="1"Content="Button 2"></Button><ButtonGrid.Row="2"Content="Button 3"></Button><ButtonGrid.Row="3"Content="Button 4"></Button></Grid></Window>

示例图

2 StackPanel水平布局

StackPanel 是一个垂直或水平排列控件的控件。使用 Orientation 属性来指定是垂直对齐还是水平对齐。

• Horizontal：水平方向。
• Vertical ：垂直方向。

StackPanel 使用时样子

<StackPanelOrientation=" Horizontal ">------水平方向
    <LabelHeight="30"/><TextBoxHeight="30"/><TextBoxHeight="30"/><ButtonHeight="30"/></StackPanel>

StackPanel 实例代码

<Grid><StackPanel>-----------------------------默认垂直布局
            <LabelHeight="30"/><TextBoxHeight="30"/><TextBoxHeight="30"/><ButtonHeight="30"/><StackPanelOrientation="Horizontal"----设置水平布局Height="100"Margin="10"><LabelHeight="30"Width="100"/><TextBoxHeight="30"Width="100"/><TextBoxHeight="30"Width="100"/><ButtonHeight="30"Width="100"/></StackPanel></StackPanel></Grid>

效果图

垂直与水平对齐

通过指定 VerticalAlignment 属性来指定控件的对齐方式。 StackPanel 的顶部选择 Top，底部选择 Bottom，中间选择 Center。您可以通过指定 HorizontalAlignment 属性来指定控件的对齐位置。从 StackPanel 的左边（Left）开始，从右边开始（Right），中间对齐（Center）。如果选择（Stretch），它将整体扩展。

• VerticalAlignment ：Top，Bottom，Center，Stretch
• HorizontalAlignment ：Left，Right，Center，Stretch

Margin 属性

您可以通过设置Margin属性来设置边距。通过指定 Margin = ”10,20,30,40″，可以按左、上、右、下的顺序设置边距。

<StackPanelVerticalAlignment="Center"--------------对齐方式HorizontalAlignment="Stretch"----对齐位置Margin="10,20,30,40">------------边距
   <LabelContent="文字内容"/><TextBoxText="0000"/><ButtonContent="请开始查询"/></StackPanel>

效果图

3DockPanel 容器布局

DockPanel 布局是上下左右水平和垂直排序组件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWHNUuXR-1656036353975)(D:\build\Typora\wpf\Snipaste_2021-11-30_23-59-22.png)]

在DockPanel布局中中其他组件指定 DockPanel.Dock 并决定将其向上、向下、向左或向右的位置。

• Top　头部
• Left　左边
• Right　右边
• Bottom　下边LastChildFill

LastChildFill 元素

LastChildFill 元素来设置框架中的最后一个元素是否填充剩余空间。默认值为 True，如果不需要填充剩余空间，则将其显式设置为 False

<Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><DockPanelLastChildFill="False"><ButtonDockPanel.Dock="Top"Content="Top"FontSize="20"/><ButtonDockPanel.Dock="Left"Content="Left"FontSize="20"/><ButtonDockPanel.Dock="Right"Content="Right"FontSize="20"/><ButtonDockPanel.Dock="Bottom"Content="Bottom"FontSize="20"/></DockPanel><DockPanelGrid.Column="1"LastChildFill="True">--------底部Bottom组件自动充实
         <ButtonDockPanel.Dock="Top"Content="Top"FontSize="20"/><ButtonDockPanel.Dock="Left"Content="Left"FontSize="20"/><ButtonDockPanel.Dock="Right"Content="Right"FontSize="20"/><ButtonDockPanel.Dock="Bottom"Content="Bottom"FontSize="20"/></DockPanel></Grid>

4 WrapPanel

WrapPanel 是一个将控件按纵向或横向排列。在排列控件时，如果控件在区域排列不下，该组件的特点是在向后折叠的同时排列控件。

WrapPanel 指定控件的放置方向以及分配给一个控件的垂直和水平宽度。

Orientation 方向属性

指定 Vertical 以垂直排列控件，指定 Horizontal 以水平排列它们。

使用 ItemHeight 指定一个控件的垂直宽度，使用 ItemWidth 指定水平宽度。

横排列例子

<WrapPanelOrientation="Horizontal"ItemHeight="80"ItemWidth="80"><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/></WrapPanel>

水平排列

<WrapPanelOrientation="Vertical"ItemHeight="80"ItemWidth="80"><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/></WrapPanel>

唯一的区别是Orientation属性设置。

实例代码

<Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><WrapPanelOrientation="Horizontal"ItemHeight="80"ItemWidth="80"><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/></WrapPanel><WrapPanelGrid.Column="1"Orientation="Vertical"ItemHeight="80"ItemWidth="80"><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/><ButtonContent="AAA"FontSize="20"/></WrapPanel></Grid>

效果图

5 项目后台布局

在实际的项目开发中制作一个符合管理后台要求的UI设计,需要将WPF中多种布局组件进行组合使用。

1 使用 DockPanel 布局将页面分成3个操作部分。

<DockPanel><MenuDockPanel.Dock="Top"></Menu><GridDockPanel.Dock="Left"></Grid><GridDockPanel.Dock="Right"></Grid></DockPanel>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztnYcidU-1656036353976)(D:\build\Typora\wpf\Snipaste_2021-11-30_17-23-21.png)]

2 Left部分组件，使用Grid布局创建高于宽

<GridGrid.IsSharedSizeScope="True"DockPanel.Dock="Left"><Gridx:Name="layer0Grid"Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinitionHeight="*"></RowDefinition>------------设置Grid布局的高
      </Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinitionWidth="300"></ColumnDefinition>------设置Grid布局的宽300
     </Grid.ColumnDefinitions><BorderBackground="red"></Border></Grid></Grid>

3 Right部分组件，使用Grid布局创建高于宽

<GridGrid.IsSharedSizeScope="True"DockPanel.Dock="Right"><Gridx:Name="conetext"Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinitionHeight="*"></RowDefinition>-----------设置Grid布局的高自适应
      </Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinitionWidth="*"></ColumnDefinition>------设置Grid布局的宽自适应
      </Grid.ColumnDefinitions><BorderBackground="Blue"></Border></Grid></Grid></Grid>

4 整体布局代码

<Windowx:Class="WpfApp1.布局.main"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp1.布局"mc:Ignorable="d"Title="main"Height="450"Width="1200"><DockPanel><MenuDockPanel.Dock="Top">   ----------------top部分菜单组件
            <MenuItemHeader="文件"/><MenuItemHeader="编辑"/><MenuItemHeader="视图"/><MenuItemHeader="项目"/><MenuItemHeader="帮助"/></Menu><GridGrid.IsSharedSizeScope="True"DockPanel.Dock="Left"><Gridx:Name="layer0Grid"Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinitionHeight="*"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinitionWidth="300"></ColumnDefinition></Grid.ColumnDefinitions></Grid><BorderBackground="red"></Border>------------加入菜单树与手风琴组件
        </Grid><GridGrid.IsSharedSizeScope="True"DockPanel.Dock="Right"><Gridx:Name="conetext"Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinitionHeight="*"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinitionWidth="*"></ColumnDefinition></Grid.ColumnDefinitions><BorderBackground="Blue"></Border>-------内容组件部分
            </Grid></Grid></DockPanel></Window>

效果图