自定义控件

基础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元素上设置。

 

 

转载于:https://www.cnblogs.com/mehale/archive/2011/06/01/2066064.html