基础skim：
修改控件的外观有两种方式：（1）通过样式。（2）修改模版。对于（1）样式就不说了，重点是（2），您可以通过修改或替换控件的ControlTemplate来完全替换控件的外观。自定义控件协定的实现体现在三个方面：部件、状态（组）、可视状态。创建控件时建议遵循此 部件&状态模型。那么，何为部件呢？我们来拆分ComboBox控件。如图：
部件 状态
ComboBox有5个命名部件，每个部件都由控件代码以编程的方式访问，例如当按下DropDownToggle时，弹出Popup并显示所有的项，单击某项时，该项将显示在ContentPresenter中。
可视转换是指当控件从一个状态进入另一个状态时控件的可视外观。
切入正题：
控件的属性来设置控件的外观是有限的，通过ControlTemplate能做设置属性来改变外观不能做的事情。方法是通过控件的Template属性来指定ControlTemplate，有3钟方式来设置Template属性的值：（1）内联定义ControlTemplate。（2）对ControlTemplate资源的引用。（3）对ControlTemplate Style样式的引用。
1 <Button Content="Custom">
2 <Button.Template>
3 <ControlTemplate TargetType="Button">
4 <!--Define you content here-->
5 </ControlTemplate>
6 </Button.Template>
7 </Button>
1 <Grid x:Name="LayoutRoot" Background="White">
2 <Grid.Resources>
3 <ControlTemplate x:Key="myCT" TargetType="Button">
4 <!--Define you content here-->
5 </ControlTemplate>
6 </Grid.Resources>
7 <Button Content="Custom" Template="{StaticResource myCT}"/>
8 </Grid>
View Code
1 <Grid x:Name="LayoutRoot" Background="White">
2 <Grid.Resources>
3 <ControlTemplate x:Key="myCT" TargetType="Button">
4 <!--Define you content here-->
5 </ControlTemplate>
6 <Style x:Key="myStyle" TargetType="Button">
7 <Setter Property="Template">
8 <Setter.Value>
9 <ControlTemplate TargetType="Button">
10 <!--Define you content here-->
11 </ControlTemplate>
12 </Setter.Value>
13 </Setter>
14 </Style>
15 </Grid.Resources>
16 <Button Content="Custom" Style="{StaticResource myStyle}"/>
17 </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元素上设置。