WPF 和 Silverlight 的 Zune 风格应用程序模板
Zune 风格的应用程序模板，
引言
本文介绍了我编写的一对 Visual Studio 项目模板，一个用于 Silverlight，一个用于 WPF。它们提供类似的功能 - 一个干净简约的项目，其用户界面受到 Microsoft Zune 的启发。要查看效果，您可以在浏览器中查看 Silverlight 版本，下载演示应用程序，或者直接安装 Apex SDK，然后从 Visual Studio 2010 中的模板创建新项目！
[WPF 模板]
使用模板
第一步：安装 Apex SDK
安装模板非常简单。首先，下载 Apex SDK (Apex 是这些模板使用的 MVVM 框架)，然后运行安装程序。
第二步：创建新项目
打开 Visual Studio 2010 并创建一个新项目，您将在 C# 部分看到以下两个新项目模板：
[新项目窗口]
选择 WPF 或 Silverlight 项目模板。创建的项目可以立即运行！
第三步：扩展项目
现在您已经有了一个很棒的起点，可以构建一个外观炫酷的应用程序了。请查看下面的两篇文章，了解如何使用 Apex 构建 MVVM 应用程序。
Apex 第 1 部分：
Apex 第 2 部分：为 MVVM 应用程序添加命令
如果您不想阅读，这两篇文章也有 YouTube 视频！您也可以在 Apex CodePlex 页面上了解 Apex 的发布、开发动态并建议新功能。
应用程序的工作原理
创建的应用程序在 WPF 和 Silverlight 版本中基本相同。只有两个主要区别：
- WPF 模板样式化窗口的边框 (边框、最小化和最大化按钮等)
- Silverlight 模板使用 Visual States 而非触发器进行动画
重要的是，应用程序的逻辑和关键用户界面元素的功能完全相同 - 这是 Apex 框架的关键点之一 - 您为 WPF 编写的代码应与 Silverlight 兼容，反之亦然。
在本文的这一部分，我们将详细介绍模板为您创建的所有内容以及如何在此基础上进行构建。
第一部分：主视图 (Main View) 和视图模型 (Main ViewModel)
在解决方案的根目录下有两个关键文件：MainViewModel.cs 和 MainView.cs。
MainViewModel 就是其名称所示 - 它是应用程序的主视图模型。它继承自 PageViewModel，这是模板的一部分。PageViewModel 具有三个属性 - 一个标题、一组子页面和一个选定的页面。
事实上，这正是我们构建工作页面系统所需的所有内容。主视图模型在其构造函数中创建所有子页面，而主视图则绑定到它以显示应用程序。工作原理如下：
[主视图的结构]
Shell (外壳)
主视图的第一部分是 Shell。这是 Apex 库中定义的顶级元素，用于支持弹出窗口和拖放。在 Silverlight 中，您无法显示单独的弹出窗口，但可以显示看起来像弹出窗口的用户界面元素。如果您转到示例中的 Shell 页面并按“显示弹出窗口”按钮，您将看到一个正在工作的弹出窗口。
Shell 的优点在于它在 WPF 和 Silverlight 中都能一致地工作 - 因此您无需针对不同平台处理单独的弹出窗口和拖放机制。
如果您需要获取 Shell，例如显示弹出窗口，可以通过 ApexBroker 进行，它负责访问所有关键元素。
// Get the shell and show the example popup.
IShell theShell = ApexBroker.GetShell();
theShell.ShowPopup(new ExamplePopup());顶部菜单
顶部菜单是 SelectableItemsControl。它继承自 ItemsControl，允许您拥有一组项目，同时处理选择，而无需重新模板化 ListBox 或 ListControl。它的工作原理是简单地绑定到数据（在本例中是页面视图模型集），如果它们实现了 'ISelectableItem' 接口，它将设置它们的 'Selected' 属性，并在用户选择项目时分别为项目调用 'OnSelected' 和 'OnDeselected'。
底部菜单
顶部菜单是 SelectableItemsControl，并具有 SelectedItem 属性。我们绑定到顶部菜单的 SelectedItem 属性的 Pages 以显示子页面。这与顶部菜单的工作方式完全相同。
ViewBroker (视图代理)
ViewBroker 是一个控件，当给定一个 ViewModel (例如我们选定的页面) 时，它会创建相应的视图。这意味着当我们切换页面时，ViewBroker 会获得选定的视图模型，并自动为其创建一个视图。这是一个非常有用的功能，在下面的第 3 部分中有详细介绍。
第二部分：模型 (Model)
在名为 'Models' 的文件夹中，会创建两个文件 - ApplicationModel.cs 和 IApplicationModel.cs，其中 Application 是您为项目选择的名称。
[解决方案资源管理器，显示模型]
我们有一个模型和一个模型接口。这样做的目的是，您定义模型接口来描述模型应执行的所有功能。应用程序的其他部分只会知道模型的接口 - 而不会知道实现细节。以下是示例：
/// <summary>
/// The Example Model interface.
/// </summary>
public interface IExampleModel
{
/// <summary>
/// Gets the ablums.
/// </summary>
IEnumerable<string> GetAlbums();
/// <summary>
/// Gets the artists.
/// </summary>
IEnumerable<string> GetArtists();
/// <summary>
/// Gets the tracks.
/// </summary>
IEnumerable<string> GetTracks();
}
因此，在模型接口中，我们只定义了模型可以做什么。然后我们有模型实现：
/// <summary>
/// The Example Model. Can be accessed via ApexBroker.GetModel
/// via the interface IExampleModel.
/// </summary>
[Model]
public class ExampleModel : IModel, IExampleModel
{
/// <summary>
/// Called to initialise a model.
/// </summary>
public void OnInitialised()
{
// TODO: Initialise your model here.
}
/// <summary>
/// Gets the artists.
/// </summary>
/// <returns></returns>
public IEnumerable<string> GetArtists()
{
yield return "John Coltrain";
// etc etc etc在模型实现中，您可以做任何事情来满足接口中定义的**要求** - 使用数据库连接、文件系统、Web 或其他任何方式。
Apex 如何处理模型
如果您用 [Model] 属性装饰模型实现，Apex 将在应用程序初始化时自动创建一个模型实例。如果实现实现了 IModel 接口，Apex 还会调用其 OnInitialised 函数。这种安排的关键在于以下几点 - 您可以像这样从任何地方获取模型：
// Get the example model.
var exampleModel = ApexBroker.GetModel<IExampleModel>();ApexBroker 是您可用于获取模型、视图、视图模型等的对象。GetModel 函数允许您通过请求其接口来请求模型实例。您实际上可以去掉接口，直接请求模型类 - 但通过仅使用接口，我们可以将代码很好地分离 - 调用者永远不会了解模型的实现细节 - 只能访问其功能。
这在更复杂的情况下特别有用，例如，您可能有一个用于测试的不同模型，一个用于设计视图等等。
第三部分：页面视图 (Page Views) 和视图模型 (Page ViewModels)
每个页面都由一个视图和一个视图模型组成。页面视图模型如下所示：
/// <summary>
/// The MusicViewModel ViewModel class.
/// </summary>
[ViewModel]
public class MusicViewModel : PageViewModel
{ [ViewModel] 属性告诉 Apex 这是一个视图模型，应该可以在 ApexBroker 中使用。
视图如下所示：
/// <summary>
/// Interaction logic for MusicView.xaml
/// </summary>
[View(typeof(MusicViewModel))]
public partial class MusicView : UserControl, IView
{
public MusicView()
{
// ...etc... 视图具有 [View] 属性，它们使用该属性告诉 ApexBroker 它们是视图以及它们关联的 ViewModel 类型是什么。 IView 接口只有两个函数 - OnActivated 和 OnDeactivated。总而言之，这意味着 ViewBroker 等控件可以接收一个 ViewModel，创建正确的 View 用户控件，显示它并调用 OnActivated，这样视图就知道它已被显示。在 OnActivated 中，我们触发了在屏幕上滑动和淡入元素的动画。
下一步
就看您的了 - 希望您会发现这些模板很有用。如果您想了解更多关于 Apex 的信息，可以查看下面的关键文章：
Apex 第 1 部分：
Apex 第 2 部分：为 MVVM 应用程序添加命令
此外，CodePlex 页面应该是获取 Apex 相关信息的第一站。
我很乐意回答任何问题，也欢迎您提出任何反馈、评论或想法！另外，如果您使用此模板创建了任何外观新颖的东西，请随时发送截图给我，我想创建一个展示使用该模板创建的应用程序图片的库。