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

一.前言.效果图

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

还是先看看效果图吧:

二.按钮FButton控件定义

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

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

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

详见代码:

 
    /// 
    /// FButton.xaml 的交互逻辑
    /// 

    public partial class FButton : Button
    {
        public static readonly DependencyProperty PressedBackgroundProperty =
            DependencyProperty.Register("PressedBackground", typeof(Brush), typeof(FButton), new PropertyMetadata(Brushes.DarkBlue));
        /// 
        /// 鼠标按下背景样式
        /// 
        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));
        /// 
        /// 鼠标按下前景样式(图标、文字)
        /// 
        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));
        /// 
        /// 鼠标进入背景样式
        /// 
        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));
        /// 
        /// 鼠标进入前景样式
        /// 
        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"));
        /// 
        /// 按钮字体图标编码
        /// 
        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));
        /// 
        /// 按钮字体图标大小
        /// 
        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)));
        /// 
        /// 字体图标间距
        /// 
        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));
        /// 
        /// 是否启用Ficon动画
        /// 
        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)));
        /// 
        /// 按钮圆角大小,左上,右上,右下,左下
        /// 
        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控件模板定义

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

 
    
    
        
            
            
                
                    
                        
                    
                

                
            
        
        
        
            
            
                
                
                
            
            
            
                
                    
                    
                
                
                    
                        
                            
                        
                    
                
                
                    
                        
                            
                        
                    
                
            
            
            
                
                
                
            
            
                
            
        
    
 

2.3 FButton基本样式

  样式定义代码:  

 
    
    
 

  基本按钮的效果,参考(一.前言-效果图),示例代码:

 
        
            系统换转
            WaitingBox
            WindowBase

            Info
            Question
            Warining
            Error
        
 

2.4 FButton透明背景样式

   背景透明效果的按钮样式 

 
    
    
 

  示例及效果:

 
            
            
            


            如何开启调试模式?
            设备检测
            爸爸回来了
 

  

2.3 类似LinkButton(超链接)样式

样式定义:

 
    
    
 

示例及效果:

            如何开启调试模式?
            设备检测
            爸爸回来了

你可能感兴趣的:(WPF自定义控件与样式(2)-自定义按钮FButton)