爱编程

爱编程

WPF入门10 - WPF布局之Grid面板

腾讯云主机推荐

Gird面板是WPF中功能最强大的布局容器。很多实用其他布局控件能完成的功能,用Grid面板也能实现。Grid面板也是将窗口分割成更小区域的理想工具。实际上,由于Grid面板十分常用,因此在Visual Studio中为窗口添加新的XAML文档时,会自动添加Grid标签作为顶级容器,并嵌套在Window根元素中。

Grid面板将元素分割到不可见的行列网格中。尽管可在一个单元格中放置多个元素,但在每个单元格中放置一个元素通常更合理。当然,在Grid单元格中的元素本身也可能是另一个容器,该容器组织它所包含的一组控件。

需要两个步骤来创建基于Grid面板的布局。首先,选择希望使用的行和列的数量。然后,为每个包含的元素指定恰当的行和列,从而在合适的位置放置元素。

  Grid面板通过使用对象Grid.ColumnDefinitions和Grid.RowDefinitions集合来创建网格和行。

<Window x:Class="GridLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Margin="5" Grid.Row="0" Grid.Column="0">1,1</Button>
        <Button Margin="5" Grid.Row="0" Grid.Column="1">1,2</Button>
        <Button Margin="5" Grid.Row="0" Grid.Column="2">1,3</Button>
        <Button Margin="5" Grid.Row="1" Grid.Column="0">2,1</Button>
        <Button Margin="5" Grid.Row="1" Grid.Column="1">2,2</Button>
        <Button Margin="5" Grid.Row="1" Grid.Column="2">2,3</Button>
    </Grid>
</Window>

image.png

每个元素必须被明确地放在对应的单元格中。可在单元格中放置多个元素,或让单元格保持为空。此处存在例外情况。如果不指定Grid.Row属性,面板会假定该属性的值为0.对于Grid.Column属性也是如此。因此,在Grid面板的第一个单元格中放置元素时可不指定这两个属性。

一、调整行和列

Grid面板可更改每一行和每一列的尺寸设置方式。
  • 绝对设置尺寸方式。【Width="100"】

  • 自动设置尺寸方式。【Width="Auto"】

  • 按比例设置尺寸方式。【Width="*"】【Width="2*"】

二、布局舍入

<Grid UseLayoutRounding="True">

WPF会确保布局容器中的所有内容对齐到最近的像素边界,从而消除了所有模糊问题。

三、跨越行和列

使用两个附加属性使元素跨越多个单元格,这两个附加属性是RowSpan和ColumnSpan。这两个属性使用元素将会占有的行数和列数进行设置。

<Button Margin="5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">1,1</Button>

<Button Margin="5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">1,1</Button>

四、分割窗口

  每个Windows用户都见过分割条——能将窗口的一部分与另一部分分离的可拖动分割器。例如,当使用Windowes资源管理器时,会看到一系列文件夹(在左边)和一系列文件(在右边)。可拖动它们之间的分割条来确定每部分占据窗口的比例。

  在WPF中,分隔条由GridSplitter类表示,它是Grid面板的功能之一。通过为Grid面板添加GridSplitter对象,用户就可以改变行和列的尺寸。

  • GridSplitter对象必须放在Grid单元格中。可与已经存在的内容一并放到单元格中,这时需要调整边距设置,并将预留行或列的Height或Width属性的值设置为Auto。

  • GridSplitter对象总是改变整行或整列的尺寸(而非改变单个单元格的尺寸)。为使GridSplitter对象的外观和行为保持一致,需要拉伸GridSplitter对象使其穿越整行或整列,而不是将其限制在单元格中。为此,可使用前面介绍过的RowSpan或ColumnSpan属性。

  • GridSplitter对象很小不易看见。为了使其更可用,需要哦为其设置最小尺寸。对于竖直分隔条,需要将VerticalAlignment属性设置为Stretch(使分隔条填满区域的整个高度),并将Width设置为固定值。对于水平分隔条,需要设置HorizontalAlignment属性来拉伸,并将Height属性设置为固定值。

  • GridSplitter对齐方式还决定了分隔条是水平的(用于改变行的尺寸)还是竖直的(用于改变列的尺寸)。对于水平分隔条,需要将VerticalAlignment属性设置为Center(这也是默认值),以指明拖动分隔条改变上面行和下面行的尺寸。对于竖直分隔条,需要将HorizontalAlignment属性设置为Center,以改变分隔条两侧列的尺寸。

image.png

五、共享尺寸组

Grid面板包含一个行列集合,可以明确地按比例确定行和列的尺寸,或根据其子元素确定行和列的尺寸。还有另一种确定一行或一列尺寸的方法——与其他行和列的尺寸相匹配。这是通过称为“共享尺寸组”的特性实现的。

共享尺寸组的目标是保持用户界面独立部分的一致性。

<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>

六、UniformGrid面板

UniformGrid面板不需要(甚至不支持)预先定义的列和行。相反,通过简单地设置Rows和Columns属性来设置其尺寸。每个单元格始终具有相同的大小,因为可用的空间被均分。最后,元素根据定义的顺序被放置到适当的单元格中。UniformGrid面板中没有Row和Column附加属性,也没有空白单元格。

<Window x:Class="GridLayout.UniformGridWindows"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UniformGridWindows" Height="300" Width="300">
    <UniformGrid Rows="2" Columns="2">
        <Button>Top Left</Button>
        <Button>Top Right</Button>
        <Button>Bottom Left</Button>
        <Button>Bottom Right</Button>
    </UniformGrid>
</Window>

可以快速的构建视频分隔。

本文标题:WPF入门10 - WPF布局之Grid面板
本文链接:https://www.masoft.cn/post/108.html
作者授权:除特别说明外,本文由 智汇软件 原创编译并授权 爱编程 刊载发布。
版权声明:本文使用「署名-禁止演绎 4.0 国际」创作共享协议,转载或使用请遵守署名协议。
阿里云主机推荐

2020-02-11 0 /
学习
/
标签:  WPF

评论回复

分享:

支付宝

微信