MEF 和 Silverlight 的第一个指南（第 II 部分）

• 下载演示 - 557.27 KB

引言

在我之前的文章《MEF 和 Silverlight 入门指南（一）》中，我使用一个简单的小控制台应用程序讨论了 MEF。希望那篇文章对您理解 MEF 的基本概念有所帮助。在本文中，我将指导您使用 MEF 创建一个简单的 Silverlight 应用程序。如果您是 MEF 的新手，我强烈建议您阅读我之前的文章，以了解 MEF 的基本知识，例如导入、导出、目录、容器等。请阅读完整的文章，如果您在结尾有任何疑问，请告诉我。我会尽快回答。我一直非常感谢您宝贵的反馈。

先决条件

要开始使用 Silverlight & MEF 应用程序，您需要设置您的开发环境。在您的开发 PC 上，您需要已安装以下软件：

1. Visual Studio 2010 及 .NET Framework 4.0
2. Visual Studio 2010 的 Silverlight 4.0 工具

在您的环境准备好以上工具后，我们就可以开始下一步了。

项目设置

首先，我们需要创建一个 Silverlight 应用程序项目，然后添加一些程序集引用以使用 MEF。因此，请按照以下步骤设置您的项目：

• 打开您的 Visual Studio 2010 IDE
• 现在转到 文件 –> 新建 –> 项目，或者直接按 Ctrl + Shift + N 打开“新建项目”对话框。
• 从左侧面板展开“Visual C#”，然后选择“Silverlight”。右侧窗格将显示 Silverlight 模板。

  

• 在右侧窗格中，从屏幕顶部的下拉菜单中选择“.NET Framework 4”。这是必需的，因为我们要为目标版本（即 Framework 4）进行应用程序编程。
• 在右侧窗格中选择“Silverlight 应用程序”，然后单击“确定”。我假设您已选择了正确的位置并为您的应用程序项目命名（在本例中，我将其命名为“MEFWithSilverlightDemo”）。
• 单击“确定”后，系统会提示您创建一个新的网站。此步骤对于托管 Silverlight 应用程序是必需的。

  

• 请确保在上述对话框中，已将“Silverlight 4”选为 Silverlight 版本。
• 单击“确定”后，Visual Studio IDE 将开始创建您的 Silverlight 项目。它将创建两个项目（一个是您的 Silverlight 应用程序项目，另一个是您的 Silverlight 应用程序托管网站）。

  

• IDE 创建项目后，您需要为您的项目添加一个名为“System.ComponentModel.Composition”的程序集引用，以及一个名为“System.ComponentModel.Composition.Initialization”的程序集引用。为此，请右键单击您的 Silverlight 应用程序项目，然后单击“添加引用”。在“添加引用”对话框中，找到名为“System.ComponentModel.Composition”和“System.ComponentModel.Composition.Initialization”的程序集并将其添加到您的项目中。

  

完成以上所有步骤后，您的项目就可以进行 MEF 开发了。

构建我们的第一个 MEFWithSilverlightDemo 应用程序

让我们先决定示例要做什么。我们将创建一个 Silverlight 应用程序，其中包含一些作为小部件的 UserControl。这仅用于学习目的，因此请不要在意 UI。所以，在我们的示例应用程序中，我们将创建一个 UserControl 并将其标记为可导出。然后，我们将在应用程序中导入 UserControl 并将其添加到 UI。接下来，我们将创建另一个 UserControl 并将其标记为可导出，这样在不更改代码的情况下，它就可以添加到主 UI 中。这只是一个示例，用于展示 MEF 在 Silverlight 应用程序中的功能。

通用接口设计

让我们开始编写代码。首先，我们将创建一个名为 IWidget 的接口，并使用此接口来构建我们的 UserControl。我们将仅将其继承到 UserControl ，并在导出或导入时使用相同的接口类型。这样做的原因是为了确保只有指定类型的控件才会被 MEF 标记。如果我们为两种不同类型的控件使用不同的接口，这将使我们在主屏幕上更容易管理。所以，只需创建一个名为 IWidget 的空接口，其外观如下：

托管控件

现在，在 MainPage.xaml 中，添加一个 ItemsControl 并将其命名为“widgets”。用 StackPanel 包装 ItemsControl 以容纳项目。XAML 文件如下所示：

设计员工小部件

现在是时候创建 UserControl了。右键单击 Silverlight 项目，添加一个 UserControl 并将其命名为“EmployeeWidget”。我们不会在其内部进行过多设计，因为这对于理解 MEF 来说不是必需的。为了使其正常显示，只需添加一个 TextBlock 并包含一些字符串。在我们的示例中，我将“Employee Widget”设置为 TextBlock 的文本字符串，并将 Grid 背景色设置为“Red”。将 UserControl 的大小调整为 150 x 150，以便它可以在屏幕上正确显示。下面是详细布局的代码：

如上所述，我将控件的大小调整为 150 x 150，然后将背景色更改为红色。添加了一个 TextBlock ，其 TextProperty 的值为“Employee Widget”，前景色为 White，以便在红色背景上可见。无需对此做更多描述。只需查看上面的 XAML，您就能明白其中的原理。

导出员工小部件

在 EmployeeWidget.xaml 页面上按 F7 打开代码隐藏文件。将 EmployeeWidget 类继承自 IWidget。完成后，为类添加“Export”属性，类型为 IWidget。这将确保该类被导出以供 MEF 满足。查看此处的代码：

导入小部件

既然我们的 UserControl 已被导出以供 MEF 满足，那么是时候在我们的 MainPage 中导入它了。为此，请打开 MainPage.xaml.cs 并创建一个类型为 IWidget 的数组属性“Widgets”。我们使用数组类型是为了确保可以导入多个小部件。因此，将该属性标记为类型为 IWidget 的“ImportMany”属性。完成后，我们的代码就可以导入已导出的类了。现在，在您的 MainPage 构造函数中，遍历数组并将所有 Widgets 添加到我们在 XAML 中已经添加的“widgets”项控件中。现在，如果您运行应用程序，您会发现 Widgets 数组为 null。为什么？请思考一下。哦，对了！我们忘记调用 MEF 初始化器来满足属性。要如何做呢？要满足导入，您需要在遍历数组列表之前调用“CompositionInitializer.SatisfyImports(this);”。请看代码：

现在，再次运行您的应用程序，这一次您将在 UI 屏幕上看到 EmployeeWidget ，其文本为“Employee Widget”，背景为红色。这是同一屏幕的截图：

太棒了！真不错。我们没有创建 UserControl 的对象并将其添加到 ItemsControl。MEF 框架为我们做了这一切。一旦满足条件，它就会创建对象并将其导入到 MainPage。

设计客户小部件

就是这样。现在我们将再做一件事。我们将创建一个名为“CustomerWidget”的另一个 UserControl ，并按照上面提到的导出控件的相同步骤进行操作。这次，我们将文本设置为“Customer Widget”，并将背景色设置为 Green。这样我们就可以轻松地区分这些项目。这是 CustomerWidget 用户控件的 XAML 代码：

导出客户小部件

现在，在 XAML 页面上按 F7 打开 CustomerWidget 的代码隐藏文件，并按照我们为 EmployeeWidget 所做的相同步骤操作，即实现名为 IWidget 的接口，并通过设置 IWidget 的 Export 属性将该类标记为可导出。以下是供您参考的代码：

就是这样。这次我们在 MainPage 中没有添加/修改任何代码。只需运行应用程序，您就会看到 CustomerWidget 与名为 EmployeeWidget 的控件一起被添加到面板中。查看同一屏幕的截图：

摘要

那么，我们在这里学到了什么？我们了解到，在不更改原始代码的情况下，我们可以轻松地使用 MEF 导入任何控件。无需修改主应用程序，就可以非常轻松地将某些内容插入到我们的原始应用程序中。在这种情况下，我们不必更新原始应用程序，而是可以像插件一样轻松地附加我们的功能。希望本文能帮助您通过 Silverlight 理解 MEF 的基本功能。在我的下一篇文章中，我将通过一个控制台应用程序向您展示更多关于 MEF 的内容。在那之前，请继续学习 MEF，并进行一些小的概念验证 (POC) 以深入学习。请不要忘记发布您的反馈和/或建议来改进本文。感谢您阅读本文。

历史

• 2010 年 8 月 24 日 - 初始发布