Sliverlight实例之 使用 ControlTemplate 自定义按钮的外观
按钮，最终效果，如下图：
见Project21_ButtonSkin
1， 创建Sliverlight项目
说明：
generic.xaml：样式和模板就被定义在这个文件里
MyButton.cs：控件的逻辑代码
2， 将下面两行代码添加到generic.xaml文件中
xmlns:src="clr-namespace:ButtonControlLibrary;assembly=ButtonControlLibrary"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
3，Copy按钮的默认的ControlTemplate
(1) 在Blend for VS 中打开按钮的默认模板和样式
(2) 将(1)中的按钮“默认模板和样式”xaml代码，Copy到generic.xaml文件中
4，创建初始ControlTemplate
(1) 删除 Setter 元素直到（但不包括）<Setter Property="Template">。
(2) 删除第一个 Grid 元素，但不删除它内部的元素。
(3) 删除所有 Storyboard 元素，包括它们内部的元素。
(4) 删除名为 Background 的 Border 元素，包括它内部的元素。
(5) 删除 ContentPresenter 元素。
(6) 删除名为 DisabledVisualElement 和 FocusVisualElement 的 Rectangle 元素。
Border、ContentPresenter 和 Rectangle 元素组成默认按钮控件的结构。
(7) 在 Style 元素中，将 TargetType 属性更改为 src:MyButton。
(8) 在 ControlTemplate 元素中，将 TargetType 属性更改为 src:MyButton。
5，在generic.xaml中，编辑自己的模板和样式
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:src="clr-namespace:ButtonControlLibrary;assembly=ButtonControlLibrary" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"> <!-- 一,创建初始 ControlTemplate 二,创建可视结构 step 1,2,3,4,5,6,7 三,根据状态定义外观 step 8,9,10,11,12 四,指定可视行为 step 13 五,引用样式 step14 --> <Style x:Key="ButtonStyle1" TargetType="src:MyButton" > <!--step7 设置该按钮的默认属性--> <Setter Property="Background" Value="Navy"/> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Width" Value="100"/> <Setter Property="Height" Value="40"/> <Setter Property="Margin" Value="10"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="src:MyButton"> <!-- step1 一个名为 RootElement 的 Border--> <Border x:Name="RootElement"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <!--step13 使用 VisualTransition 可以指定控件转换为特定状态所耗费的时间。GeneratedDuration 属性指定转换所需的时间 --> <vsm:VisualStateGroup.Transitions> <!--指定该按钮应经过百分之一秒才进入按下状态--> <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.01" /> <!--指定该按钮应经过半秒才进入鼠标悬停状态--> <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" /> <!-- 指定该按钮应经过百分之一秒才从按下状态进入鼠标悬停状态--> <vsm:VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.01" /> <!-- 指定当控件从鼠标悬停状态转换为正常状态时某动画产生动作--> <vsm:VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:1.5"> <!-- 当用户将鼠标指针从按钮上移开时，按钮的边框在 1.5 秒内先变为蓝色，然后变为黄色，最后变为黑色--> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="BorderBrush" FillBehavior="HoldEnd" > <ColorAnimationUsingKeyFrames.KeyFrames> <LinearColorKeyFrame Value="Blue" KeyTime="0:0:0.5" /> <LinearColorKeyFrame Value="Yellow" KeyTime="0:0:1" /> <LinearColorKeyFrame Value="Black" KeyTime="0:0:1.5" /> </ColorAnimationUsingKeyFrames.KeyFrames> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualTransition> </vsm:VisualStateGroup.Transitions> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <!--step8 将鼠标指针移到按钮上方时，按钮边框会设为红色--> <Storyboard> <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Red" /> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <!--step9 当按钮处于按下状态时，按钮边框会设为透明--> <Storyboard > <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Transparent" /> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <!--step10 这使得当处于禁用状态时，DisabledRect 的 Opacity 会设为 1。这样将会在按钮的 IsEnabled 属性设置为 false 时显示 DisabledRect--> <Storyboard> <DoubleAnimation Storyboard.TargetName="DisabledRect" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <!--step11 --> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unfocused"> <!--step12 --> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <!--step2 按钮的背景--> <Border.Background> <SolidColorBrush x:Name="BorderBrush" Color="Black"/> </Border.Background> <!--step3 作为 RootElement 的子级的 Grid--> <Grid Background="{TemplateBinding Background}" Margin="4"> <!--step4 指示按钮是否具有焦点的 Rectangle--> <Rectangle Name="FocusVisual" Visibility="Collapsed" Margin="2" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" StrokeDashArray="1.5 1.5"/> <!-- step5 一个显示按钮内容的 ContentPresenter--> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4" /> <!--step6 在禁用按钮时使按钮变灰的 Rectangle--> <Rectangle x:Name="DisabledRect" Fill="#A5FFFFFF" Opacity="0" IsHitTestVisible="false" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- step14 --> <Style TargetType="src:MyButton" BasedOn="{StaticResource ButtonStyle1}"></Style> </ResourceDictionary>
6，使用自定义控件
在generic.xaml中,引用样式
<!-- step14 --> <Style TargetType="src:MyButton" BasedOn="{StaticResource ButtonStyle1}"></Style>
在页面中，添加引用
xmlns:blib="clr-namespace:ButtonControlLibrary;assembly=ButtonControlLibrary"
在页面中，创建两个Button
<StackPanel> <blib:MyButton Content="Button1" /> <blib:MyButton Content="Button2" Background="Purple" /> </StackPanel>
