‫欢迎回来｡
‫现在, 终于到了使用网格的时候了｡
‫你已经看到了如何使用堆叠面板和机架面板和那些天之前很好地堆叠和包装的东西了｡
‫现在我们来看看网格, 它可以让我们把东西放在网格中, 我们将从简单的2乘2网格开始｡
‫首先, 我们需要一个列和行定义, 这样我们就可以在网格中继续操作｡
‫因此, 转到示例文件, 然后在网格中创建网格点列定义｡
‫您可以在此处定义不同的列｡
‫因此, 首先, 您需要列定义（复数）,
‫然后您可以继续创建各个列定义｡
‫例如, 您可以在此处创建一个｡
‫我会把它简单地写在一行中, 就像这样｡
‫我在这里要定义的是宽度和宽度｡
‫我可以, 比如说, 把它设置为100, 现在我们创建另一个列, 宽度也是100｡
‫这还不够
‫我们还需要有行, 但我们只想有一行｡
‫让我们从一行开始,
‫我先创建一个按钮, 这个按钮会说, 你好, 它应该在网格点的第0列｡
‫现在我创建了第二个按钮, 它应该是网格, 即第一列｡
‫现在, 如果我们看一下我们的设计, 我们可以看到我们有两个按钮｡
‫你好啊｡
‫让我们运行代码来看看它是什么样子的｡
‫顺便说一下, 它们只有100像素宽, 正如您在这里看到的, 因此宽度限制为100像素｡
‫所以如果你在这里加上一个总值, 那么它将简单地用它作为宽度中的像素｡
‫正如你在这里看到的, 这就是一列的宽度｡
‫当然, 我们可以说, 我们可以很容易地在这里放置更多的列｡
‫好吧, 我们可以这样做, 我们将在以后这样做｡
‫但在此之前, 我想给你们看一些非常重要的东西｡
‫如果我现在将XAML拖到这里, 它实际上很有用, 因为我们将直接看到UI中的差异｡
‫我想把宽度从100改为自动｡
‫如您所见, 汽车功能
‫它只会自动采用适合元素内所有内容所需的宽度｡
‫所以在我们的例子中, 按钮有一个文本, 叫做Hi there, 这就是hi there需要或要求的空间｡
‫这也是按钮的宽度｡
‫正如您所看到的, 这是第一个列定义｡
‫第一列定义中的按钮是这样的, 或者是被更改的按钮｡
‫如您所见, 现在它已更改为59｡ 5个像素｡
‫如果我再加一些文字, 再加一些文字, 你可以看到它扩大到了153｡ 5个像素｡
‫因此, 您可以很容易地继续下去, 以及使用自动, 如果你想一切都适合正确的基础上有多少空间, 它实际需要｡
‫但是如果我想让列的宽度完全相同呢？
‫当然, 我可以用全值或者固定值, 但我也可以用星星｡
‫如果所有的都有星星, 它会简单地说, 好的, 占据所有的空间｡
‫在本例中, 只有该列具有可用空间, 并且与其他列完全相同｡
‫所以现在有一个权重｡
‫所以这个的权重是1, 那个的权重也是1.
‫所以它们的权重相等, 也就是说它们的宽度相等｡
‫如果我们想改变它, 比如说我想把第二个按钮做成第一个按钮的两倍宽,
‫我可以用星星｡
‫所以现在这个会是第一个的两倍宽｡
‫例如, 如果我想在左手取五分之三的宽度, 在右手边取五分之二的宽度｡
‫我可以简单地使用这种方法, 正如您在这里看到的｡
‫所以三倍的星星和两倍的星｡
‫它实际上是把所有的数据加起来, 然后只需要这里设置的几秒钟｡
‫假设我们有3和2｡
‫所以它会说, 好了, 现在一共是五个｡
‫我会选择其中的3/5｡
‫现在, 你甚至可以做100个这样的动作｡
‫所以你可以看到这个需要100｡
‫而这一次只拍两次｡
‫这就是你如何调整宽度的方法｡
‫高度也是一样｡
‫因此, 现在让我们继续创建行定义｡
‫因此网格点行定义｡
‫在这里, 我们可以继续创建行定义｡
‫第一个, 我也会保持简单, 就像一行｡
‫这个需要一个高度｡
‫所以我只想说, 好吧, 我想得到星星的高度｡
‫现在, 我们对第二行再次使用相同的方法｡
‫如你所见, 我们有两排｡
‫一个在这里, 另一个在底部｡
‫如您所见, 第二行还没有任何内容｡
‫现在让我们改变一下, 首先, 把这个按钮放在底部｡
‫好吧, 我知道了
‫我们怎么才能做到呢？
‫我们简单地用网格点来表示它在第一行｡
‫现在, 你可能想知道, 为什么是一个？
‫为什么不是两个？
‫你可能在编程中已经知道了, 我们从零开始计数｡
‫所以第一行是0, 第二行是1｡
‫现在上面是第二排, 也就是第一排｡
‫现在, 让我们继续创建另外两个按钮,
‫甚至可以将它们的名称更改为一些可以说明其实际信息的名称｡
‫所以我把它放到第一行的第0列,
‫然后把它放回第01列, 然后这个1会在第11列, 这样就是第一列和第0行了.
‫现在我们有了所有的按钮, 这个按钮就是一个｡
‫这一个将是按钮2, 按钮3和按钮4｡
‫好极了｡
‫如果我们开始, 你会看到｡
‫嗯, 它对UI本身也很重要｡
‫一, 二, 三, 四.
‫好吧, 我会的
‫现在, 您将面临一个小挑战, 因为您已经了解了如何使用网格列和行｡
‫请在这里做一个三乘三的网格, 上面有八个按钮｡
‫所以1到8应该是按键和第九个位置｡
‫所以右下角的位置或网格元素应该是一个文本块｡
‫所以请暂停视频, 试着这样做｡
‫好吧, 我会的
‫我希望你试过了｡
‫我将通过在此处添加列定义来添加另一列, 列得宽度与高度相同.
‫它将是等高的｡
‫现在, 如你所见, 这些按钮, 它们看起来有点奇怪｡
‫但那只是因为我没有｡
‫一个缩小了的然｡
‫所以现在我们可以正确地看到它了｡
‫现在我们有了0和1的按钮, 以此类推｡
‫我将在这里复制该按钮, 并将其放置在第二列｡
‫所以第0行第2列.
‫当然, 你可以说, 从行开始, 然后进入列, 这样更有意义｡
‫好吧, 你可以这么做, 但在我的情况下, 它是相反的｡
‫最后, 重要的是正确地使用它们｡
‫现在我们在顶部有三个按钮｡
‫现在, 让我们继续创建第二行或完成第二行｡
‫这是第二列｡
‫我会复制三次, 实际上, 两次就够了｡
‫一个是从第0行到第2行, 位置1或列1｡
‫当然, 现在我们需要改变这些值｡
‫所以一二三四五六七八｡
‫就像我说的, 在左下角, 我想有一个文本块｡
‫因此, 文本块与网格具有相同的方法｡
‫需要有一列和一行｡
‫所以我只想说这是第二列, 也是第二行｡
‫现在我们在底部､ 左侧或右下角, 现在我们可以继续并给予它一些文本｡
‫我会说一些类似文字的东西｡
‫现在你可能会说, 哦, 我不喜欢它｡
‫文本位于左上方｡
‫您可以通过输入类似水平对齐的内容并在此处使用中心来轻松更改此设置｡
‫所以现在它是水平居中｡
‫让我们放大, 这样你就可以看到｡
‫好吧, 我会的
‫现在如果我想把它垂直居中, 我只需要使用垂直对齐, 这里也使用居中｡
‫现在, 如您所见, 按钮完全居中,
‫我们甚至可以继续更改字体大小, 因为我们可以, 让它变大一点, 如32｡
‫现在你可以看到我们有一个三乘三的网格, 有八个按钮和一个文本｡
‫现在, 您可以在主窗口和网格中对齐窗口中的所有不同类型的元素｡
‫这就是使用网格的好处｡
‫正如你所看到的, 你可以把东西堆起来｡
‫你可以创建一个有多个网格的堆叠面板, 另外你可以在中间有一个文本或类似的东西｡
‫所以你在这里不限于使用一个元素｡
‫如您所见, 我们可以将其放入堆栈面板中｡
‫像这样堆叠面板｡
‫所以我要拖动网格｡
‫正如你现在所看到的, 它在抱怨, 因为窗口的例子, 主窗口只知道第一个｡
‫因此, 如果我们现在检查外观, 它只会看到STACK面板｡
‫实际上, 让我们停止它, 这样我们就可以看到它现在说无效的标记｡
‫所以如果我们把整个网格放到堆栈面板中, 你可以看到, 它就在那里, 它会把它文本化｡
‫所以在底部有足够的空间｡
‫我们可以在这里添加另一个按钮, 这样您就可以看到这是可能的,
‫并且这个按钮的高度将为100｡
‫现在, 正如你所看到的, 它都堆积在顶部｡
‫即使我们有这样的高度, 它们都是一样的高度, 这个文本需要太多的空间, 它忽略了｡
‫所以字体太大了｡
‫所以如果我们回到16, 它仍然太大｡
‫如果我们去, 让我们说12现在似乎更像它｡
‫因此, 无论何时使用带有此星星的行定义, 都必须小心｡
‫如果一个元素需要的空间比实际空间多, 那么它就会溢出｡
‫好吧, 我会的
‫这是两个网格｡
‫我将回到我们在那里的漂亮的标准网格｡
‫一般来说, 我总是建议你在你看过这样的东西之后, 在你学会了这样的东西之后,
‫请继续玩下去｡
‫只是尝试一些不同类型的元素｡
‫您已经看到了一些控件, 稍后我们将探讨更多控件｡
‫到目前为止, 我们使用的主要是按钮､ 右侧和文本块,
‫但在未来的视频中, 我们将使用不同的漂亮控件｡
‫那到时见｡