WPF自定义控件与样式(2)-自定义按钮FButton

一、创建新属性

namespace LTControlLibrary.WPF.Controls
{
    public class FButton:Button
    {
        //依赖属性
        //ependencyProperty.Register("属性名",属性的数据类型,属性的拥有者的类型,元数据)
        //依赖属性命名规则：属性名 + Property
        public static readonly DependencyProperty PressedBackgroundProperty =
            DependencyProperty.Register("PressedBackground", typeof(Brush), typeof(FButton)
                                                   , new PropertyMetadata(Brushes.DarkBlue)
                                       );
       
        //将该依赖属性包装成普通属性
        [CategoryAttribute("自定义属性"), DescriptionAttribute("获取或设置鼠标按下背景样式")]
        public Brush PressedBackground
        {
            get { return (Brush)GetValue(PressedBackgroundProperty); }
            set { SetValue(PressedBackgroundProperty, value); }
        }

        static FButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(FButton), new FrameworkPropertyMetadata(typeof(FButton)));
            //是用来重写自定义控件的元数据，因为WPF不支持父类样式自动应用于子类
        }
    }
}

二、资源词典 -> 样式

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:LTControlLibrary.WPF.Controls">
    <!--引用样式-->
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/LTControlLibrary;component/Themes/Colors.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    
    <!--样式类型是 FButton-->
    <Style TargetType="{x:Type local:FButton}">
        <Setter Property="PressedBackground" Value="{StaticResource ButtonPressedBackground}" />
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="30" />
        <Setter Property="FontSize" Value="13" />

        <Setter Property="Template">
            <Setter.Value>
                <!--FButton模板-->
                <ControlTemplate>
                    <!--{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}
                         绑定在Template使用者元素的属性上Background
                     -->
                    <Border x:Name="border" Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}" 
                                    Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Height}" 
                                    CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CornerRadius}" 
                                    Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Width}">
                        <!--Icon/Text-->
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" 
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                            <TextBlock x:Name="icon"  Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FIconMargin}" 
                           RenderTransformOrigin="0.5,0.5" Style="{StaticResource FIcon}"
                           Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIcon}" 
                           FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIconSize}" 
                           Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Foreground}">
                    <TextBlock.RenderTransform>
                        <RotateTransform x:Name="transIcon" Angle="0"/>
                    </TextBlock.RenderTransform>
                            </TextBlock>

                            <TextBlock VerticalAlignment="Center"  x:Name="txt" 
                           TextDecorations="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=ContentDecorations}" 
                                               Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}" 
                                               FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FontSize}" 
                                               Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Foreground}"></TextBlock>
                        </StackPanel>
                    </Border>
                    <!--触发器-->
                    <ControlTemplate.Triggers>
                        <!--设置鼠标进入时的背景、前景样式-->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 
                                Path=MouseOverBackground}" TargetName="border" />
                            <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 
                                Path=MouseOverForeground}" TargetName="icon"/>
                            <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 
                                Path=MouseOverForeground}" TargetName="txt"/>
                        </Trigger>
                        <!--Ficon的动画触发器-->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="true"></Condition>
                                <Condition Property="AllowsAnimation" Value="true"></Condition>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="180" Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                        <!--鼠标按下时的前景、背景样式-->
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 
                                Path=PressedBackground}" TargetName="border" />
                            <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 
                                Path=PressedForeground}" TargetName="icon"/>
                            <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, 
                                Path=PressedForeground}" TargetName="txt"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" Value="0.5" TargetName="border"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

http://www.cnblogs.com/anding/category/421292.html