WPF基础五：UI①布局元素Grid

最新推荐文章于 2024-04-20 15:18:48 发布

hd51cc

最新推荐文章于 2024-04-20 15:18:48 发布

阅读量1.8k

点赞数 2

分类专栏： # UI①Pannel族控件

本文链接：https://blog.csdn.net/hd51cc/article/details/115557741

版权

UI①Pannel族控件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Grid

定义由列和行组成的灵活的网格区域。

Grid的特点：

可以定义任意数量的行和列。
行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定、并可设置最大和最小值。
内部元素可以设置自己的所在的行和列，还可以设置自己跨行、跨列的数量。
可以设置Children元素的对齐方向。

Grid的使用场合：

UI布局的大型框架设计。
大量UI元素需要成行或者列对齐的情况。
UI整体尺寸改变时，元素需要保持固有的高度和宽度比例。
UI后期可能有比较大变更或扩展。

Grid类

名称	备注	权限
ColumnProperty	标识 Column 附加属性	public
ColumnSpanProperty	标识 ColumnSpan 附加属性	public
IsSharedSizeScopeProperty	标识 IsSharedSizeScope 附加属性	public
RowProperty	标识 Row 附加属性	public
RowSpanProperty	标识 RowSpan 附加属性	public
ShowGridLinesProperty	标识 ShowGridLines 依赖项属性	public

名称	备注	权限
ColumnDefinitions	获取在 Grid 的实例上定义的 ColumnDefinitionCollection	public
LogicalChildren	获取一个可用于迭代此 Grid 的逻辑子级的枚举数	public
RowDefinitions	获取在 Grid 的实例上定义的 RowDefinitionCollection	public
ShowGridLines	获取或设置一个值，该值指示网格线在此 Grid 中是否可见	public
VisualChildrenCount	获取一个表示此 Visual 实例中的 Grid 子级总数的值	protected

名称	备注	权限
ArrangeOverride	排列 Grid 元素的内容	protected
GetColumn	从给定的 UIElement 中获取 Column 附加属性值	public
GetColumnSpan	从给定的 UIElement 中获取 ColumnSpan 附加属性值	public
GetIsSharedSizeScope	从给定的 UIElement 中获取 IsSharedSizeScope 附加属性值	public
GetRow	从给定的 UIElement 中获取 Row 附加属性值	public
GetRowSpan	从给定的 UIElement 中获取 RowSpan 附加属性值	public
GetVisualChild	获取指定 `index` 位置处的子 Visual	protected
MeasureOverride	测量 Grid 的子元素，以便准备在 ArrangeOverride(Size) 传递过程中排列它们	protected
OnVisualChildrenChanged	当 Grid 元素的可视子级发生更改时调用	protected
SetColumn	将 Column 附加属性的值设置为给定的 UIElement	public
SetColumnSpan	将 ColumnSpan 附加属性的值设置为给定的 UIElement	public
SetIsSharedSizeScope	将 IsSharedSizeScope 附加属性的值设置为给定的 UIElement	public
SetRow	将 Row 附加属性的值设置为给定的 UIElement	public
SetRowSpan	将 RowSpan 附加属性的值设置为给定的 UIElement	public
ShouldSerializeColumnDefinitions	如果与此 ColumnDefinitionCollection 实例关联的 Grid 不为空，则返回 true	public
ShouldSerializeRowDefinitions	如果与此 RowDefinitionCollection 实例关联的 Grid 不为空，则返回 true	public

名称	备注	权限
IAddChild.AddChild	添加子对象	public
IAddChild.AddText	将节点的文本内容添加到对象	public

名称	备注
Column	获取或设置一个值，该值表示应显示 Grid 中的子内容的列
ColumnSpan	获取或设置一个值，该值指示 Grid 中的子内容所跨越的总列数
IsSharedSizeScope	获取或设置一个值，该值指示多个 Grid 元素共享大小信息
Row	获取或设置一个值，该值指示应显示 Grid 中的哪个子内容行
RowSpan	获取或设置一个值，该值表示在一个 Grid 中子内容所跨越的总行数

Grid.ShowGridLines 显示边界线

Grid.ShowGridLines="True"，显示边界线，布局的时候十分有用。

<Grid  Grid.ShowGridLines="True" >
</Grid>

Grid.ColumnDefinitions和Grid.RowDefinitions

定义Grid的行和列。行定义：RowDefinition。列定义:ColumnDefinition。

     <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition  />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
     </Grid>

行和列的宽度和高度： Width、Height

绝对值：double,默认单位px

名称	说明	简写	算换
Pixel	像素	px	图形基本单位
Inch	英寸	in	1in=96px
Centimeter	厘米	cm	1cm=(96/2.54)px
Point	点	pt	1pt=(96/72)px

比例值：double+*

例如：1*，1.5*

自动值：Auto

    <Grid>
        <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition Width="100"/>
             <ColumnDefinition Width="1.5*"/>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="100" />
             <RowDefinition Height="1.5*"/>
             <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
    </Grid>

UseLayoutRounding 布局舍入

UseLayoutRounding="True"，容器中所有内容对齐到最近的像素边缘，消除所有模糊问题。

    <Grid UseLayoutRounding="True"/>

子元素的行、列（Grid.Row、Grid.Column）和跨行、跨列（Grid.RowSpan、Grid.ColumnSpan）

Grid.Column：定位子元素所在列。

Grid.Row：定位子元素所在行。

Grid.ColumnSpan：子元素跨列数。

Grid.RowSpan：子元素跨行数。

默认情况下，行和列占用的空间量最少，以容纳给定行或列中包含的任何单元内的最大内容。例如，如果某个列中包含一个包含长词（如 "hippopotamus"）的单元格，但列中的所有其他单元格都具有更小的词（如 "dog"），则该列的宽度将是最大单词 (hippopotamus) 的宽度。

可以 Grid 通过结合使用 Margin 属性和对齐属性，精确地定位的子元素。

Grid 使用 GridLength 对象定义 RowDefinition 或ColumnDefinition 的大小调整特性。有关每个单位类型的定义，请参阅 GridUnitType 。

如果将子元素添加到 Grid 中的列，并且该列的 Width 属性设置为 Auto ，则将以无限制度量子元素。如果正在使用，则此行为会阻止水平滚动条显示 ScrollViewer ，因为子元素被视为未绑定。出于显示目的，将剪裁子元素，而不是滚动。

<Grid>
...
  <Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Content="Btn2" Grid.ZIndex="1"/>
<Grid/>

GridSplitter 窗口分隔

GridSplitter对象必须放在Grid单元中

GridSplitter对象总是改变整行或整列的尺寸，而非单元格的尺寸。

GridSplitter对象小，不易见。可以利用VerticalAlignment、 Width、 HorizontalAlignment、Height、Background。

GridSplitter的对齐方式还决定了分隔条是水平分割(VerticalAlignment="Center")还是垂直分割(HorizontalAlignment="Center")。

ResizeDirection:指定 GridSplitter 控件是在行之间还是在列之间重新分配空间。

ResizeBehavior:指定由 GridSplitter 控件调整其大小的行或列。

ShowsPreview：当用户拖动 GridSplitter 控件时该控件是否更新列或行的大小。

DragIncrement：分隔条移动的单位。

    <Grid  Grid.ShowGridLines="True" UseLayoutRounding="True">        
            <Grid.ColumnDefinitions>
                <ColumnDefinition  />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition  />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <GridSplitter
            Grid.RowSpan="3"
            Grid.Column="0"
            Width="2"
            VerticalAlignment="Stretch"
            Background="Blue"
            DragIncrement="10"
            ResizeBehavior="BasedOnAlignment"
            ResizeDirection="Columns"
            ShowsPreview="False" />
            <Button Grid.Row="0" Grid.Column="0" Content="Btn1" />
            <GridSplitter
            Grid.Row="1"
            Grid.ColumnSpan="4"
            Height="2"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Top"
            Background="Red"
            ResizeBehavior="BasedOnAlignment"
            ResizeDirection="Rows" />
    </Grid>

共享尺寸组

SharedSizeGroup：需要共享尺寸的行或列设置相同字符串的SharedSizeGroup属性。

Grid.IsSharedSizeScope ：需要在包含共享尺寸的父容器中，设置Grid.IsSharedSizeScope="True"

    <Grid Grid.IsSharedSizeScope="True" Grid.ShowGridLines="True" UseLayoutRounding="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="SSG1" />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition  />
                <RowDefinition />
                <RowDefinition />
            <Button Grid.Row="0" Grid.Column="0" Content="Btn1" />

        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="SSG1" />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Content="Btn2" Grid.ZIndex="1"/>
        </Grid>       
    </Grid>

子元素 Grid 按它们在标记或代码中出现的顺序进行绘制。因此，当元素共享相同的坐标时，可以用Grid.ZIndex实现分层顺序 (也称为 z 顺序) 。也可以利用Visibility、Opacity属性。

默认情况下，Panel 元素不接收焦点。若要强制 panel 元素以接收焦点，请将 Focusable 属性设置为 true 。

Grid 和 Table 共享一些常用功能，但每个功能都可以在适当的方案中应用，以便更好地使用其内置功能。 Grid 基于行和列索引添加元素; Table 不会。 Grid元素允许内容分层，其中有多个元素可以存在于单个单元中。 Table 不支持分层。 Grid 的子元素可相对于其 "单元格" 边界的左上角进行绝对定位。 Table 不支持此功能。 Grid 还提供比 Table 更灵活的大小调整行为。

XAML综合范例：

<Window
    x:Class="GridDemo.MainWindow"
    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:local="clr-namespace:GridDemo"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid Grid.IsSharedSizeScope="True" Grid.ShowGridLines="True" UseLayoutRounding="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  />
            <ColumnDefinition />
            <ColumnDefinition Width="100" SharedSizeGroup="SSG1"/>
            <ColumnDefinition SharedSizeGroup="SSG1"/>
        </Grid.ColumnDefinitions>
            <RowDefinition />
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1.5*"/>
        </Grid.RowDefinitions>
        <GridSplitter
            Grid.RowSpan="3"
            Grid.Column="0"
            Width="2"
            VerticalAlignment="Stretch"
            Background="Blue"
            DragIncrement="10"
            ResizeBehavior="BasedOnAlignment"
            ResizeDirection="Columns"
            ShowsPreview="False" />
        <Button Grid.Row="0" Grid.Column="0" Content="Btn1" />
    </Grid>
</Window>

运行后：

拖动分割条：

C#代码

MainWindow.xaml.cs如下，其余默认。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace GridDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            Grid grid = new Grid();
            Grid.SetIsSharedSizeScope(grid, true);  //Grid.IsSharedSizeScope = "True"
            grid.ShowGridLines = true;              //Grid.ShowGridLines = "True"
            grid.UseLayoutRounding = true;          //UseLayoutRounding = "True"  继承自FrameworkElement


            ColumnDefinition column1 = new ColumnDefinition();
            ColumnDefinition column2 = new ColumnDefinition();
            ColumnDefinition column3 = new ColumnDefinition();        
            ColumnDefinition column4 = new ColumnDefinition();

            //column3.Width =GridLength.Auto;
            column3.Width = new GridLength(100.0);  //Width = "100"
            column3.SharedSizeGroup = "SSG1";       //SharedSizeGroup = "SSG1"
            column4.SharedSizeGroup = "SSG1";       //SharedSizeGroup = "SSG1"

            grid.ColumnDefinitions.Add(column1);
            grid.ColumnDefinitions.Add(column2);
            grid.ColumnDefinitions.Add(column3);
            grid.ColumnDefinitions.Add(column4);

            RowDefinition row1 = new RowDefinition();
            RowDefinition row2 = new RowDefinition();
            RowDefinition row3 = new RowDefinition();

            row2.Height = new GridLength(1, GridUnitType.Star);
            row3.Height = new GridLength(1.5, GridUnitType.Star);

            grid.RowDefinitions.Add(row1);
            grid.RowDefinitions.Add(row2);
            grid.RowDefinitions.Add(row3);

            GridSplitter gridSplitter = new GridSplitter();
            gridSplitter.Width = 2;
            gridSplitter.Background = Brushes.Blue;
            gridSplitter.DragIncrement = 10;
            gridSplitter.ResizeDirection = GridResizeDirection.Columns;
            gridSplitter.ResizeBehavior = GridResizeBehavior.BasedOnAlignment;
            gridSplitter.ShowsPreview = false;
            gridSplitter.VerticalAlignment = VerticalAlignment.Stretch;
            gridSplitter.HorizontalAlignment = HorizontalAlignment.Right;
            Grid.SetRow(gridSplitter,0);
            Grid.SetRowSpan(gridSplitter, 3);            

            Button button = new Button();
            button.Content = "Btn1";
            Grid.SetRow(button, 0);
            Grid.SetColumn(button, 0);

            grid.Children.Add(gridSplitter);
            grid.Children.Add(button);
            (this as Window).Content= grid;
        }
    }
}

有些默认值的代码可以不写。

hd51cc

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
WPF基础五：UI①布局元素Grid

Grid定义由列和行组成的灵活的网格区域。Grid的特点：可以定义任意数量的行和列。行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定、并可设置最大和最小值。内部元素可以设置自己的所在的行和列，还可以设置自己跨行、跨列的数量。可以设置Children元素的对齐方向。 Grid的使用场合： UI布局的大型框架设计。大量UI元素需要成行或者列对齐的情况。 UI整体尺寸改变时，元素需要保持固有的高度和宽度...
复制链接

扫一扫