自定义控件

基础skim：

      修改控件的外观有两种方式：（1）通过样式。（2）修改模版。对于（1）样式就不说了，重点是（2），您可以通过修改或替换控件的ControlTemplate来完全替换控件的外观。自定义控件协定的实现体现在三个方面：部件、状态（组）、可视状态。创建控件时建议遵循此 部件&状态模型。那么，何为部件呢？我们来拆分ComboBox控件。如图：

      部件      状态

ComboBox有5个命名部件，每个部件都由控件代码以编程的方式访问，例如当按下DropDownToggle时，弹出Popup并显示所有的项，单击某项时，该项将显示在ContentPresenter中。

可视转换是指当控件从一个状态进入另一个状态时控件的可视外观。

切入正题：

      控件的属性来设置控件的外观是有限的，通过ControlTemplate能做设置属性来改变外观不能做的事情。方法是通过控件的Template属性来指定ControlTemplate，有3钟方式来设置Template属性的值：（1）内联定义ControlTemplate。（2）对ControlTemplate资源的引用。（3）对ControlTemplate Style样式的引用。

<Button Content="Custom">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <!--Define you content here-->
                </ControlTemplate>
            </Button.Template>
 </Button>

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <ControlTemplate x:Key="myCT" TargetType="Button">
                <!--Define you content here-->
            </ControlTemplate>
        </Grid.Resources>
        <Button Content="Custom" Template="{StaticResource myCT}"/>
</Grid>

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <ControlTemplate x:Key="myCT" TargetType="Button">
                <!--Define you content here-->
            </ControlTemplate>
            <Style x:Key="myStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <!--Define you content here-->
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Button Content="Custom" Style="{StaticResource myStyle}"/>
 </Grid>

笔者：推荐使用Style来设置Template属性。

      修改默认外观的按钮之后，当按钮处于不同的状态时（MouseHover,MouseDown）不会有相应的外观变化。所以我们需要根据控件的状态更改控件的外观。使用VisualState对象来指定控件处于特定状态下的外观，VisualState包含Storyboard。无需对Storyboard做任何操作，它是由VisualStateManager来更改状态，当控件进入VisualState.Name属性指定的状态时，Storyboard开始工作，当控件退出该状态时，Storyboard停止工作。

控件状态由位于该控件的类定义的TemplateVisualStateAttribute指定。[TemplateVisualStateAttribute(Name="Normal",GroupName="CommonStates")]。

由外层至内依次是：

 

<VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
 　　
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="borderBg" Storyboard.TargetProperty="Color" To="Red" Duration="0:0:0.1"></ColorAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="borderBg" Storyboard.TargetProperty="Color" To="Transparent" Duration="0:0:0.1"></ColorAnimation>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

注意：该属性的位置必须是位于ControlTemplate的根FrameworkElemet元素上设置。