提升用户界面设计：样式、行为、模板与自定义控件

### 提升用户界面设计：样式、行为、模板与自定义控件 #### 样式与行为 在用户界面设计中，样式和行为是重要的工具，它们能帮助我们创建更智能、可维护的界面。 ##### 行为的使用 虽然我们有能力创建自己的操作、触发器和行为，但多数情况下，我们更倾向于使用预制的行为类。这样可以快速实现用户界面功能，无需编写大量代码。如果使用 Expression Blend，甚至无需手动输入 XAML 标记。 核心的 `System.Windows.Interactivity.dll` 程序集不提供任何操作或行为，仅包含一个有用的触发器类 `EventTrigger`。而 `Microsoft.Expression.Interactions.dll` 程序集则更为实用，它包含了一些基本的操作、触发器和行为类，具体如下： | 操作类 | 描述 | | --- | --- | | `ChangePropertyAction` | 使用反射将任何属性更改为指定的值。 | | `GoToStateAction` | 将控件切换到特定的视觉状态。 | | `HyperlinkAction` | 使用指定的 URI 导航到新页面。 | | `RemoveElementAction` | 从用户界面中移除元素。 | | `PlaySoundAction` | 与本章中演示的 `PlaySoundAction` 工作方式基本相同，但增加了设置媒体音量的功能，并将 `MediaElement` 显示在不可见的 `Popup` 控件中。 | | `ControlStoryboardAction` | 允许启动、停止、暂停或恢复动画。 | | 触发器类 | 描述 | | --- | --- | | `KeyTrigger` | 按下键时触发。 | | `TimerTrigger` | 按设定的时间间隔触发。 | | `StoryboardCompletedTrigger` | 动画结束时触发。 | | 行为类 | 描述 | | --- | --- | | `MouseDragElementBehavior` | 允许用户在页面上拖动元素，与本章中演示的 `DragInCanvasBehavior` 目的相似，但适用于任何布局容器。 | | `FluidMoveBehavior` | 监视元素（或一组子元素）的布局变化，当发生变化时，使用动画将元素平滑移动到新位置。 | 如果需要更多的行为，可以尝试访问 [Expression Blend Samples 项目](http://expressionblend.codeplex.com) 和 [社区行为库](http://gallery.expression.microsoft.com/site/items/behaviors)。 #### 模板与自定义控件 除了样式和行为，模板和自定义控件也是强大的用户界面设计工具。 ##### 模板基础 样式可以改变元素的外观，但仅限于设置元素类中定义的属性。而 Silverlight 中的模板则是一种更强大的定制工具，它适用于继承自 `System.Windows.Controls` 命名空间中 `Control` 类的元素。这些元素具有 `Template` 属性，通过设置该属性可以应用自定义模板，从而覆盖控件的标准视觉效果。 例如，通过更改 `Button` 对象的模板，可以创建出各种奇特的按钮，如使用圆形或异形边框的按钮，以及具有醒目鼠标悬停效果的按钮。 ##### 创建模板 每个控件都有一个内置的配方，用于确定如何将其渲染为一组更基本的元素，这个配方就是控件模板。它使用 XAML 标记块定义，并通过 `Template` 属性应用到控件上。 以基本按钮为例，若想通过创建自定义模板来更好地控制按钮的阴影和动画效果，首先要尝试用自己设计的模板替换按钮的默认模板。创建基本按钮模板时，需要绘制自己的边框和背景，然后将内容放置在按钮内部。绘制边框的根元素有以下几种选择： - **Border**：该元素有双重作用，它可以容纳单个元素（如包含按钮标题的 `TextBlock`），并在其周围绘制边框。 - **Grid**：通过在同一位置放置多个元素，可以创建带边框的按钮。使用 Silverlight 形状元素（如 `Rectangle` 或 `Path`），并将 `TextBlock` 放置在同一单元格中。确保在 XAML 中 `TextBlock` 定义在形状元素之后，以便它显示在形状背景之上。`Grid` 的一个优点是支持自动调整大小，可确保控件仅根据其内容大小进行调整。 - **Canvas**：`Canvas` 可以使用坐标更精确地放置元素。通常情况下这有些大材小用，但如果需要将一组形状相对于彼此放置在特定位置，作为更复杂按钮图形的一部分，它可能是一个不错的选择。 以下是一个使用 `Border` 类创建的按钮模板示例： ```xml <Button Content="A Custom Button Template"> <Button.Template> <ControlTemplate TargetType="Button" > <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10" Background="Red"> <TextBlock Foreground="White" Text="A Custom Templa ```