Win10系列:UWP界面布局进阶9

时间:2022-10-06 13:04:01

Grid

Grid元素用来定义一个由行和列构成的网格,这是一个功能强大的布局容器,当新建一个页面时会默认选用Grid作为*布局元素,下面将通过三个示例来介绍Grid的使用方法。

(1)定义Grid的行与列并向Grid中添加元素

可以通过向Grid元素的Grid.RowDefinitions属性元素中添加RowDefinition元素来定义行或向Grid元素的Grid.ColumnDefinitions属性元素中添加ColumnDefinition元素来定义列。下面以一个示例来展示如何定义Grid元素的行与列。

在一个打开的Windows应用商店项目中新建一个空白页,并命名为GridPage,打开GridPage.xaml文件,在默认的Grid元素中添加如下代码:

<Grid Background="Black" Height="300" Width="600">

<Grid.RowDefinitions>

<RowDefinition Height="150"/>

<RowDefinition Height="150"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="300"/>

<ColumnDefinition Width="300"/>

</Grid.ColumnDefinitions>

行第0列" FontSize="28"/>

行第1列" FontSize="28"/>

行第0列" FontSize="28"/>

行第1列" FontSize="28"/>

</Grid>    

上面的代码首先在Grid元素的<Grid>标签中设置网格的高度为300px、宽度为600px、背景色为黑色,接下来在Grid元素中分别添加Grid.RowDefinitions属性元素和Grid.ColumnDefinitions属性元素。并在Grid.RowDefinitions属性元素中添加两个RowDefinition元素来定义Grid网格中的两行,并设置行高为150px;在Grid.ColumnDefinitions属性元素中添加两个ColumnDefinition元素定义Grid网格中的两列,并设置列宽为300px。

接着向每一个单元格中添加元素。与HTML中的Table元素不同,Grid中的子元素并不是直接在单元格中定义的,而是直接定义在Grid元素当中,并在子元素的标签中声明该元素所在的单元格位置。在Grid元素中继续添加4个按钮,为每一个Button元素设置Grid.Row属性和Grid.Column属性来确定按钮所在的单元格,并定义按钮显示的文本为所在单元格的位置。需要注意的是,在Grid网格中位于第一行元素的Grid.Row属性值应设置为0,同样,位于第一列元素的Grid.Column属性值也要设置为0。

在添加子元素时,通过设置元素的HorizontalAlignment属性或VerticalAlignment属性还可以定义子元素在父元素内的水平或竖直对齐方式,在水平方向上的可选对齐方式有Left(左对齐)、Right(右对齐)、Center(居中对齐)以及Stretch(拉伸对齐),在竖直方向上的可选对齐方式有Top(顶部对齐)、Buttom(底部对齐)、Center(居中对齐)以及Stretch(拉伸对齐)。本示例将每个Button元素的HorizontalAlignment属性设置为"Center",使按钮处于单元格的水平居中位置。

在设计器中的显示效果如图5-21所示。

Win10系列:UWP界面布局进阶9

图5-21 定义Grid的行与列

(2)合并单元格

有时Grid中的元素需要跨单元格显示,这时可以通过设置元素的Grid.ColumnSpan或Grid.RowSpan属性来定义元素跨越的列数或行数,以实现合并单元格的效果。在上面代码的基础上,对第一个Button元素添加Grid.ColumnSpan属性,将属性值设置为2,表示此元素跨越了两列,即实现了两个单元格的合并。调整原来位于第0行第0列的按钮大小,同时去掉位于第0行第1列的按钮,合并单元格后的代码如下所示:

<Grid Background="Black" Height="300" Width="600">

<Grid.RowDefinitions>

<RowDefinition Height="150"/>

<RowDefinition Height="150"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="300"/>

<ColumnDefinition Width="300"/>

</Grid.ColumnDefinitions>

行第0列跨越两列" FontSize="28"/>

行第0列" FontSize="28"/>

行第1列" FontSize="28"/>

</Grid>

在设计器中可以看到第0行的两个单元格已经合并为一个,显示效果如图5-22所示。

Win10系列:UWP界面布局进阶9

图5-22合并单元格

(3)动态适应单元格尺寸

在上面的代码中,通过设置行和列的Height和Width属性来定义行高和列宽,除了为单元格的宽高属性赋予固定值外,也可以为宽度和高度属性设置"Auto"或"*" 属性值,这样单元格就可以自动的对行高和列宽进行调整。当设置ColumnDefinition元素的Width属性或RowDefinition元素的Height属性值为"*"时,单元格会自动填充其他单元格显示后剩余的空间;如果设置其属性值为"Auto",单元格会根据其中包含的子元素尺寸的变化自动调整单元格的大小。值得注意的是,"*"属性值可以根据比例大小在Grid网格中分配行或列的可用空间,若定义一列是另一列的3倍宽度,可以分别设置这两个ColumnDefinition元素中的Width属性为"*"和"3*"。

继续调整上面示例的代码,在表示第0列的ColumnDefinition元素中设置Width属性值为200,在表示第1列的ColumnDefinition元素中设置Width属性值为"*",在设计器中显示效果如图5-23所示。

Win10系列:UWP界面布局进阶9

图5-23 自动填充剩余空间

可以看到整个网格的宽度为600px,其中第0列占据了200px,由于设置了Width属性值为"*",第1列会自动填充剩余的400px。

如果将第0列的Width属性值设为"Auto",第1列的Width属性值设为"*",在设计器中显示效果如图5-24所示。

Win10系列:UWP界面布局进阶9

图5-24 根据元素尺寸调整单元格大小

在第1行中按钮的宽度为180px,由于将第0列的Width属性值设置成了"Auto",单元格会自动调整宽度与其中的按钮宽度一致。

以上为读者介绍了三种常用的布局元素,其中有一些属性的使用方法是对所有布局元素通用的,如Margin属性,HorizontalAlignment属性以及VerticalAlignment属性等。在页面元素结构比较复杂时,合理选用布局元素不仅可以提高界面的美观性,还有利于对界面的布局进行维护和扩展。