动手试验：创建 WPF 用户控件
.png "此页仅适用于 WPF 项目")
如果希望设计可像系统控件一样添加到美工板上的可重用组件，可以在 Microsoft Expression Blend 中创建用户控件。用户控件可以像 Windows Presentation Foundation (WPF) 应用程序一样包含其他控件、资源和动画时间线。唯一的差别是，用户控件的根元素是“UserControl”，而不是“Window”或“Page”。
下列操作步骤显示了如何创建包含动画的用户控件，并在其他文档中加以实例化。（有关使用代码创建可基于现有系统控件的自定义控件的示例，请参阅动手试验：创建自定义 WPF 控件。）
可以在 Expression Blend 附带的示例中找到更多用户控件的示例。在“帮助”菜单中，单击“欢迎屏幕”，选择“示例”选项卡，然后单击某个示例的名称，例如“SmoothBlends”。有关用户控件的详细信息（包括 XAML 和代码示例），请参阅 MSDN 上 Windows Presentation Foundation 部分中的控件创作概述（此链接可能指向英文页面）。
.gif "说明") 说明： |
|---|
Microsoft Silverlight 1.0 中不支持用户控件。但可以创建通过编程方式进行实例化的自定义 JavaScript 类。有关示例，请参阅“欢迎屏幕”（位于“帮助”菜单上）中的“示例”选项卡上提供的“ButtonGallery”示例中的 Button 类。 Silverlight 2 中支持用户控件。有关详细信息，请参阅在 Silverlight 2 项目中创建新用户控件。 |
定义用户控件
在 Expression Blend 中，执行下列操作之一：
若要在 .dll 文件中创建用户控件，请单击“文件”菜单上的“新建项目”，选择“WPF 控件库”项目类型，指定项目名称，选择与主文档的代码隐藏文件相对应的语言，然后单击“确定”。如果希望在向他人提供用户控件时隐藏该控件的实现，或者希望在其他应用程序中绘制用户控件时可通过创建模板的方式来更改该控件的外观，则可以使用此选项。
若要在现有项目的 .xaml 文件中创建用户控件，请单击“文件”菜单上的“新建项”(Ctrl+N)，选择“UserControl”模板，指定文件名，然后单击“确定”。因为用户控件位于要使用它的相同项目中，所以此选项更容易更改。因此，可以跳过更新对 .dll 的引用这一步骤。
Expression Blend 将打开用户控件以供编辑。
决定根元素所需的面板类型。默认情况下，将使用名为“LayoutRoot”的“网格”面板，从而允许在其他文档中绘制用户控件时调整任何动画的大小。通过在“对象和时间线”下右键单击“LayoutRoot”元素，并指向“更改布局类型”，然后单击面板的名称，可以将面板类型改为“画布”或其他面板控件。
从“工具箱”中，选择任何希望包含在用户控件中的控件和绘图工具，然后在美工板上加以绘制。使用“属性”面板中的属性修改这些内容。用户控件可以包含 WPF 应用程序所能包含的所有内容。
在“对象和时间线”下，创建所需的任何动画时间线。有关示例，请参阅创建简单动画。
说明：在设置关键帧时，请考虑应用程序中所有动画的时间设置，以及用户控件中的动画将在何时运行。例如，考虑这样一个应用程序：先动态显示一个闪屏，然后再动态显示一个逐渐淡入的用户界面。可以将每个动画放入各自的用户控件中，但在第二个动画的开头留出足够的时间，以便完成闪屏动画。
.gif "提示")
提示：如果希望动画能够运行多次，请在 0 秒标记处设置一个关键帧。例如，如果创建一个动画时间线以便从左至右移动对象，并通过双击鼠标加以触发，但未在 0 秒标记处设置一个关键帧，则随后在双击鼠标时该动画并不会运行多次，因为它是一个切换动画。有关切换动画的信息，请参阅动画概述中的“使用多个重叠的动画时间线”。
在“触发器”下，配置所有将使应用程序对用户交互做出响应的属性或事件触发器。有关示例，请参阅添加或删除触发器。
说明：在决定要在用户控件中设置哪些触发器时，请考虑希望供用户控件使用的所有属性和触发器。例如，考虑这样一个应用程序：包含一个按钮以及一个包含在用户控件中的动画。在 Expression Blend 中，不能向该用户控件添加将在单击该按钮时开始动画时间线的触发器，除非该按钮也包含在用户控件中。此外，只有两个属性都在同一用户控件中时，才能在它们的值之间建立数据绑定。可以通过在代码隐藏文件中进行编程，也可以通过在将用户控件添加到文档之后为其创建带触发器和动画时间线的模板，来解决此问题。有关用户控件及代码隐藏文件的示例，请参阅 MSDN 上 Windows Presentation Foundation 部分中的控件创作概述（此链接可能指向英文页面）。有关如何从 Expression Blend 修改代码隐藏文件的信息，请参阅编辑代码隐藏文件。
创建完用户控件后，确保更改文档根元素的大小，使其仅为所需的大小。在“对象和时间线”下，选择文档根元素，然后使用“选择”
.png "Cc294992.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-cn,Expression.10).png")
工具在美工板上使用蓝色修饰工具调整文档窗口的大小。如果用户控件依赖于鼠标单击操作或与用户控件中空白区域的交互操作，则需要将根元素的背景设置为纯色画笔，以便在将用户控件添加到其他文档时，用户控件会使用美工板上的空间。在“属性”面板的“画笔”类别中，将根元素的“Background”属性改为“纯色画笔”
.png "Cc294992.3a66ec96-47bb-47fc-8876-6b9456feec3a(zh-cn,Expression.10).png")
。如果希望使背景不可见，请将“Alpha”子属性改为 0。如果用户控件依赖于特定的高度或宽度，请在“属性”面板中“布局”类别的“高级”
.png "Cc294992.81e110f1-4068-4299-957d-0693cea95088(zh-cn,Expression.10).png")
部分中设置“MinHeight”和“MinWidth”属性。如果希望能够在文档中绘制用户控件后调整其大小，请确保将该用户控件中的所有对象的“Width”和“Height”属性均重置为“Auto”。
单击“文件”菜单上的“全部保存”，以保存文件和项目。
如果项目是控件库，请单击“项目”菜单上的“生成项目”(Ctrl+Shift+B)，生成项目以创建 .dll 文件。将生成 .dll 文件，并将其保存在与项目相同的位置中的 \bin\Debug 文件夹下。
.gif "Cc294992.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif")
返回页首
在其他文档中实例化用户控件
如果创建了“控件库”，则可以在希望使用用户控件的项目中添加对 .dll 的引用。在“项目”菜单上，单击“添加引用”，在“添加引用”窗口中浏览到用户控件的 .dll 文件，然后单击“打开”。
生成当前项目 (Ctrl+Shift+B)，使用户可以从“资源库”中选择该用户控件。
从“资源库”
.png "Cc294992.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png")
的“自定义控件”选项卡中，选择用户控件。将在“资源库”按钮上方显示该用户控件的图标，并且该图标处于选中状态。使用鼠标在美工板上绘制用户控件。
测试项目 (F5) 以查看用户控件的实际效果。
返回页首
在将用户控件添加到其他文档之后加以编辑
如果创建的是用户控件文档而不是控件库 (.dll)，则可以使用快捷菜单进入该控件的编辑模式。
在美工板上或在“对象和时间线”下，右键单击该用户控件，然后单击“编辑控件”。Expression Blend 将打开该用户控件文档以供编辑。
进行更改后，保存文件，再切换回主文档。
如果在控件库项目中创建了用户控件，则需要编辑原始控件库项目，再重新生成 .dll。
返回页首