WPF自定义控件(三)

今天我们开始制作我们的按钮，主要的效果就是一个按钮正常状态、鼠标滑过、按下三态显示不同的图片。

首先我们需要给扩展按钮添加三个属性，分别是正常状态图片，鼠标滑过图片，按钮按下图片。

先贴出ButtonEx类

    public class ButtonEx : Button
    {

        static ButtonEx()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonEx), new FrameworkPropertyMetadata(typeof(ButtonEx)));
        }

        [CategoryAttribute("自定义属性"),DescriptionAttribute("获取或设置默认的背景图片")]
        public ImageSource NormalImage
        {
            get { return (ImageSource)GetValue(NormalImageProperty); }
            set { SetValue(NormalImageProperty, value); }
        }

        // Using a DependencyProperty as the backing store for NormalImage.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty NormalImageProperty =
            DependencyProperty.Register("NormalImage", typeof(ImageSource), typeof(ButtonEx), null);

        [CategoryAttribute("自定义属性"),DescriptionAttribute("获取或设置鼠标滑过时的背景图片")]
        public ImageSource MouseOverImage
        {
            get { return (ImageSource)GetValue(MouseOverImageProperty); }
            set { SetValue(MouseOverImageProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MouseOverImage.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MouseOverImageProperty =
            DependencyProperty.Register("MouseOverImage", typeof(ImageSource), typeof(ButtonEx), null);

        [CategoryAttribute("自定义属性"),DescriptionAttribute("获取或设置鼠按钮按下时的背景图片")]
        public ImageSource PressImage
        {
            get { return (ImageSource)GetValue(PressImageProperty); }
            set { SetValue(PressImageProperty, value); }
        }

        // Using a DependencyProperty as the backing store for PressImage.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PressImageProperty =
            DependencyProperty.Register("PressImage", typeof(ImageSource), typeof(ButtonEx), null);

        [Browsable(false)]
        public new Brush Background
        {
            get { return base.Background; }
            set { base.Background = value; }
        }

        [Browsable(false)]
        public new Brush BorderBrush
        {
            get { return base.BorderBrush; }
            set { base.BorderBrush = value; }
        }
    }

我们这里定义了主要的三个属性

下面通过xaml来定义样式

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfCustomControlLibrary1">
    <Style TargetType="{x:Type local:ButtonEx}">
        <!--Setter是一个设置器，用来设置该Style要对TargetType的哪些属性或对象进行设置，所以这里设置了ButtonEx属性NormalImage属性设置了一张图片-->
        <Setter Property="NormalImage" Value="/WpfCustomControlLibrary1;component/Images/button_normal.png"></Setter>
        <Setter Property="MouseOverImage" Value="/WpfCustomControlLibrary1;component/Images/button_hover.png"></Setter>
        <Setter Property="PressImage" Value="/WpfCustomControlLibrary1;component/Images/button_pushed.png"></Setter>
        <Setter Property="Width" Value="72"/>
        <Setter Property="Height"  Value="28"/>
        <!--Template属性决定了将来ButtonEx的样式,该属性是ControlTemplate类型的-->
        <Setter Property="Template">
            <Setter.Value>
                <!--实例化一个ControlTemplate实体，赋值给Template属性-->
                <ControlTemplate TargetType="{x:Type local:ButtonEx}">
                    <Grid>
                        <!--用于指定控件处于特定状态时如何更改控件的外观,这是一组外观变化-->
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <!--设置状态变化所需要的时间-->
                                <VisualStateGroup.Transitions>
                                    <!--需要声明从什么状态变为另一种状态及状态变化所需要的时间-->
                                    <VisualTransition From="Noraml" To="MouseOver" GeneratedDuration="00:00:0.15" />
                                    <VisualTransition From="MouseOver" To=" Normal" GeneratedDuration="00:00:0.15"/>
                                    <VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="00:00:0.15"/>
                                </VisualStateGroup.Transitions>
                                <!--定义状态,自然状态，一个状态下需要几个特性，需要使用动画板来控制-->
                                <VisualState x:Name="Normal">
                                    <!--故事板能够用TargetProperty和TargetName属性指向一个特定的属性和特定的元素，
                                        故事版在动画和希望应用动画的属性之间架起了一座桥梁，同一个故事版中放置几个动画，
                                        并且每个动画可以用于不同的元素和属性-->
                                    <!--一个控制板将属性和动画联系在一起，当为自然状态下，将自然状态下的图片Opacity属性设置为1，然后将鼠标滑过和按下状态Opacity设置成0，
                                         注意：一定要将后两种状态Opacity设置成0，不然有可能是1，这样可能得到我们不想要的效果-->
                                    <Storyboard>
                                        <!--动画有两种，一种是在一个开始值和结束值之间以逐步增加的方式(被称为线性插值过程)改变属性的动画，
                                            以及从一个值突然变成另一个值的动画，第一种很好理解，第二种都是使用关键帧动画的技术，多数以
                                            "类型名+AnimationUsingKeyFrames"的形式命名的，下面使用的就是这种动画类型-->
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Normal" Storyboard.TargetProperty="(Opacity)">
                                            <!--获取或设置应到达关键帧的目标 System.Windows.Media.Animation.DoubleKeyFrame.Value 的时间。获取或设置关键帧的目标值。-->
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"></EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_MouseOver" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"></EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"></EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <!--鼠标按下状态-->
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1">
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Normal" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_MouseOver" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"></EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_MouseOver" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"></EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Normal" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <!--这里放了一张图片元素，所以正常情况下，NormalImage属性图片会显示到按钮上-->
                        <Image Source="{TemplateBinding NormalImage}" Name="PART_Normal"></Image>
                        <Image Source="{TemplateBinding PressImage}" Name="PART_Pressed"></Image>
                        <Image Source="{TemplateBinding MouseOverImage}" Name="PART_MouseOver"></Image>
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        </Border>
                        <!--绑定了ButtonEx的Content属性-->
                        <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

所有的难以理解的都加上注释了