初级代码游戏的专栏介绍与文章目录-CSDN博客

我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。

这些代码大部分以Linux为目标但部分代码是纯C++的，可以在任何平台上使用。

源码指引：github源码指引_初级代码游戏的博客-CSDN博客

---

        MAUI说实话拉跨得很，本来是个面向手机的东西，硬要支持桌面，结果就会干两件事：这也不会、那也不会。

        稍微带点生产力属性的软件就免不了使用多列表格，一般叫做ListCtrl、ListView、GridView之类的名字。

        在MAUI上，ListView是个单列的列表，TableView也是个单列的列表（但是可以分组到节），GridView——不存在的。

        这就比较搞笑了。

        MAUI虽然没有GridView，但是有Grid。再但是，Grid被归类为布局而不是视图——名字后即没有View也没有Layout。

        下面给出一个用Grid动态显示表格的例子。

一、创建原始MAUI项目

        没什么特别需要说明的，创建项目之后等一会才能编译成功，因为后台在下载依赖项。 

        生成的项目结构不复杂：

        入口点MauiProgram.cs，内容很简单，创建了App，App在App.xaml和App.xaml.cs，App创建了AppShell，AppShell创建了MainPage。

        运行目标默认就是Windows：

        编译运行：

        行吧。

二、创建基本Grid

        修改MainPage.xaml，添加下面的代码：

			<Border
				BackgroundColor="Black"  WidthRequest="600">
				<Grid
					x:Name="DataGrid">
					<Grid.ColumnDefinitions>
						<ColumnDefinition
							Width="300" />
						<ColumnDefinition
							Width="300" />
					</Grid.ColumnDefinitions>
					<Border
						Grid.Column="0"
						Background="Gray">
						<Label
							Text="列1" />
					</Border>
					<Border
						Grid.Column="1"
						Background="Gray">
						<Label
							Text="列2" />
					</Border>
				</Grid>
			</Border>

        添加在Button下面即可，Button上面的不想要就删掉，Button不能删，后面还要用。

        为什Grid外面放了一个Border呢？因为调整格式挺麻烦，套个Border容易限制宽度。表格线必须通过背景色和格子颜色不同来实现。Grid格子中间的线通过设置行和列之间的空白来实现：

				<Grid
					x:Name="DataGrid"
					ColumnSpacing="1"
					RowSpacing="1">

        这两个值的默认值是0，前面图示的效果是不设置（也就是默认值0）的效果，设置为1时就需要配合Border的Padding来控制外边框粗细。

        当然也可以直接用Grid来控制，不需要Border：

				<Grid
					x:Name="DataGrid" BackgroundColor="Red" Padding="1" MaximumWidthRequest="615"
					ColumnSpacing="1"
					RowSpacing="1">

        我们只定义了两个列（Grid.ColumnDefinitions），没有定义行（Grid.RowDefinitions），因此行要根据内容来推算。

        我们定义了两个格子当作表头：

					<Border
						Grid.Column="0"
						Background="Gray">
						<Label
							Text="列1" />
					</Border>
					<Border
						Grid.Column="1"
						Background="Gray">
						<Label
							Text="列2" />
					</Border>

        Grid.Column用来指示每个内嵌对象所属的列，Grid.Row用来指示行，默认值是0，所以这两个只指示了列。

        我们现在已经有了带有列头的空表格，然后可以用代码在运行时插入数据。

三、动态插入数据

        前面给Grid定义了x:Name="DataGrid"，这是专门用于连接xmal和cs的属性，这个Name就是CS里的对象名。

        直接在按钮代码里添加：

	public partial class MainPage : ContentPage
	{
		int count = 0;
		int row = 0;//要添加的列号

		public MainPage()
		{
			InitializeComponent();
		}
        //创建一个格子
		Border CreateCell(string data)
		{
			return new Border { BackgroundColor = Color.FromArgb("#C49B33"),Content=new Label { Text=data} };
		}
		private void OnCounterClicked(object sender, EventArgs e)
		{
			++row;//列号
			DataGrid.AddWithSpan(CreateCell(count.ToString()), row, 0);//第一个列
			DataGrid.AddWithSpan(CreateCell("abc"), row, 1);//第二个列

			count++;

			if (count == 1)
				CounterBtn.Text = $"Clicked {count} time";
			else
				CounterBtn.Text = $"Clicked {count} times";

		}
	}

        这里用到两个技术点：动态创建对象和添加到Grid。

        AddWithSpan将对象添加到Grid指定的位置。

        不断点击按钮就是最前面显示的效果。

---

（这里是文档结束）