第一个 Hilo 示例应用程序 - Hilo 浏览器，通过实现支持触摸的用户界面来完成图片的浏览和选择。你可以通过 MSDN Code Galery 下载 Hilo 浏览器应用程序的源码。这篇文章将介绍 Hilo 浏览器程序、开发 Windows 7 应用的一些工具和在后面将会用到的一些 API，我们将会深入到 Hilo 浏览器程序的细节中。
使用 Hilo
Hilo 允许你通过自然的方式选择、注释和共享图片集，为了达到这个目标，Hilo 利用 Windows 7 的一些关键特征：Libraries, Touch, Windows Ribbon, Direct2D, 和Windows Animation。
平板电脑允许你通过触摸屏使用应用程序，使用触控笔输入数据，Hilo 旨在仅仅配有鼠标的计算机上 也同时支持触控和笔的关键特征，Windows7 的动画特征被 Hilo 用来取得良好的效果，使你通过更加自然的方式来浏览文件和导航，这个设计也被用来替换掉大多数 Windows 应用程序中基于表的显示模式（例如，Tree View 和 List View 控件）。方便的触摸界面，使得数据访问更加简单和自然。
Hilo 应用程序的中心是如图 1 所示的 Hilo 浏览器，窗口的上半部是旋转平台，图 1 中显示图片文件夹中有 6 个子文件夹，位于同一旋转平台上，通过触摸，你可以沿着平台转换这些文件夹到前面，在这个视图中，你仅仅可以看到你可以转动的一个完整轨道。实际上，这个旋转平台也显示了父文件夹的部分轨道。例如，在图1 中，你可以在唯一的完整轨道之上看到 Pictures 文件夹的部分轨道。
Hilo 浏览器窗口的下半部是一个显示选中的文件夹中的图片的媒体窗格，媒体窗格中显示开头的少许图片，其他的图片通过触控（或者鼠标点击）媒体窗口的箭头进行访问。
媒体窗格是专为一个不同的使用模式设计的：触摸屏，可视的，在屏幕上手指触摸的位置是不精确的。所以，在 Hilo 浏览器中，不是在媒体窗格上增加一个卷滚条，而是媒体窗格本身就是卷滚条，在你可以拖动项目本身的时候，卷滚条就是多余的。
所以，在 Hilo 浏览器中，你有两种方式来显示其他的项目：你既可以触控窗格左右两边的箭头，也可以在窗格中沿着你希望的方向在任何地方轻轻划动。这是非常自然的手势，说明了触控界面意味着程序的设计师转变成考虑用户将会如何使用使用界面项目，虽然对于通过触控访问界面的人来说，手势是非常自然的，对于使用鼠标的用户来说，却是不自然的，所以，鼠标用户将使用卷滚箭头或者鼠标的滚轮。Hilo 浏览器还允许你使用 Page Up 和 Page Down 键，程序演示了成功的应用程序对于鼠标和键盘用户也可以像触控用户一样提供输入的能力。
类似的，你将会看到在触摸屏上使用旋转平台也是一个自然的动作，我们习惯于围着一张桌子来移动卡片或者照片，旋转平台也提供了类似的模式来访问文件夹，鼠标用户也拥有对旋转平台完全的访问能力，他们也可以享受沿着轨道旋转文件夹。
当你通过文件夹结构导航的时候，当前选中的文件夹被迭放到左上角，图1 显示了开始的时候，Pictures 文件夹显示在旋转平台的上端，当你选中了一个子文件夹的时候，例如 Summer，这个新的文件夹被迭放到上端，如图 2 所示，当你继续穿越文件夹结构的时候，每一个父文件夹都会被迭放到上端，图标下面的箭头允许你移动到父文件夹。
图2 Hilo 浏览器左上角显示叠放的文件夹栈
回到上一个旋转平台视图，你仅仅需要触控或者点击一下文件夹，通过这种方式，你可以展开和收缩这个堆叠，使得在文件夹的树中进行导航变成一个简单和自然的动作。
对于一个商用软件来说，必须产生实际的价值，（典型地）提供一些其他产品没有的服务，实际上，在一个竞争的市场上，仅仅提供功能是不够的，应用必须提供引人注目的用户体验，这也就是 Windows7 变得非常重要的一个特征。Hilo 浏览器程序充分利用了这些特征，有四个主要的技术被使用在 Hilo 程序中：Direct2D, Windows Animation, the Touch API, 和 the Shell API.
使用 Direct2D 创建用户界面
创建一个引人注目的应用程序的一个重要方面是提供一个有视觉吸引力和实用的界面。现代计算机具备带有强大图形处理单元 ( GPU ) 的图形卡和使用高分辨率的显示器。Direct2D 就是面向现代计算机的 GPU 编写，提供了对于 GPU 全部功能的访问能力。一个 Direct2D 应用程序，在一个全功能的图形卡上，将会使用硬件加速。实际上，让尽可能多的图形卡，尽可能通过 Direct2D 编程，底层的库检查图形卡的 GPU 能力，如果 GPU 不支持一个特征，DirectX® 应用程序界面将提供一个软件实现。这意味着无论使用的图形卡，开发者编写同样的代码。
与以前版本的 Windows 中的 图形设备接口 ( GDI ) 相比，Direct2D 使用不同的模式。在 GDI 编程中，程序代码检测屏幕上的哪些像素将会改变，计算机的 CPU 执行计算来改变这些像素。在 Direct2D 编程中，程序指示显示将如何改变，然后库告诉图形卡的 GPU 来完成必须的计算，然后更新显示。这样释放了计算机的 CPU 来执行数据
的计算工作，结果是更快、反应更加迅速的应用程序。此外，GPU 支持高级的特征像反锯齿和 alpha 通道 ( 不透明度 )混合，允许你提供惊人的用户界面。
Hilo 浏览器充分使用这些 Direct2D 特征，例如，显示在旋转平台中的轨道 ( 图3 ) 就使用渐变画笔画出来。
动画管理允许开发者动画界面元素序列。最简单的形式，动画是一系列的一个或者多个变化的帧，变化可能是界面项目的大小、颜色、位置或者方向，变化本身可能是平滑或者突然的，线性的或者对数的。构造成故事板的一系列帧被重放时，以前在运行时需要大量的编码和大量的 CPU 处理，此外，为了使动画尽可能平滑，代码必须确保帧显示与显示器的刷新率同步。
Hilo 浏览器使用动画来取得好的效果，一些动画功能，例如旋转平台通过旋转模式显示文件夹，在旋转平台上根据该文件夹的位置缩放文件夹图标的大小和标题，这意味着靠近用户的文件夹 ( 用户正感兴趣的文件夹 )比其他的文件夹带有一个比较大的标题，显示的比较大。
在其他情况下，动画意味着提供一个引人注目的用户体验。例如，当你触摸文件夹时，你放大旋转平台，这意味着前一个轨道展开直到这个轨道显示在屏幕的顶端，选中的文件夹也移动到叠放的文件夹顶端，同时，媒体窗格被尽可能多显示的缩略图填充。Hilo 浏览器显示这些图片，一个接一个从左边滑入，如同纸牌在桌上被摊开，这个动画要比仅仅更新屏幕要有趣的多；它也服务于一个重要的目的，人的大脑对移动的图像比静止的要更加敏感，所以动画使得用户关注缩略图的显示。作为一个开发者，你必须吸引用户关注重要的数据，Hilo 浏览器显示了你如何使用动画做到这一点。
用户用手指或者手写笔这种自然的行为通过指向它们，来选择或者移动项目。Touch API 允许你为你的应用程序提供这种行为，改善用户的体验。
在 Hilo 浏览器中，用户使用手指来拖动一个文件夹转动旋转平台，像在真实生活中，当用户从屏幕上移开手指，旋转平台继续转动，减速然后停止。在转动的时候，用户可以通过使用手指触摸一个文件夹来停止旋转平台，通过这样与应用程序自然的交互，Hilo 浏览器的设计者使得首次的用户易与学习。
使用 Shell API
Hilo 浏览器是一个丰富的视觉应用程序，标准的文件夹使用众所周知的文件夹图标显示，用户创建的文件夹被显示为文件夹内容的预览形式。媒体窗格显示选中文件夹中图片的缩略图，每一个缩略图有同样的尺寸，不管是几的图片尺寸是多少。
所有这些功能通过 Shell API 提供，这个 API 允许你访问 Shell 的视觉表示项目，像文件夹图像，图标或者个别文件的缩略图，Shell 和 Windows 导航器显示这些图片，你的应用程序也可以这样做，这意味着你的应用程序和 Windows 7 的用户体验是一致的。
Hilo 浏览器显示文件夹中的缩略图，这里有多种图片类型，所以 Hilo 浏览器必须能够提取图片的信息，创建一个可以显示在屏幕上的位图格式缩略图，为了完成这个目标，Hilo 浏览器使用 Shell API 从文件中得到图片信息，然后使用 Windows 图形组件 ( WIC ) 来转换图片到可以用 Direct2D API 显示的位图，WIC 支持加载和操作所有标准的图片格式 ( TIFF, GIF, JPG, PNG, ICO, BMP )和图元文件格式。
此外，因为加载和处理图片需要花费时间，这可能会使得应用程序反应迟缓。Hilo 浏览器不会这样，在图片显示在媒体窗格的时候，这部分聪明地使用动画，但是主要的原因是 Hilo 浏览器通过代码在背景线程中异步加载图片，Hilo 浏览器可以这么做是因为 Direct2D 是一个多线程感知的，结果 Hilo 浏览器尽管在图像处理中也反应迅速。
Hilo 浏览器应用程序是一系列示例应用程序的第一个，允许你浏览、选择、处理图片，你可以通过 MSDN Code Gallery 下载 Hilo 浏览器应用程序的代码。
这个系列的下一篇文章，详细描述 Hilo 浏览器应用程序的设计与实现，在此之前，回顾 Hilo 浏览器应用程序背后高级设计决策可能是有用的，这些描述包括开发语言的选择，应用程序的架构，设计模式和工具。
通过一个强大的、灵活的语言来访问Windows 7 丰富的用户体验是最好的，这就意味着 C++，通过使用 C++ 你可以访问赤裸的的强大的 Windows 7 API 来创建 Hilo 示例应用程序，所有你需要的就是 Visual C++ Express 和 Windows7 的 Windows SDK ，这些都可以免费下载。
Hilo 应用程序展示了如何设计和开发一个 Windows 7 应用程序。不过，虽然代码展示了 Windows 7 的 API，它并不拘泥于任何特定的应用程序框架，相反，Hilo 实现了一个轻量级公共应用程序层来直接使用，强调了 API 而不是模糊它们。这个公共应用程序层被用来支持整个 Hilo 应用程序，它说明 了开发 Windows 应用程序的最佳实践，虽然它是不完整的，被设计用来简单地提供 Hilo 应用程序需要的特征，它显示了设计可重用架构的最佳实践，可以用来扩展以提供附加的特征。
在代码背后，Hilo 浏览器关键的设计决策是简单和易读。这是为什么公共应用层是轻量级的主要原因，但是，也意味着错误检查和跟踪保持在最小的程度，这不是因为错误和跟踪不重要 ( 实际上，它们是任何代码设计的重要方面 )，只是由于广泛的使用跟踪将会分散展示如何使用 API 的主要目标。
Hilo 浏览器使用接口编程，抽象和对象工厂模式，是一个面向对象的 C++ 设计的最佳实践，这个设计也被选择用来提供一个反应迅速的用户界面，为此目的，通过背景线程使用异步的数据处理。你可以在你自己的项目中使用所有这些代码。
最后，应用程序开发需要一个强大的全功能的开发环境，Visual Studio 2010 提供了一个集成的环境，作为开发者，你可以使用你现有的技能编码和调试你的项目，Visual Studio 提供强大的工具帮助你快速提供高质量的代码。现在有四个不同的版本，提供不同的工具支持水平，这意味着你只需要花费你需要的工具支持。
结论
本文提供了 Hilo 浏览器应用程序的一个介绍，介绍了 Hilo 浏览器的功能，以及 Windows 7 用于实现这些功能的关键技术，在下一篇文章中介绍了如何设置你的开发环境，解释如何安装 Visual C++ 和 Windows SDK for Windows 7，以便于你可以编译和运行 Hilo 浏览器源程序。