自定义控件创建全解析

### 自定义控件创建全解析 在开发过程中，自定义控件是一项非常重要的技能，它能让我们根据特定需求创建出独特的用户界面元素。下面我们将深入探讨自定义控件创建的各个方面。 #### 1. 初始状态的 XAML 定义 首先，我们来看一段 XAML 代码，它定义了一个等待指示器（WaitIndicator）的初始状态： ```xml <ControlTemplate TargetType="local:WaitIndicator"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Canvas Opacity="0"> <Ellipse x:Name="Ellipse1" Fill="#1E777777" Canvas.Left="0" Canvas.Top="11" Height="8" Width="8"/> <Ellipse x:Name="Ellipse2" Fill="#1E777777" Canvas.Left="3" Canvas.Top="3" Height="8" Width="8"/> <Ellipse x:Name="Ellipse3" Fill="#1E777777" Canvas.Left="11" Canvas.Top="0" Height="8" Width="8"/> <Ellipse x:Name="Ellipse4" Fill="#2E777777" Canvas.Left="19" Canvas.Top="3" Height="8" Width="8"/> <Ellipse x:Name="Ellipse5" Fill="#3E777777" Canvas.Left="22" Canvas.Top="11" Height="8" Width="8"/> <Ellipse x:Name="Ellipse6" Fill="#6D777777" Canvas.Left="19" Canvas.Top="19" Height="8" Width="8"/> <Ellipse x:Name="Ellipse7" Fill="#9C777777" Canvas.Left="11" Canvas.Top="22" Height="8" Width="8"/> <Ellipse x:Name="Ellipse8" Fill="#CC777777" Canvas.Left="3" Canvas.Top="19" Height="8" Width="8"/> </Canvas> </Border> </ControlTemplate> ``` 这段代码定义了八个椭圆，它们呈圆形排列。每个椭圆的基础颜色是 #777777（灰色），但通过填充时应用不同程度的 alpha 通道来使颜色变亮。后续对填充属性（特别是 alpha 值）的动画处理将使等待指示器产生“旋转”的效果。 理想情况下，这里定义的 XAML 应描述控件在初始（即正常）状态下的布局和外观。对于在初始状态下不应可见的元素或控件，应将其 `Visibility` 属性设置为 `Collapsed`，或者将其 `Opacity` 属性设置为 0（这样元素不可见，但仍会占用指定的空间）。注意，此 XAML 中的 `Canvas` 的 `Opacity` 属性相应地设置为 0，因为控件默认是不可见的。 #### 2. 识别状态并组织成状态组 每个状态定义了控件的一种替代外观，它直观地表示控件当前所处的状态，特别是为了指示该状态而对控件基本视觉外观（定义为动画）所需的更改。 以复选框（CheckBox）控件为例，它具有以下状态： - **常规状态**：Normal - **鼠标悬停状态**：MouseOver - **按下状态**：Pressed - **禁用状态**：Disabled - **选中状态**：Checked - **未选中状态**：Unchecked - **不确定状态**：Indeterminate - **获得焦点状态**：Focused - **失去焦点状态**：Unfocused - **有效状态**：Valid - **无效状态**：Invalid 其中一些状态是相互排斥的（如选中和未选中状态），而另一些状态（如选中状态和获得焦点状态）可以同时独立地应用于控件。 如果控件需要支持同时处于多个状态，就需要将这些状态分组，使得每组中的所有状态相互排斥，并为每个分组命名。复选框的状态分组如下： | 状态组名称 | 包含状态 | | ---- | ---- | | CommonStates | Normal, MouseOver, Pressed, Disabled | | CheckStates | Checked, Unchecked, Indeterminate | | FocusStates | Focused, Unfocused | | ValidationStates | Valid, Invalid | 对于我们的等待指示器控件，它的状态比较简单，只需要支持以下状态： - **非活动状态**：Inactive（不可见且无动画） - **活动状态**：Active（可见且有动画） - **静态状态**：Static（仅在设计器中显示控件时使用，可见但无动画） 由于这些状态相互排斥，我们只需要一个名为 `CommonStates` 的状态组，在控件模板中定义如下： ```xml <ControlTemplate TargetType="local:WaitIndicator"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Inactive" /> <VisualState x:Name="Static" /> <VisualState x:Name="Active" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <!-- 此处省略控件默认/基础状态的 XAML --> </Border> </ControlTemplate> ``` #### 3. 实现状态 虽然我们已经定义了这些状态，但它们目前还没有实际作用。每个状态现在需要定义如何转换基础状态，以直观地表明自定义控件处于该状态，这通过作为每个状态一部分定义的动画来实现。 一般规则是，在每个状态组中定义一个初始状态，该状态为空（即不对基础状态进行修改），这为控件提供了一个可以返回的起点。等待指示器控件的初始状态是 `Inactive` 状态，因此基础状态将根据 `Inactive` 状态的要求进行配置（之前定义基础状态时，我们将 `LayoutRoot` 的 `Opacity` 属性设置为 0，使控件内容不可见），所以在 `Inactive` 状态的定义中，我们不对基础状态进行更改。 接下来要实现的是 `Static` 状态，它会使等待指示器中的椭圆可见，但在此状态下不进行动画处理。在基础状态中，`Layou