Sliverlight实例之 使用 ControlTemplate 自定义按钮的外观

按钮,最终效果,如下图:

Sliverlight实例之 使用 ControlTemplate 自定义按钮的外观_第1张图片

 

见Project21_ButtonSkin

 

1, 创建Sliverlight项目

 Sliverlight实例之 使用 ControlTemplate 自定义按钮的外观_第2张图片

说明:

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 中打开按钮的默认模板和样式

Sliverlight实例之 使用 ControlTemplate 自定义按钮的外观_第3张图片 

 

(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>

 

你可能感兴趣的:(template)