释放 Expression Blend 中的 Grid 及其在响应式设计中的重要作用
4.20/5 (4投票s)
释放 Expression Blend 中的 Grid 及其在响应式设计中的重要作用
在 Expression Blend 中使用“Grid”
初级设计师或开发者经常使用 Grid 作为容器来放置控件，但他们却不知道 Grid 在设计应用程序中扮演着多么重要的角色，以及 Grid 为设计师和开发者提供了多少便利。今天，我们将一起探讨 Grid 的重要性，以及它们如何帮助我们轻松设计出令人惊叹的界面。
Expression Blend 中的 Grid
Expression Blend 的设计初衷是为了方便设计师。Grid 容器是一个至关重要的控件，而 Expression Blend 使它的使用变得非常便捷。
可变和固定边距：
让我们在 Expression Blend 中创建一个 WPF 项目，并在一个 Grid 中放置另一个 Grid，以便新 Grid 居中。
如你所见，一个新的 Grid 已添加到旧 Grid 中。这里有几点需要注意，你可能会看到我用黄色标记的线是虚线，而用红色笔圈出的边距线是实线。
这里你会看到黄色的边距被称为“可变边距”
这意味着如果你调整窗口大小，这些边距可能会改变；而在左侧的红色边距被称为“固定边距”，当窗口调整大小时，这些边距的量保持不变。如上图所示，左侧和顶部的边距保持不变，因为它们不是可变边距。
可以通过点击被红色笔圈出的链接，将“固定边距”更改为“可变边距”。
注意：你会注意到，如果你将左侧的边距更改为“可变边距”，另一侧的边距将变成固定边距，因为应用程序需要从任一侧获取参考边距。顶部和底部边距也是如此。
如果我在 Grid 中放置一个矩形，并设置右侧和顶部的边距为“固定”，那么在调整窗口大小时，右侧和顶部的边距量将保持不变，只有“可变边距”会改变。这在设计应用程序时可能非常有用。
这里有一些快照，可以轻松查看：
行跨度和列跨度的作用
当谈论行跨度和列跨度时，你可能会问：什么是行跨度和列跨度？为了方便理解，你可以将它们定义为 Grid（父框）的子列和子行。
它的用途是什么？实际上，手动放置控件然后移动它们会非常麻烦，为什么不直接告诉控件它所在的行和列呢？这样，当你需要将控件移动到其他行时，就不需要反复拖放并处理边距了。你只需更改行或列，就完成了。
让我们通过一个例子来看看它是如何工作的：
这里你会注意到一些标记，是的，红色的标记是我创建的用于分割 Grid 的跨度。如果我将 Grid 分成四部分，它就会像图中的象限一样工作，你会看到第一个象限是 (0,0)，第二个象限是(1,0)。这正是你需要为控件提供的。
这里有一个矩形控件，它被放置在第一个象限，即 0,0。
在上图中，在属性中我只将行更改为 1，而列号保持不变，但你看到那个矩形控件现在向下移动了，因为它位于 1,0 象限。
创建的分隔线还可以控制 Grid 调整大小时的区域百分比。当你调整 Grid 的大小时，你会注意到区域会根据分配的百分比进行扩展或收缩。
\这是个例子：
就是这样，它的工作原理是这样的：
结论
今天我们讨论了 Grid 的重要作用，以及设计师或开发者如何有效地使用 Grid 来创建令人惊叹的响应式设计，这些设计可以轻松地适应各种屏幕。希望你喜欢这篇博文。
敬请期待，编码愉快！