WPF 控件专题 UniformGrid 控件详解

1、UniformGrid 介绍
    官方释义：提供一种在网格(网格中的所有单元格都具有相同的大小)中排列内容的方法。

**************************************************************************************************************

2、UniformGrid 常用的属性

    Margin：获取或设置元素的外边距。

    Name：元素的标识名称；

    Opacity：透明度

    Width/Height：宽度和高度；

    Visibility：该元素可见性；

    Rows：获取或设置网格中的行数；

    Columns：获取或设置网格中的列数；

    FirstColumn    获取或设置网格第一行中前导空白单元格的数量，必须小于属性的值 Columns；

    方法：

    ArrangeOverride(Size)：通过在所有子元素之间平均分配空间来定义 UniformGrid 的布局，或者说是获取或设置网格中的列数。

    MeasureOverride(Size)：通过测量所有子元素计算 UniformGrid 的期望大小。

**************************************************************************************************************

3、具体示例

<UniformGrid Columns="3" Rows="3" FirstColumn="0">
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
    <!--第十张图像超出行列范围，故不显示，若图像少于行列的总数，则留空白区域-->
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
</UniformGrid>
 
<!--不设置行列，自动缩放填充-->
<UniformGrid FirstColumn="0">
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
	<Image Margin="2" Source="./huahua.png" Stretch="Fill"/>
</UniformGrid>

通过后台代码创建也可以实现，接下来看看示例：

public MainWindow()
{
	InitializeComponent();
	//引用命名空间：using System.Windows.Controls.Primitives;
	UniformGrid uniformGrid = new UniformGrid();
	uniformGrid.Columns = 4;
	uniformGrid.Rows = 4;
	uniformGrid.FirstColumn = 0;
 
	for (int i = 1; i < 15; i++)
	{
		Image image = new Image();
		image.Source = new BitmapImage(new Uri(@"huahua.png", UriKind.Relative));
		image.Stretch = Stretch.Fill;
		image.Margin = new Thickness(2);
		image.Name = "image" + i;
		uniformGrid.Children.Add(image);
	}
	((this as Window).Content as Grid).Children.Add(uniformGrid);
}

**************************************************************************************************************

4、效果图

设置行列属性为3行3列，运行后只显示9张图像，第十张图像是被隐藏的；

不设置行列属性，则自动填充效果图；

通过后台代码创建效果图；

**************************************************************************************************************

5、总结和扩展

    UniformGrid 相当于简化版本的Grid，也属于布局控件的一种；

    对于 Grid 的属性 Grid.Row 、Grid.Column 和 Grid.RowSpan 、Grid.ColumnSpan 用在 UniformGrid 上会没有任何的效果（可以写上去，因为是附加属性）；

**************************************************************************************************************