xaml初学（动态生成元素【实例（生成连连看布局）】）

最新推荐文章于 2024-09-29 14:41:05 发布

夏夏xxx

最新推荐文章于 2024-09-29 14:41:05 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u011423446/article/details/33729655

本文介绍了XAML初学者如何动态生成UI元素，特别是针对连连看布局。在Button点击事件`btn_Click`中，展示了如何在Grid下动态添加控件。通过设置Grid的行列值来定位控件，并在`OnNavigatedTo`事件中初始化页面。此外，还提到了利用DateTime.Now.ToString()获取当前时间的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、动态生成元素

例如在Button点击按钮时动态增加

Grid下两个控件如下

btn_Click 触发事件：

private void btn_Click(object sender, RoutedEventArgs e)
{
<span style="white-space:pre">	</span>TextBlock tb = new TextBlock();
<span style="white-space:pre">	</span>tb.Text = DateTime.Now.ToString();
<span style="white-space:pre">	</span>sp.Children.Add(tb); //动态在StackPanel 中加<span style="font-family: Arial, Helvetica, sans-serif;">TextBlock </span>

}

【实例】生成连连看布局

前台部分代码：

后台初始化页面代码：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
	//(动态生成10*8的表格)
	for(int i = 0, i < 10; i++)
	{
		RowDefinition rowDef = new RowDefinition ();
		grid1.RowDefinition .Add(rowDef);
	}
	for(int j = 0, j < 10; i++)
	{
		ColumnDefinition colDef = new ColumnDefinition ();
		grid1.ColumnDefinition .Add(colDef);
	}
	//动态产生图片
	Random rand = new Random();
	for(int row = 0; row <10; row ++)
	{
		for(int col = 0; col < 8; col ++)
		{	
			Image img = new Image();
			int num = rand.Next(1, 10); //生成一个1~9之间的随机数
			//stirng filename = "Images/" + num + ".jpg";   //图片的位置(调试发现这样的地址无法被识别)
			stirng filename = "ms-appx:///Images/" + num + ".jpg";   //图片的位置
			//通过代码来为Image赋值，如果图片位于项目中，则需要在地址前加上 ms-appx:///
			//为图片的source赋值
			img.Source = new BitmapImage(new Uri(filename)); //因为Image.Source的类型不是string，需要对filename进行转化改变
			grid1.Children.Add(img);
			Grid.SetRow(img, row);
			Grid.SetColumn(img,colum);
		}
	}
}

【△】

1、获取当前时间：DateTime.Now.ToString();

2、在后台设置某控件的Grid行列值：Grid.SetColumn(控件名,列位置);

在后台获取某控件的Grid行列值：Grid.GetColumn(控件名); 【Canvas类似】

3、初始化代码写在函数 protected override void OnNavigatedTo(NavigationEventArgs e)中

4、在前台写上的控件（以及其附加属性），就相当于在后台创建了相应类。