MVVM Silverlight 设计/图形架构师 .NET4 高级初级 C# 4.0 中级开发 .NET C#

动态加载 Silverlight 视频播放器（使用 MEF）

defwebserver

4.97/5 (10投票s)

2010年8月25日

Ms-PL

8分钟阅读

57299

2783

一个使用 MEF 动态加载 Silverlight 视频播放器的示例

轻松部署 Silverlight 视图模型应用程序

链接：在线演示

关于 Silverlight 视图模型模式的文章已经很多了，该模式允许程序员创建完全没有 UI（用户界面）的应用程序。程序员只创建 ViewModel 和 Model。然后，没有编程能力的设计师能够从空白页面开始，完全在 Microsoft Expression Blend 4（或更高版本）中创建 View（UI）。如果您是 View Model 的新手，建议您阅读Silverlight 视图模型样式：一个（过度）简化的解释作为入门。

之前的文章涵盖了内部应用程序的 View 被更改的场景。一次只部署一个版本的 View。但是，还有另一种场景，即希望允许最终用户创建自己的 View，和/或一次部署多个 View。要理解这是如何工作的，我们只需要看看任何现代 内容管理系统 (CMS) 所采用的“换肤”。例如，我们可以看看 DotNetNuke。

DotNetNuke 如何实现

通过 DotNetNuke，最终用户可以访问 Snowcovered.com 等网站，并购买其网站的皮肤。

他们只需下载一个 .zip 文件，然后使用管理界面上传 .zip 文件...

... 并将皮肤应用到他们的网站，使其焕然一新。

视图模型的轻松部署

正如我们在简化的视图模型样式 – 无需代码即可彻底改变应用程序设计中所述，视图模型不仅仅是换肤。通过 视图模型，我们可以完全改变 Silverlight 应用程序的设计和整个流程，而无需更改一行代码。

我们需要一个简单的部署机制，允许最终用户或第三方为 Silverlight 应用程序创建 View，然后只需将生成的 .xap 文件放入 Silverlight 应用程序的 ClientBin 目录，并通过在下拉列表中简单选择来应用它。

该场景在文章中已涵盖：MEF 简化：使用托管可扩展性框架动态加载 Silverlight .XAP

使用 MEF 动态加载不同版本的视频播放器

对于本文，我们创建了一个执行以下功能的应用程序

确定 ClientBin 目录中有哪些 .xap 文件（自定义视频播放器），并将它们显示在下拉列表中
使用 MEF 动态加载选定的自定义视频播放器
提供一个共享的 ViewModel，每个自定义视频播放器都将使用它
- 使用 Web 服务确定 Videos 目录中有哪些视频
- 检索并播放选定的视频

请注意，视频播放器的代码在以下文章中涵盖：视图模型样式：Silverlight 视频播放器（第 1 部分）和视图模型样式：高级 Silverlight 视频播放器（第 2 部分）。

创建自定义视频播放器

使用 MEF，您想要动态加载的每个项目都必须是唯一的。您不能只更改 .xap 文件或其中包含的 .dll 程序集的名称。每个 Silverlight 应用程序都必须真正是唯一的，否则 MEF 会认为它已经加载了它，并且不会再次加载它（即使您以编程方式指示它）。我们需要从一个基础项目开始。

您可以在此处获取此项目的副本。

我们创建一个新的 Silverlight 应用程序并将其添加到解决方案中。

我们添加应用程序所需的引用，以及对 View Model 项目 (SkinableVideoPlayerViewModel) 的引用。

如果此时我们构建项目，我们看到自定义视频播放器的大小约为 463 KB。

然而，如果我们将所有引用设置为 Copy Local = False，并再次构建...

我们看到大小已大大减小，变为 4 KB。这就是为什么我们还将 View Model 分离到它自己的项目中的原因。这样做使我们能够不将其包含在自定义视频播放器的 .xap 中。

请注意，自定义视频播放器现在只有在以下情况下才能工作

它由主项目启动。SkinableVideoPlayer，使用 MEF
主项目 SkinableVideoPlayer 引用了自定义视频播放器所需的任何程序集

MEF 只有在所需的程序集在需要它们之前由另一个 .xap 加载（Copy Local 设置为“True”）时才能发挥其“魔力”。在这种情况下，该 .xap 是 SkinableVideoPlayer.xap，正如您在上面的屏幕截图中看到的，它仍然是高达 488 KB，因为它确实包含所有所需的程序集。

然而，如果没有 MEF，我们将被迫加载 488 KB 的 SkinableVideoPlayer.xap 和 VersionOne.xap，额外的 466 KB。如果我们要加载 4 个播放器，每次都会命中 488 KB。使用 MEF，我们只需要为所有 4 个播放器加载 16 KB，而不是 2330 KB。这减少了 97% 以上，这意味着最终用户将获得更快的加载体验。有关此主题的更多信息，请参阅此链接处的文章。

我们删除现有的 MainPage.xaml 文件（及其代码隐藏），并创建一个 View 文件夹，然后从一个工作版本的 视频播放器 中添加 MainPage.xaml（及其代码隐藏）。

然后，我们打开刚刚导入的文件，并修复命名空间，使其与当前项目的名称匹配。

我们构建项目，现在我们有了一个工作版本的 视频播放器。

您可以在此处获取此项目的副本（如果您想制作自己的自定义播放器，这是您应该使用的项目）。

设计师现在可以使用 Expression Blend 完全重新设计视频播放器。

完成后，要部署它，只需将小的 .xap 文件拖放到主项目的 ClientBin 中并刷新网页。

自定义视频播放器

我们决定制作一些自定义视频播放器，并随本文提供。请注意，在每种情况下，设计师都使用完全相同的 View Model，并且他们没有更改任何代码。他们的最终交付物是一个包含播放器的小 .xap 文件。

矶和春裕

“看视频不看 UI”皮肤。

概念：极简主义并尽可能隐藏 UI

此皮肤将尽可能隐藏 UI。菜单将在鼠标悬停时出现，播放通过在视频屏幕的设定区域点击来控制。

鼠标悬停在菜单上将显示；允许查看视频列表、音量和进度
点击媒体左侧快退，
点击媒体右侧快进
点击媒体中间将暂停

这是通过在视频前面放置一个响应鼠标事件的隐形矩形来实现的。

Michael Washington（Phil Middlemiss 主题）

我之所以创建播放器，唯一的原因是我至少需要两个播放器来创建代码。

请注意，Phil Middlemiss 完全不知道这个视频播放器，所以如果您不喜欢它，这不是他的错。但是，我以他的名字命名，因为我使用了他创建的资源库。

首先，我访问了他的网站并下载了他的示例项目。

我从他的项目中取出了 ChromeGlass.xaml 文件。该文件包含他所有的样式。我只是简单地将该文件放入我的项目中并构建了项目。

然后我能够右键单击他有样式的每个元素，并简单地应用样式。

这一切大约花了 3 分钟。

工作原理

Web 项目
- 包含两个 Web 服务
  - 返回 Video 文件夹中视频的列表
  - 返回 ClientBin 文件夹中 .xap 文件的列表（除了 SkinableVideoPlayer.xap）
- 启动包含主应用程序的 SkinableVideoPlayer.xap。它使用 MEF 启动自定义视频播放器。有关代码的完整解释，请参阅此链接。
主播放器项目
- 这是 SkinableVideoPlayer.xap 的源代码。这也是包含自定义视频播放器所需的所有引用的项目。请注意，设计器可以添加主项目未引用的其他程序集的引用，但他们需要将这些引用的 Copy Local 设置为“True”。
SkinableVideoPlayerViewModel
- 这是所有自定义视频播放器共享的 ViewModel。此项目执行所有“工作”。它还包含调用获取视频列表的 Web 服务方法的代码。
- 所有自定义视频播放器都引用此项目。

想象一下 Silverlight 的世界

通过 View Model，程序员不得不习惯一种奇怪的感觉，即创建一个有 UI 的程序，而他们与此 UI 毫无关系。现在软件公司将销售拥有他们毫无关系的 UI 的软件。

然而，一切仍然会正常工作！

像 MEF 这样的技术，结合 View Model 这样的模式，再结合 Expression Blend 这样的工具，形成了一个强大的组合。例如，你将能够购买一个会计应用程序，并让一家设计公司分析你的业务，并重新设计应用程序的 View。

他们甚至可以为每个员工提供量身定制的不同 View。如果员工知道如何使用 Expression Blend，他们可以设计自己的 View，而不必担心底层业务规则会受到影响。View Model 根本不允许你做任何不正确的事情，并且只有 View 被修改，而不是 View Model。

Silverlight 不仅仅是另一种 富互联网应用程序 (RIA) 格式，它更是软件设计和部署革命的基础。