Flashcards.Show Version 2 for Desktop, Browser, and Windows Phone

Arik Poznanski

5.00/5 (1投票)

2011年3月4日

Ms-PL

7分钟阅读

13670

Flashcards.Show Version 2 for Desktop, Browser, and Windows Phone

以下是 Yochay Kiriaty 在 windowsteamblog.com 上关于我一个使用 WPF、Silverlight、Windows Phone 7 和 Windows Azure 的项目的精彩帖子。

如果您对更多细节感兴趣，请务必参加我即将在 SDP 2011 会议上的演示。

[转载自 http://windowsteamblog.com/windows/b/developers/archive/2011/02/17/flashcards-show-version-2-for-the-desktop-browser-and-windows-phone.aspx 。]

Flashcards.show 应用程序已经问世几个月了。它主要用作开发人员的参考和演示，用于展示 Windows 7 的特定且酷炫的功能。虽然第一版的 Flashcards 允许您创建各种牌组，然后以游戏的形式使用这些卡片，但您无法将创建的任何精彩卡片与他人分享，除非通过电子邮件发送牌组文件本身。

图 1：Flashcards.Show 的“游戏”模式

考虑到这一点，我们开始着手开发 Flashcards.Show 第二版。我们的目标是实现用户在不同计算机之间无缝、轻松地共享牌组。想法很简单，将牌组上传到云端，然后让用户向任何他们想共享牌组的人发送消息。该消息将包含一个链接，供接收方点击以启动 Web 浏览器并运行 Silverlight 应用程序，该应用程序可以“玩”共享的牌组。Silverlight 应用程序动态下载共享的牌组，并像在 WPF 应用程序中一样显示该单个牌组。此时，用户可以启动三个游戏中的任何一个：学习、匹配或记忆，获得与 WPF 应用程序相同的用户体验。

图 2：Flashcards.Show 记忆游戏在 IE 中作为 Silverlight 应用程序运行

注意：共享的牌组有一些限制。牌组大小不能超过 5MB，并且不允许使用视频或音频。所有限制都是功能性的，而非技术性的。我们不想陷入过于深入的开发周期。

到目前为止一切顺利，我们有一个可以通过云共享牌组的 WPF 应用程序和一个可以玩这些牌组的 Silverlight 应用程序。下一步是尝试在 Windows Phone 上运行 Silverlight 应用程序。由于 Windows Phone 的开发模型之一是 Silverlight，因此该应用程序很有可能可以运行。所以我们尝试了。正如您所见，它奏效了！

图 3：Flashcards.Show 在 Windows Phone 模拟器上运行

Flashcards.Show 应用程序在 Windows Phone 上作为 Silverlight 应用程序运行，并且可以显示 WPF 应用程序与 Web Silverlight 共享的相同牌组。相同的内容和相同的游戏可以在 Windows、运行 Silverlight 的 Web 上以及 Windows Phone 上玩。

如果您想下载该应用程序，请随时使用 Flashcards.Show ClickOnce 安装程序。如果您想访问代码，请访问 MSDN 代码库中的 Flashcards。

这样，您就拥有了一个单一的应用程序，可以在三个不同的平台上运行，并以 Windows Azure 作为支持的云服务。Flashcards.Show 整个实现的优点在于我们能够（通过设计）在 WPF、Silverlight 和 Windows Phone 之间共享大量的代码和资源。

图 4：Flashcards.Show 高层架构

它是如何工作的？

Flashcards.Show 应用程序由两个主要组件构成

客户端应用程序套件 – Windows 版 WPF、Web 版 Silverlight 和 Windows Phone 版
云部分，一系列运行在 Windows Azure 上的 Web 服务，由 Azure 存储提供支持

在本系列帖子中，我们将不会解释云部分，而是专注于 Silverlight 和 Windows Phone 的实现。

当您下载 Flashcard.Show version 2 源代码时，您会发现一个单一的 Visual Studio 解决方案文件 (FlashCardsSolution)，其中包含 10 个不同的项目

FlashCards.UI.Phone – 包含 Windows Phone 应用程序，包括不同的页面和资源
FlashCards.UI.SL – 包含 Silverlight 应用程序，包括不同的页面和资源
FlashCards.UI.WPF – 包含主要的 Windows 应用程序，包括管理员和游戏模式
FlashCards.ViewModel.Phone – 包含 Windows Phone 应用程序中使用的 MVVM 架构的 View-Model 部分
FlashCards.ViewModel.SL – 包含 Silverlight 应用程序中使用的 MVVM 架构的 View-Model 部分
FlashCards.ViewModel.WPF – 包含 Windows 应用程序中使用的 MVVM 架构的 View-Model 部分
FlashCardsServices – 包含 Windows Azure 项目，该项目引用了与其一起部署的服务
FlashCardsServices.Contracts – 包含由各种 Flashcards.Show 应用程序使用的服务的定义
FlashCardsServices.Entities – 包含支持 Web 服务的模型
FlashWCFWebRole – 包含不同 Flashcards.Show 应用程序使用的 Web 服务

查看以上列表，您可能会问自己，不同的 ViewModel 项目和 UI 项目之间有什么重复之处？

首先，我们必须为目标平台（Windows、Silverlight 和 Windows Phone）进行编译，别无选择，只能编译到所需的 CLR 目标。有关背景信息，请观看 Shawn Burke 的“3-Screen Coding: Sharing code between Windows Phone, Silverlight, and .NET”。此示例不使用 Shawn 在其演讲中提到的库，但这无疑会使我们的工作更轻松。

然而，这并不意味着我们只能复制代码。这在应用程序的 ViewModel （MVVM 的一部分）方面尤其如此。由于所有客户端基本上共享相同的模型，因此它们都具有相同的逻辑并显示相同的游戏和屏幕流程。因此，正如您从左侧的图所示，WPF 视图模型 (FlashSards.ViewModel.WPF) 是我们正在使用的主要视图模型，而手机的视图模型 (FlashSards.ViewModel.Phone) 和 Silverlight 视图模型 (FlashSards.ViewModel.SL) 仅**链接**到相关的视图模型文件。正如您从图像中看到的，小箭头表示相关文件已链接（单击左侧的图像以查看更大的版本）。这表明我们正在为所有客户端维护一个单一的视图模型。

UI 稍微棘手一些。Silverlight 3 和 WPF 4 运行时之间的差异使得在我们的情况下，只需重写 Silverlight 应用程序（请记住，我们选择针对 SL3 以便更容易移植到 Windows Phone）。FlashCards.UI.SL 是一个 Silverlight 项目，它模仿了 WPF 的许多功能，但具有 Silverlight 的功能。

在编写 Silverlight XAML 和使用数据绑定时，您仍然可以利用您所有的 .NET 和 WPF 技能。我们特意将目标定为 Silverlight 3 而不是 Silverlight 4，因为 Windows Phone Silverlight 运行时是版本 3。原因很简单；我们希望从 Silverlight 移植到 Windows Phone 的过程尽可能简单。结果也正是如此，从 Silverlight 移植到 Windows Phone 的过程非常简单。将 Silverlight 应用程序移植到 Windows Phone 上大约花了 3 天时间。

正如您从左侧的图所示，Windows Phone UI 项目 FlashCards.UI.Phone 的大部分文件都是链接（包括图像 #6 中折叠的文件夹）。这些链接指向 Silverlight Web 应用程序实现 FlashCards.UI.SL。

无法链接的文件是 Views 文件夹下的文件。这些文件包括与我们在手机上显示特定页面方式直接相关的 XAML。手机的屏幕尺寸要小得多，因此我们可以容纳的对象更少。考虑到这一点，XAML 的实现是相似但不完全相同的。