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

来源：互联网发布：嘻哈摇滚知乎编辑：程序博客网时间：2024/05/29 09:44

一、创建新属性

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

0 0