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

一．前言.效果图

申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等

还是先看看效果图吧：

　　定义Button按钮名称叫FButton，主要是集成了字体图标（参考上一篇：WPF自定义控件与样式1-矢量字体图标(iconfont)）。其实在WPF里，要实现本文FButton的需求，完全可以不用自定义控件，使用样式、模板就可以搞定了的。

二．按钮FButton控件定义

2.1 FButton继承自微软基础控件Button （C#代码）

　　FButton继承自微软基础控件Button，没有什么逻辑代码，主要扩展了几个属性：

控件外观控制的属性，如圆角、鼠标悬浮前景色背景色、是否开启动画（鼠标悬停时小图标转一圈，移开又转回去）、鼠标按下颜色等；
字体图标相关属性，如字符值、字体图标大小、字体图标间距等。

详见代码：

/// <summary>

    /// FButton.xaml 的交互逻辑

    /// </summary>

    public partial class FButton : Button

    {

        public static readonly DependencyProperty PressedBackgroundProperty =

            DependencyProperty.Register("PressedBackground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.DarkBlue));

        /// <summary>

        /// 鼠标按下背景样式

        /// </summary>

        public Brush PressedBackground

        {

            get { return (Brush)GetValue(PressedBackgroundProperty); }

            set { SetValue(PressedBackgroundProperty, value); }

        }

        public static readonly DependencyProperty PressedForegroundProperty =

            DependencyProperty.Register("PressedForeground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.White));

        /// <summary>

        /// 鼠标按下前景样式（图标、文字）

        /// </summary>

        public Brush PressedForeground

        {

            get { return (Brush)GetValue(PressedForegroundProperty); }

            set { SetValue(PressedForegroundProperty, value); }

        }

        public static readonly DependencyProperty MouseOverBackgroundProperty =

            DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.RoyalBlue));

        /// <summary>

        /// 鼠标进入背景样式

        /// </summary>

        public Brush MouseOverBackground

        {

            get { return (Brush)GetValue(MouseOverBackgroundProperty); }

            set { SetValue(MouseOverBackgroundProperty, value); }

        }

        public static readonly DependencyProperty MouseOverForegroundProperty =

            DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.White));

        /// <summary>

        /// 鼠标进入前景样式

        /// </summary>

        public Brush MouseOverForeground

        {

            get { return (Brush)GetValue(MouseOverForegroundProperty); }

            set { SetValue(MouseOverForegroundProperty, value); }

        }

        public static readonly DependencyProperty FIconProperty =

            DependencyProperty.Register("FIcon", typeof(string), typeof(FButton), new PropertyMetadata("\ue604"));

        /// <summary>

        /// 按钮字体图标编码

        /// </summary>

        public string FIcon

        {

            get { return (string)GetValue(FIconProperty); }

            set { SetValue(FIconProperty, value); }

        }

        public static readonly DependencyProperty FIconSizeProperty =

            DependencyProperty.Register("FIconSize", typeof(int), typeof(FButton), new PropertyMetadata());

        /// <summary>

        /// 按钮字体图标大小

        /// </summary>

        public int FIconSize

        {

            get { return (int)GetValue(FIconSizeProperty); }

            set { SetValue(FIconSizeProperty, value); }

        }

        public static readonly DependencyProperty FIconMarginProperty = DependencyProperty.Register(

            "FIconMargin", typeof(Thickness), typeof(FButton), new PropertyMetadata(new Thickness(, , , )));

        /// <summary>

        /// 字体图标间距

        /// </summary>

        public Thickness FIconMargin

        {

            get { return (Thickness)GetValue(FIconMarginProperty); }

            set { SetValue(FIconMarginProperty, value); }

        }

        public static readonly DependencyProperty AllowsAnimationProperty = DependencyProperty.Register(

            "AllowsAnimation", typeof(bool), typeof(FButton), new PropertyMetadata(true));

        /// <summary>

        /// 是否启用Ficon动画

        /// </summary>

        public bool AllowsAnimation

        {

            get { return (bool)GetValue(AllowsAnimationProperty); }

            set { SetValue(AllowsAnimationProperty, value); }

        }

        public static readonly DependencyProperty CornerRadiusProperty =

            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(FButton), new PropertyMetadata(new CornerRadius()));

        /// <summary>

        /// 按钮圆角大小,左上，右上，右下，左下

        /// </summary>

        public CornerRadius CornerRadius

        {

            get { return (CornerRadius)GetValue(CornerRadiusProperty); }

            set { SetValue(CornerRadiusProperty, value); }

        }

        public static readonly DependencyProperty ContentDecorationsProperty = DependencyProperty.Register(

            "ContentDecorations", typeof(TextDecorationCollection), typeof(FButton), new PropertyMetadata(null));

        public TextDecorationCollection ContentDecorations

        {

            get { return (TextDecorationCollection)GetValue(ContentDecorationsProperty); }

            set { SetValue(ContentDecorationsProperty, value); }

        }

        static FButton()

        {

            DefaultStyleKeyProperty.OverrideMetadata(typeof(FButton), new FrameworkPropertyMetadata(typeof(FButton)));

        }

    }

2.2 FButton控件模板定义

　　模板内容分为两部分，第一部分为为基本结构，第二部分就是触发器，用触发器实现按钮不同状态的样式控制，详见代码：

<!--FButton模板-->

    <ControlTemplate x:Key="FButton_Template" TargetType="{x:Type local:FButton}">

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

2.3 FButton基本样式

　　样式定义代码：

<!--默认样式-->

    <Style TargetType="{x:Type local:FButton}">

        <Setter Property="Background" Value="{StaticResource ButtonBackground}" />

        <Setter Property="Foreground" Value="{StaticResource ButtonForeground}" />

        <Setter Property="MouseOverBackground" Value="{StaticResource ButtonMouseOverBackground}" />

        <Setter Property="MouseOverForeground" Value="{StaticResource ButtonMouseOverForeground}" />

        <Setter Property="PressedBackground" Value="{StaticResource ButtonPressedBackground}" />

        <Setter Property="PressedForeground" Value="{StaticResource ButtonPressedForeground}" />

        <Setter Property="HorizontalContentAlignment" Value="Center" />

        <Setter Property="Width" Value="100" />

        <Setter Property="Height" Value="30" />

        <Setter Property="FontSize" Value="13" />

        <Setter Property="CornerRadius" Value="0" />

        <Setter Property="FIconSize" Value="22" />

        <Setter Property="Template" Value="{StaticResource FButton_Template}"/>

        <Setter Property="Padding" Value="3,1,3,1" />

        <Setter Property="Content" Value="{x:Null}" />

        <Setter Property="FIconMargin" Value="0,0,5,0" />

        <Setter Property="AllowsAnimation" Value="False" />

    </Style>

基本按钮的效果，参考（一．前言-效果图），示例代码：

<StackPanel >

            <core:FButton FIcon="" Margin="3">系统换转</core:FButton>

            <core:FButton FIcon="" Margin="3" Width="140" Height="40" Background="#771C79" MouseOverBackground="#F20BA0"  Click="FButton_Click" >WaitingBox</core:FButton>

            <core:FButton FIcon="" Margin="3" Width="140" Height="40" Background="#12B512" IsDefault="True" MouseOverBackground="#08EE08" Click="FButton_Click_WindowBase">WindowBase</core:FButton>

            <core:FButton FIcon="" Margin="5,0,0,0" CornerRadius="16,0,0,16" AllowsAnimation="True" Click="FButton_Click_Info">Info</core:FButton>

            <core:FButton FIcon="" CornerRadius="0" Click="FButton_Click_Question">Question</core:FButton>

            <core:FButton FIcon="" CornerRadius="0" Click="FButton_Click_Warning">Warining</core:FButton>

            <core:FButton FIcon="" CornerRadius="0,16,16,0" AllowsAnimation="True" Click="FButton_Click_Error">Error</core:FButton>

        </StackPanel>

2.4 FButton透明背景样式

　　背景透明效果的按钮样式

<!--背景透明的FButton样式-->

    <Style x:Key="FButton_Transparency" TargetType="{x:Type local:FButton}">

        <Setter Property="Background" Value="Transparent" />

        <Setter Property="MouseOverBackground" Value="Transparent" />

        <Setter Property="PressedBackground" Value="Transparent" />

        <Setter Property="Foreground" Value="{StaticResource TextForeground}" />

        <Setter Property="MouseOverForeground" Value="{StaticResource MouseOverForeground}" />

        <Setter Property="PressedForeground" Value="{StaticResource PressedForeground}" />

        <Setter Property="HorizontalContentAlignment" Value="Center" />

        <Setter Property="Height" Value="Auto" />

        <Setter Property="Width" Value="Auto" />

        <Setter Property="CornerRadius" Value="0" />

        <Setter Property="FontSize" Value="13" />

        <Setter Property="FIconSize" Value="20" />

        <Setter Property="Template" Value="{StaticResource FButton_Template}"/>

        <Setter Property="Padding" Value="3,1,3,1" />

        <Setter Property="Content" Value="{x:Null}" />

        <Setter Property="FIconMargin" Value="0,0,2,0" />

        <Setter Property="AllowsAnimation" Value="False" />

        <Setter Property="Cursor" Value="Hand" />

    </Style>

示例及效果：

<core:FButton FIcon="" Margin="5" FIconMargin="0" FIconSize="30" Style="{StaticResource FButton_Transparency}" ></core:FButton>

            <core:FButton FIcon="" Margin="5" Style="{StaticResource FButton_Transparency}"></core:FButton>

            <core:FButton FIcon="" Margin="5" Style="{StaticResource FButton_Transparency}" IsEnabled="False"></core:FButton>

            <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}">如何开启调试模式?</core:FButton>

            <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}" IsEnabled="False">设备检测</core:FButton>

            <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}">爸爸回来了</core:FButton>

2.3 类似LinkButton（超链接）样式

样式定义：

<!--LinkButton的FButton样式，默认无FIcon-->

    <Style x:Key="FButton_LinkButton" TargetType="{x:Type local:FButton}">

        <Setter Property="Background" Value="Transparent" />

        <Setter Property="MouseOverBackground" Value="Transparent" />

        <Setter Property="PressedBackground" Value="Transparent" />

        <Setter Property="Foreground" Value="{StaticResource LinkForeground}" />

        <Setter Property="MouseOverForeground" Value="{StaticResource MouseOverForeground}" />

        <Setter Property="PressedForeground" Value="{StaticResource PressedForeground}" />

        <Setter Property="HorizontalContentAlignment" Value="Center" />

        <Setter Property="Height" Value="Auto" />

        <Setter Property="Width" Value="Auto" />

        <Setter Property="CornerRadius" Value="0" />

        <Setter Property="FontSize" Value="13" />

        <Setter Property="FIconSize" Value="20" />

        <Setter Property="Template" Value="{StaticResource FButton_Template}"/>

        <Setter Property="Padding" Value="3,1,3,1" />

        <Setter Property="Content" Value="{x:Null}" />

        <Setter Property="FIconMargin" Value="0" />

        <Setter Property="FIcon" Value="" />

        <Setter Property="AllowsAnimation" Value="False" />

        <Setter Property="ContentDecorations" Value="Underline" />

        <Setter Property="Cursor" Value="Hand" />

    </Style>

示例及效果：

 <core:FButton Margin="3,15" Style="{StaticResource FButton_LinkButton}" >如何开启调试模式?</core:FButton>

            <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_LinkButton}">设备检测</core:FButton>

            <core:FButton Margin="3" Style="{StaticResource FButton_LinkButton}">爸爸回来了</core:FButton>

原文地址：http://www.cnblogs.com/anding/p/4968050.html

【转】WPF自定义控件与样式(2)-自定义按钮FButton的更多相关文章

WPF自定义控件与样式(2)-自定义按钮FButton
一．前言.效果图申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...
WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...
【转】WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 自定义Window窗体样式: 基于自定义窗体实现自定义MessageB ...
WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...
WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...
WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...
WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Pro ...

随机推荐

像素鸟游戏开发教程 FlappyBird Game development tutorial
像素鸟游戏开发教程 FlappyBird Game development tutorial 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com ...
BZOJ.5404.party(树链剖分 bitset Hall定理)
题目链接只有指向父节点的单向道路,所以c个人肯定在LCA处汇合.那么就成了有c条到LCA的路径,求最大的x,满足能从c条路径中各选出x个数,且它们不同. 先要维护一条路径的数的种类数,可以树剖+每条 ...
20172302《程序设计与数据结构》实验四Android程序设计实验报告
课程:<程序设计与数据结构> 班级: 1723 姓名: 侯泽洋学号:20172302 实验教师:王志强老师实验日期:2018年5月30日必修/选修: 必修 1.实验内容 (1)And ...
android: shell 命令
adb是Android重要工具之一,以提供强大的特性,例如复制文件到设备或从设备复制文件.可以使用Android Shell命令行参数连接到手机本身,并发送基本的 shell 命令. 进入命令行,使用 ...
修改文件夹的protection level之后，哪个job会来执行re-stripe的操作呢？
有下面的一些job可能参与其中的,他们的描述如下: AutoBalance,AutoBalanceLin - Balances free space in the cluster. The goal ...
Tkinter(2.x 与3.X的区别)
1.包的引入 2.X下是 from Tkinter import * 而3.x是 from tkinter import * 否则,会报找不到tkinter的错误 Traceback (most re ...
15款HTML5/CSS3案例展示，导航，日历，钟表。
对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单图标动画 ...
Ubuntu 下搭建 Android 开发环境(图文)
转自 http://dawndiy.com/archives/153/ 1.安装JDK 1.下载JDK 目前最新的JDK版本是:Java SE Development Kit 7u5 下载地址: 查看 ...
Java常用测试工具
第一部分:九款性能测试 Java入门如果你才刚开始接触Java世界,那么要做的第一件事情是,安装JDK——Java Development Kit(Java开发工具包),它自带有Java Runti ...
【C语言】数组名传递给函数，数组的sizeof变为4的原因
C语言中,数组名作为参数传递给函数时,退化为指针,sizeof对指针操作结果应该是4.例子如下: #include<iostream> using namespace std; void ...

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

【转】WPF自定义控件与样式(2)-自定义按钮FButton的更多相关文章

随机推荐

热门专题