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

最新推荐文章于 2024-09-28 18:16:50 发布
最新推荐文章于 2024-09-28 18:16:50 发布
阅读量425 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJianDong/article/details/103740682
版权

一．前言.效果图

　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 

还是先看看效果图吧：

二．按钮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(20));
        /// <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(0, 1, 3, 1)));
        /// <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(2)));
        /// <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="&#xe602;" Margin="3">系统换转</core:FButton>
            <core:FButton FIcon="&#xe628;" Margin="3" Width="140" Height="40" Background="#771C79" MouseOverBackground="#F20BA0"  Click="FButton_Click" >WaitingBox</core:FButton>
            <core:FButton FIcon="&#xe629;" Margin="3" Width="140" Height="40" Background="#12B512" IsDefault="True" MouseOverBackground="#08EE08" Click="FButton_Click_WindowBase">WindowBase</core:FButton>

            <core:FButton FIcon="&#xe64f;" Margin="5,0,0,0" CornerRadius="16,0,0,16" AllowsAnimation="True" Click="FButton_Click_Info">Info</core:FButton>
            <core:FButton FIcon="&#xe628;" CornerRadius="0" Click="FButton_Click_Question">Question</core:FButton>
            <core:FButton FIcon="&#xe628;" CornerRadius="0" Click="FButton_Click_Warning">Warining</core:FButton>
            <core:FButton FIcon="&#xe629;" 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="&#xe627;" Margin="5" FIconMargin="0" FIconSize="30" Style="{StaticResource FButton_Transparency}" ></core:FButton>
            <core:FButton FIcon="&#xe628;" Margin="5" Style="{StaticResource FButton_Transparency}"></core:FButton>
            <core:FButton FIcon="&#xe629;" Margin="5" Style="{StaticResource FButton_Transparency}" IsEnabled="False"></core:FButton>


            <core:FButton FIcon="&#xe60e;" Margin="3" Style="{StaticResource FButton_Transparency}">如何开启调试模式?</core:FButton>
            <core:FButton FIcon="&#xe617;" Margin="3" Style="{StaticResource FButton_Transparency}" IsEnabled="False">设备检测</core:FButton>
            <core:FButton FIcon="&#xe629;" 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="&#xe617;" Margin="3" Style="{StaticResource FButton_LinkButton}">设备检测</core:FButton>
            <core:FButton Margin="3" Style="{StaticResource FButton_LinkButton}">爸爸回来了</core:FButton>
问·道
关注
WPF自定义控件与样式(15)-终结篇 & 系列文章索引 & 源码共享
LJianDong的博客
11-07 724
系列文章目录 WPF自定义控件与样式(1)-矢量字体图标(iconfont) WPF自定义控件与样式(2)-自定义按钮FButton WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展 WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式 WPF自定义控件与样式...
WPF自定义控件和样式之自定义按钮（Button）
08-27
接触WPF也有两个多月了，有了一定的理论基础和项目经验，现在打算写一个系列，做出来一个WPF的控件库。下面这篇文章主要给大家介绍了关于WPF自定义控件和样式之自定义按钮（Button）的相关资料，需要的朋友可以参考下。
WPF自定义控件 —— 装饰器
weixin_30414305的博客
09-16 400
顾名思义就是装饰用的，也就是说不改变原有的控件结构，但可以为控件添加一些新的功能，或是为控件的显示外观增加些东西。如MSDN中的例子： 本来TextBox四角没有圆点，但是通过装饰器可以为它加上。所以可以看成在TextBox上加了层。 这样就“无痛”的给控件进行了装饰。当然应用不单单这样加几个点而已，修饰嘛比如拖动控件的修饰 而之前比较著名的层拖拽是Bea Sto...
WPF入门教学二十三 自定义控件开发
最新发布
Life is not divided
09-28 982
自定义控件提供了更高级的功能，允许开发者继承并扩展WPF框架中的现有控件。完成自定义控件的开发后，可以在其他WPF项目中引用并使用它。
WPF自定义控件与样式-自定义按钮（Button）
weixin_33733810的博客
04-03 443
一、前言 程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。 二、固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。 2.1 普通按钮-扁平化风格 先看效果： 定义Button的样式，详见代码： <Style x:Key="BtnIn...
WPF自定义控件
wmjcom的专栏
06-15 8099
WPF自定义控件 —— 自绘篇本文示例源代码或素材下载      首先我们来说最简单的画面的呈现。　　一.在自定义控件上画矩形　　增加一个自定义控件类:　　　　打开创建的类重载OnRender函数并注释掉静态构造函数，代码如下　public　class　CustomerRender　:　Control　　　　{　　　　　　　　//static　CustomerRender()　　　　　　　　//{
【转】WPF自定义控件与样式(2)-自定义按钮FButton
weixin_34345560的博客
12-19 552
一．前言.效果图 申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等 还是先看看效果图吧：  　　 　   　　定义Button按钮名称叫FButton，主要是集成了字体图标（参考上一篇：WPF自定义控件与样式1-矢量字体图标(iconfont)）。其实在WPF里，要实现本文FButton的需求，完全可以不用自定义控件，使用样式、模板就可以搞定了的...
WPF 自定义控件库 常用控件封装&常用控件样式重写
03-26
总结，"WPF 自定义控件库 常用控件封装&常用控件样式重写"涉及到的核心技术包括WPF控件的封装、样式重写和控件库的构建，这些都是提升WPF应用界面设计和用户体验的关键手段。通过深入理解和运用这些知识，开发者能够...
WPF自定义时间控件，可选择日期、时间
04-13
总之，创建一个WPF自定义DateTimePicker控件涉及多个步骤，包括控件的设计、数据绑定、事件处理和样式定义。通过这种方式，开发者可以满足特定的界面需求，提供更符合用户体验的日期和时间选择功能。在实际项目中，...
WPF-自定义控件
05-18
资源中包括自己写的控件和修改别人的集成到自己的控件。主要有：温度计控件、Win8转圈等待控件、车速仪表控件、微信圆球摆动控件、加载等待转圈控件等包括源码，欢迎下载
WPF 自定义控件
08-18
自定义控件
WPF自定义控件（按钮文本框组合框等等）
08-27
WPF 自定义控件（包含全部代码） 自定义按钮、自定义文本框、自定义组合框、自定义日期控件等等
PropertyTools:WPF的自定义控件
05-02
控制 描述 地位 PropertyGrid 显示对象或对象集合的属性的控件。 稳定的 数据网格 具有“ Excel感觉”的数据网格（请注意，控件未虚拟化） 稳定的 树形列表框 看起来和感觉都像TreeView ListBox （支持多选和拖放） 稳定的 颜色选择器 拾色器 稳定的 单选按钮列表 绑定到枚举的单选按钮的集合 稳定的 枚举菜单项 绑定到枚举的可检查菜单项的集合 稳定的 EditableTextBlock 可以更改为TextBox TextBlock ，对于在TreeView中进行就地编辑很有用 稳定的 文件选择器 带有浏览文件按钮的TextBox 稳定的 目录选择器 具有浏览目录按钮的TextBox 稳定的 DockPanelSplitter DockPanel的分配器 稳定的 旋转控制 数字向上/向下微调器控件 稳定的 链接块 TextBlock上的超链接 稳
wpf自定义按钮样式
StevenChen的博客
05-23 459
来定义当鼠标悬停和按钮被按下时的视觉变化。你可以根据需要自定义。修改border元素的背景色为LightBlue。修改border元素的背景色为DarkBlue。在WPF中，自定义按钮样式可以通过创建一个。首先，在你的WPF项目资源字典中定义按钮的。这个例子中的按钮模板包括一个。来定义按钮的外观，以及。
WPF 自定义各类按钮样式
热门推荐
韬光养晦
03-15 1万+
WPF 自定义按钮样式 Xaml代码： <Window x:Class="WPF0315b.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
WPF自定义模板--Button
代码改变世界
07-02 722
WPF自定义模板--Button
WPF - 自定义控件
xwnxwn的专栏
01-28 339
自定义控件是一个类，它提供自己的样式和模板，这些样式和模板通常在 generic.xaml 中定义。自定义控件用于以下方案 −如果该控件不存在，则必须从头开始创建它。如果要通过添加额外的属性或额外的功能来扩展或向预先存在的控件添加功能，以适合您的特定方案。如果您的控件需要支持主题和样式。如果要跨应用程序共享控件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值