WPF编程基础入门 ——— 第三章 布局（六）布局面板UniformGrid

WPF——UniformGrid布局控件

UniformGrid(简化网格布局) 隐含在 System.Windows.Controls.Primitives 名称空间中。每个单元格具有相同的大小。在使用UniformGrid布局时,需要设定行值与列值。

---

UniformGrid实例——按钮排列1

此例设计要求：现在使用简化网格布局来布局6个Button。
依旧是在解决方案WpfApp3新建项目：命名项目名字UniformGridButton6。
实现代码：

<Window x:Class="UniformGridButton6.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UniformGridButton6"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Border BorderBrush="Black" BorderThickness="1"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <UniformGrid Height="180" Width="180" Rows="3" Columns="2"  Background="GreenYellow" >
            <Button Content="One " Margin="1" />
            <Button Content="Two " Margin="1"/>
            <Button Content="Three " Margin="1"/>
            <Button Content="Four " Margin="1"/>
            <Button Content="Five " Margin="1"/>
            <Button Content="Six " Margin="1"/>
        </UniformGrid>
    </Border>
</Window>

效果图：

如上图所示，UniformGrid布局是绿黄色背景，6个Button，按照3行2列生成大小相同的单元格。
在使用UniformGrid布局时，如果只设定列值,那么行值等于子元素的数目除以列值；如果只设定行值,那么列值等于子元素的数目除以行值。
接下来，使用UniformGrid布局6个Button为2行3列,XAML代码如下:

<!-- 保留Window代码 -->
    <Border BorderBrush="Black" BorderThickness="1"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <UniformGrid Height="180" Width="180" Columns="3"  Background="GreenYellow" >
            <Button Content="One " Margin="1" />
            <Button Content="Two " Margin="1"/>
            <Button Content="Three " Margin="1"/>
            <Button Content="Four " Margin="1"/>
            <Button Content="Five " Margin="1"/>
            <Button Content="Six " Margin="1"/>
        </UniformGrid>
    </Border>
</Window>

效果图：

以上效果中，代码中只设置了Columns="3"，UinformGrid布局6个Button，系统行值等于6 / 2，自动生成2行3列的UinformGrid的网格布局。

---

UniformGrid实例——按钮排列2

使用UinformGrid布局的网格宽度是所有子元素中的最大宽度值；高度是所有子元素中的最大高度值。
设计要求：现在使用简化网格布局来布局7个Button，3×3的网格。
依旧是在解决方案WpfApp3新建项目：命名项目名字UniformGridButton7。
XAML代码如下：

<Window x:Class="UniformGridButton7.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UniformGridButton7"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200">
    <Border BorderBrush="Black" BorderThickness="1"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <UniformGrid  Columns="3" Rows="3" Background="YellowGreen" >
            <Button Content="One " Margin="1"/>
            <Button Content="Two " Margin="1"/>
            <Button Content="Three " Margin="1"/>
            <Button Content="Four " Margin="1"/>
            <Button Content="Five " Margin="1"/>
            <Button Content="Six " Margin="1"/>
            <Button Content="Seven " Margin="1"/>
        </UniformGrid>
    </Border>
</Window>

效果图：

当代码中给出的单元格大于子元素的数目，依次摆放后，余下的单元格为空。
然后修改之前的代码

<!-- 保留之前的代码 -->
        <UniformGrid Columns="3" Rows="2" Background="YellowGreen" >
            <!-- 保留以下的代码 -->

效果图：

可见，当系统提供的单元格数目小于子元素的数目，UniformGrid将其放在了边界之外。

---

上一篇：WPF编程基础入门 ——— 第三章 布局（五）布局面板WrapPanel.
下一篇：WPF编程基础入门 ——— 第三章 布局（七）布局面板Grid.
WPF编程基础入门 ——— 目录导航.