第三章：认识WPF控件之Grid -【零基础游戏开发入门】WPF版贪吃蛇-TCPGAME

###本章核心
- 认识Grid控件
- Grid控件在贪吃蛇中起到的作用

###Grid概念
我们去官方文档瞅瞅，Grid描述如下：
![官方Grid描述](//tcpgame.com\mdimg\cb5f8377-d3dc-4267-9a52-79bb8ed113f3_Grid定义.png "官方Grid描述")

官方描述为：**定义由列和行组成的灵活的网格区域。**我们先不管列和行，只要知道他是一个区域就可以了，在xaml文件中，Grid可以使用两个闭合的标签来表示分别是**<Grid>**和**</Grid>**,注意后面一个带有**斜杠/**。在上一章节中，我们看到在新建立的WPF项目的默认窗口中，给我们的布局就是Grid,如下图，其中两个Grid的标签中包含了一个Label内容，即该区域是可以包含内容的。
![上章示例](//tcpgame.com\mdimg\c98eb377-2475-4a56-9c05-ff1ebfb535f4_上章节示例.png "上章示例")

###认识几个关键属性
接着**[第二章的内容](/p/9 "第二章的内容")**，先把Lable标签删掉，具体操作方法为：在设计界面上点击文字，然后按一下键盘上的**Delete**按键。
按上一章中添加Label的方法（在工具箱中，选Grid），添加一个Grid到界面中，添加完成后，界面显示如下：
![添加Grid后](//tcpgame.com\mdimg\2cb274a2-cf51-4f0b-9bbf-33d35055b57f_添加Grid后.png "添加Grid后")

注意其中的代码：
```csharp
 <Grid HorizontalAlignment="Left" Height="100" Margin="195,120,0,0" VerticalAlignment="Top" Width="100"/>
```
我们**加入一个颜色**的属性，修改后代码为：
```csharp
 <Grid HorizontalAlignment="Left" Height="100" Margin="195,120,0,0" VerticalAlignment="Top" Width="100" Background="Red"/>
```
此时Grid带着6个属性，下面进行简单说明

| **属性**  | **描述**  |
| ------------ | ------------ |
|**HorizontalAlignment**|当前Gird在父容器中的水平停靠属性，当前只记住他的三个值，**靠左：Left，靠右：Right，居中：Center**|
|**VerticalAlignment**|当前Gird在父容器中的垂直停靠属性，当前只记住他的三个值，**靠上：Top，靠下：Bottom，居中：Center**|
|**Height**|当前Gird的高度|
|**Width**|当前Gird的宽度|
|**Margin**|值为用逗号分开的4个数字，表示当前Gird距离父容器**左上右下**边框的距离，注意：当设置了**HorizontalAlignment="Left"**，则第3个数字无论什么值都不影响当前Grid在父容器中的位置，同理当设置了**HorizontalAlignment="Right"**，则第1个数字无论什么值都不影响当前Grid在父容器中的位置；**VerticalAlignment**的设置也相同，决定第2和第4个数字对当前Grid在容器中位置的影响|
|**Background**|当前Gird的背景颜色，值可以等于颜色英文单词，当前值为Red，所以显示红色，也可以输入#FFFFFF格式的颜色设置，|

尝试自己修改每个属性的值，在设计界面或点击运行，感受一下修改后界面的变化，加深理解。

###Grid控件在贪吃蛇中起到的作用
目前可以理解为Grid就是一个**可以设定颜色的方块**，贪吃蛇的蛇体与食物都可以认为是一个个Grid组成，根据不同的颜色以及位置来组合成舌头舍身，贪吃蛇的食物也可以使用Grid来表示，比如，以下是使用了7个Grid表示的贪吃蛇画面：

```csharp
<Grid HorizontalAlignment="Left" Height="19" Margin="195,120,0,0" VerticalAlignment="Top" Width="19" Background="YellowGreen"/>
<Grid HorizontalAlignment="Left" Height="19" Margin="195,140,0,0" VerticalAlignment="Top" Width="19" Background="YellowGreen"/>
<Grid HorizontalAlignment="Left" Height="19" Margin="195,160,0,0" VerticalAlignment="Top" Width="19" Background="YellowGreen"/>
<Grid HorizontalAlignment="Left" Height="19" Margin="215,160,0,0" VerticalAlignment="Top" Width="19" Background="YellowGreen"/>
<Grid HorizontalAlignment="Left" Height="19" Margin="235,160,0,0" VerticalAlignment="Top" Width="19" Background="YellowGreen"/>     
<Grid HorizontalAlignment="Left" Height="19" Margin="255,160,0,0" VerticalAlignment="Top" Width="19" Background="Blue"/>
<Grid HorizontalAlignment="Left" Height="19" Margin="355,160,0,0" VerticalAlignment="Top" Width="19" Background="Red"/>
```
效果：
![效果](//tcpgame.com\mdimg\dba9d15f-0516-438a-bab0-51c02c192cb7_8个Grid表示贪吃蛇的游戏画面.png "效果")

本章完结，下章开始，我们让这条蛇动起来！