Windows 8 Metro 页面网格

使用 HTML5 和 JavaScript 构建 Windows 8 应用 作者：Dan Shultz、Joel Cochran 和 James Bender Windows 8 为用户提供了一个灵活、响应式的平台，适用于商务应用、生产力工具、照片、游戏和音乐。对于开发者而言，Windows 8 应用的新 HTML 和 JavaScript 工具及框架也提供了同样敏捷的编码环境。通过将标准的轻量级工具与 Win8 和 WinRT 平台的全部功能相结合，您可以使用大多数 Web 开发者都熟悉的技​​术，为手机、平板电脑、笔记本电脑和台式机创建快速、流畅的应用。这些应用与您使用 C# 和 XAML 构建的 Win8 应用完全兼容，易于部署，并已准备好发布到 Windows 应用商店，在那里您可以立即接触到全球数百万用户。本文基于《The Windows 8 Metro Page Grid》一书的第 3 章，作者将向您展示如何使用 Metro 数据网格。 您可能还对以下内容感兴趣…

当您最终准备好部署应用程序时，您会发现对 Metro 设计和 Metro 页面网格有扎实的基础知识将使提交过程更加顺利。在本文中，基于《JavaScript and HTML5 for Windows 8》一书的第 3 章，作者将向您展示如何使用该网格。

作为设计辅助，微软为我们提供了一个“剪影”或基本应用程序布局。其底层是 Windows 8 网格系统。此网格有助于确保我们的应用程序与其他 Windows 8 应用程序和谐共存，并避免在应用程序之间切换时产生生硬感。该网格也足够灵活，能够实现独特性和灵活性。

网格被划分为 20 像素的单位。每个 20 像素单位可以进一步划分为 5×5 像素的子单位，因此每个单位有 16 个子单位。图 1 显示了屏幕左上角的网格。图像被放大以显示像素、子单位和单位。

页面标题

页面标题的基线应距离顶部 5 个单位（100 像素）。页面标题的左边距为 120 像素或 6 个单位。使用的字体应为 42 号 Segoe UI Light。请记住，网格上的元素放置具有灵活性，但 6 个单位的左边距是一个您应竭力避免的区域，因为该区域也保留用于用户向上滑动返回到之前的应用程序或网页。因此，干扰该区域会影响 Metro 框架内置的导航。另外，请记住右边距—用户将频繁使用此区域访问 Charms Bar 以进行搜索、共享、设置等操作。

内容区域

包含页面内容的区域应距离顶部 7 个单位，即 140 像素。左边距同样是 6 个单位，即 120 像素。底部边距是灵活的。如果您的内容是水平滚动的，则底部边距不应超过 6.5 个单位（130 像素），也不应小于 2.5 个单位（50 像素）。如果您的内容是垂直滚动的，则顶部和左侧边距保持不变。显然，如果您的内容是垂直滚动的，则没有底部边距。如果您的内容不滚动，您也需要为右侧留出舒适的边距。

此外，既然我们正在网格系统中查看字体和排版，请记住我们对排版的强调不仅仅是为了美观；它清晰地建立了我们文本内容的层次结构。

例如，它清楚地显示了“这是标题”和可读的正文文本之间的差异，同时也表明了应用程序内子标题的层次结构。因此，它确实帮助我们阐明了信息层次结构。

水平和垂直填充

填充是子单位发挥作用的一个地方。填充以及网格内项目之间的分隔取决于内容的类型。图像和用户磁贴等项目在它们与伴随的文本之间有清晰的 2 个子单位或 10 像素的填充。列表在列之间有清晰的 2 个单位的填充。硬边距项目在列之间有 2 个子单位的填充。

垂直填充也因项目类型而异。磁贴和文本列表在行内项目之间有 1 个单位或 20 像素的垂直填充。硬边距对象在行内项目之间有 2 个子单位或 10 像素的填充。

不同项目组之间的填充为清晰的 4 个单位或 80 像素。这种填充更宽，以便在用户在项目之间滚动时有足够的间隔来轻松区分一组与下一组。

这显然不是最激动人心的布局，而且您不必感觉自己被限制使用某一个特定的布局。网格非常灵活，您可以用任何您想要的方式格式化和布局您的应用程序，同时仍然可以使用这个底层的网格基础。

下面是一个完全独特的应用程序布局示例，但请注意它仍然基于网格系统。

此布局完全独属于该应用程序，但通过依赖 Windows 8 Metro 网格系统，用户在您的应用程序和其他 Metro 应用程序之间切换时会有一种真正的连续性和稳定性感觉。

即使不使用网格系统也不是硬性规定；您可能有一个游戏，它不需要真正地布局内容，而且使用网格可能没有意义。

但如果您确实需要布局内容，那么使用网格并熟悉 Metro 应用程序的常见布局系统是有意义的。如果您使用内置模板，它们已经实现了这个网格，所以开箱即用。

“但我不是设计师”

排版和页面布局通常属于设计师的领域，而不是开发人员，对于许多转向 Metro 应用程序开发的开发人员来说，这可能会感觉有些陌生。早期的微软开发工具侧重于快速开发，并包含简单的 UI 表单和控件，适合创建简单的“战舰灰”界面—带有灰色背景和最小化布局的简单应用程序。Silverlight 和 WPF 开发允许开发具有更精细用户界面的应用程序，但现在随着 Metro 应用程序开发，一个规划周全的 UI 变得更加必要。事实上，有很多 UI 标准您需要了解，并且在应用程序被 Windows 应用商店接受之前，会仔细审查对这些标准的遵守情况。

体会

对开发人员来说的好消息是，这个网格系统内置于 Visual Studio 中，而且 Metro 控件的设计正是为了适应这个网格系统。所以，请使用模板。

然而，最终您将超越模板—或者至少您将仅将它们用作基础，然后将您的 UI 精炼成对您的应用程序而言独特的东西。在 Windows 应用商店中，很大一部分应用程序基本上是这些内置模板之一，包含一个可滚动的图像网格。您的应用程序是独一无二的—您将希望为您的特定需求定制您的 UI—而不是另一个快速套用模板的 Visual Studio 模板。

但是，不要忘记，Visual Studio 2012 仍然包含我们过去使用的所有项目类型—ASP.NET MVC、Windows 窗体、控制台应用程序—取决于应用程序的需求。您需要确保您没有将某个不适合 Windows 8 HTML 应用但使用其他项目类型会更好的东西“硬塞”进去。

您可能还会对以下 Manning 图书感兴趣：

	HTML5 for .NET Developers Jim Jackson II and Ian Gilman
	一个月午餐时间学会 Windows IIS Jim Jackson II and Ian Gilman
	Windows 8 XAML 实战 Pete Brown