WPF 控件专题 UniformGrid 控件详解

最新推荐文章于 2024-09-04 00:13:15 发布

^@^lemon tea^@^

最新推荐文章于 2024-09-04 00:13:15 发布

阅读量5.1k

点赞数

本文链接：https://blog.csdn.net/BYH371256/article/details/125271398

版权

WPF 控件专题专栏收录该内容

55 篇文章

订阅专栏

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张图像，第十张图像是被隐藏的；