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

WPF布局与排版功能介绍

Zht_bs

7190人浏览 · 2022-07-18 13:28:01

Zht_bs · 2022-07-18 13:28:01 发布

在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>-------行设置
<Button Grid.Row="1"  Grid.Column="2"/> ----组件所在位置，Grid.Row行，Grid.Column列位置

Grid.ColumnDefinitions 列

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

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

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

Grid.RowDefinitions 行

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

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

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

计算器实例

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

  <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>-----------列1设置
            <ColumnDefinition Width="*"/>-----------列2设置
            <ColumnDefinition Width="*"/>-----------列3设置
            <ColumnDefinition Width="*"/>-----------列4设置
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>-----------行1设置
            <RowDefinition Height="*"/>------------行2设置
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Label Content="0"
               HorizontalAlignment="Right"
               VerticalAlignment="Bottom"
               FontSize="60"
               Grid.ColumnSpan="4"/>

        <Button Content="AC"
                Margin="5"
                Grid.Column="0"
                Grid.Row="1"/>

        <Button Content="+/-"
                Margin="5"
                Grid.Row="1"
                Grid.Column="1"/>
        <Button Content="%"
                Margin="5"
                Grid.Row="1"
                Grid.Column="2"/>
        <Button Content="/"
                Margin="5"
                Grid.Row="1"
                Grid.Column="3"/>

        <Button Content="7"
                Margin="5"
                Grid.Row="2"
                Grid.Column="0"/>
        <Button Content="8"
                Margin="5"
                Grid.Row="2"
                Grid.Column="1"/>
        <Button Content="9"
                Margin="5"
                Grid.Row="2"
                Grid.Column="2"/>
        <Button Content="*"
                Margin="5"
                Grid.Row="2"
                Grid.Column="3"/>

        <Button Content="4"
                Margin="5"
                Grid.Row="3"
                Grid.Column="0"/>
        <Button Content="5"
                Margin="5"
                Grid.Row="3"
                Grid.Column="1"/>
        <Button Content="6"
                Margin="5"
                Grid.Row="3"
                Grid.Column="2"/>
        <Button Content="-"
                Margin="5"
                Grid.Row="3"
                Grid.Column="3"/>

        <Button Content="1"
                Margin="5"
                Grid.Row="4"
                Grid.Column="0"/>
        <Button Content="2"
                Margin="5"
                Grid.Row="4"
                Grid.Column="1"/>
        <Button Content="3"
                Margin="5"
                Grid.Row="4"
                Grid.Column="2"/>
        <Button Content="+"
                Margin="5"
                Grid.Row="4"
                Grid.Column="3"/>
        <Button Content="0"
                Margin="5"
                Grid.Row="5"
                Grid.Column="0"
                Grid.ColumnSpan="2"/>
        <Button Content="."
                Margin="5"
                Grid.Row="5"
                Grid.Column="2"/>
        <Button Content="="
                Margin="5"
                Grid.Row="5"
                Grid.Column="3"/>
    </Grid>

其他grid布局例子

<Window x: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>
        <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>//Grid.Row指位置高度    
        <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>
</Window>

示例图
在这里插入图片描述

2 StackPanel水平布局

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

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

StackPanel 使用时样子

<StackPanel Orientation=" Horizontal ">------水平方向
    <Label Height="30"/>
    <TextBox  Height="30"/>
    <TextBox Height="30"/>
    <Button  Height="30"/>
</StackPanel>

StackPanel 实例代码

<Grid>
    <StackPanel>-----------------------------默认垂直布局
            <Label Height="30"/>
            <TextBox Height="30"/>
            <TextBox Height="30"/>
            <Button Height="30"/>
            <StackPanel 
                Orientation="Horizontal" ----设置水平布局
                Height="100"
                Margin="10">
                <Label Height="30" Width="100"/>
                <TextBox Height="30" Width="100"/>
                <TextBox Height="30" Width="100"/>
                <Button Height="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″，可以按左、上、右、下的顺序设置边距。

<StackPanel VerticalAlignment="Center" --------------对齐方式
                    HorizontalAlignment="Stretch"----对齐位置
                    Margin="10,20,30,40">------------边距
   <Label Content="文字内容"/>
   <TextBox Text="0000"/>
   <Button Content="请开始查询"/>
</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>
      <DockPanel LastChildFill="False">
         <Button DockPanel.Dock="Top" Content="Top" FontSize="20"/>
         <Button DockPanel.Dock="Left" Content="Left" FontSize="20"/>
         <Button DockPanel.Dock="Right" Content="Right" FontSize="20"/>
         <Button DockPanel.Dock="Bottom" Content="Bottom" FontSize="20"/>
      </DockPanel>
      <DockPanel Grid.Column="1" LastChildFill="True">--------底部Bottom组件自动充实
         <Button DockPanel.Dock="Top" Content="Top" FontSize="20"/>
         <Button DockPanel.Dock="Left" Content="Left" FontSize="20"/>
         <Button DockPanel.Dock="Right" Content="Right" FontSize="20"/>
         <Button DockPanel.Dock="Bottom" Content="Bottom" FontSize="20"/>
      </DockPanel>
</Grid>

在这里插入图片描述

4 WrapPanel

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

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

Orientation 方向属性

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

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

横排列例子

<WrapPanel Orientation="Horizontal"
           ItemHeight="80"
           ItemWidth="80">
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
</WrapPanel>

水平排列

<WrapPanel Orientation="Vertical"
           ItemHeight="80"
           ItemWidth="80">
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
    <Button Content="AAA" FontSize="20"/>
</WrapPanel>

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

实例代码

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

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

5 项目后台布局

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

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

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

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

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

<Grid Grid.IsSharedSizeScope="True" DockPanel.Dock="Left">
  <Grid x:Name="layer0Grid"  Panel.ZIndex="0">
     <Grid.RowDefinitions>
         <RowDefinition Height="*"></RowDefinition>------------设置Grid布局的高
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300"></ColumnDefinition>------设置Grid布局的宽300
     </Grid.ColumnDefinitions>
     <Border Background="red"></Border>
    </Grid>
</Grid>

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

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

4 整体布局代码

<Window x: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>
        <Menu DockPanel.Dock="Top">   ----------------top部分菜单组件
            <MenuItem Header="文件" />
            <MenuItem Header="编辑" />
            <MenuItem Header="视图" />
            <MenuItem Header="项目" />
            <MenuItem Header="帮助" />
        </Menu>
        <Grid Grid.IsSharedSizeScope="True" DockPanel.Dock="Left">
            <Grid x:Name="layer0Grid"  Panel.ZIndex="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="300"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            </Grid>
            <Border Background="red"></Border>------------加入菜单树与手风琴组件
        </Grid>
        <Grid Grid.IsSharedSizeScope="True" DockPanel.Dock="Right">
            <Grid x:Name="conetext"  Panel.ZIndex="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Border Background="Blue"></Border>-------内容组件部分
            </Grid>
        </Grid>
    </DockPanel>
</Window>