zoukankan      html  css  js  c++  java
  • WPF自定义控件(一)——Button

      接触WPF也有两个多月了,有了一定的理论基础和项目经验,现在打算写一个系列,做出来一个WPF的控件库。一方面可以加强自己的水平,另一方面可以给正在学习WPF的同行一个参考。本人水平有限,难免有一些错误,望各位指出!

      先上图看看各种效果:

      这个Button是我继承系统Button后扩展的,主要实现了:可设置悬浮和按下时的背景,可改变形状,并可设置按钮按下后保持锁定状态等功能。

      这个Button我命名为XButton,扩展的所有属性我都会以X开头命名。好了,具体的东西看代码吧!

      先来Xaml的:

      

     1 <ResourceDictionary
     2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4     xmlns:ctrl="clr-namespace:KAN.WPF.XCtrl.Controls">
     5     <Style x:Key="{x:Type ctrl:XButton}" TargetType="{x:Type ctrl:XButton}">
     6         <Style.Resources>
     7             <ResourceDictionary Source="/KAN.WPF.Xctrl;component/Themes/CommonStyle.xaml"/>
     8         </Style.Resources>
     9         <Setter Property="FocusVisualStyle" Value="{StaticResource StyleFocusVisual}"/>
    10         <Setter Property="Background" Value="White"/>
    11         <Setter Property="BorderBrush" Value="Silver"/>
    12         <Setter Property="BorderThickness" Value="1"/>
    13         <Setter Property="Control.Template">
    14             <Setter.Value>
    15                 <ControlTemplate TargetType="{x:Type ctrl:XButton}">
    16                     <!--定义视觉树-->
    17                     <Grid>
    18                         <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
    19                             <!--这里的Path就是用来实现各种外形的-->
    20                             <Path x:Name="bdrButton"
    21                                    Data="{Binding XShape, RelativeSource={RelativeSource TemplatedParent}}" 
    22                                    Stroke="{Binding XStrokeBrush, RelativeSource={RelativeSource TemplatedParent}}"
    23                                    StrokeThickness="{Binding XStrokeThickness, RelativeSource={RelativeSource TemplatedParent}}"
    24                                    Stretch="Fill" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Control.Background}">
    25                                 <Path.RenderTransform>
    26                                     <TransformGroup>
    27                                         <ScaleTransform/>
    28                                         <SkewTransform/>
    29                                         <RotateTransform/>
    30                                         <TranslateTransform/>
    31                                     </TransformGroup>
    32                                 </Path.RenderTransform>
    33                             </Path>
    34                         </Border>
    35                         <ContentPresenter Name="contentPresenter" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
    36                                           ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Focusable="False" RecognizesAccessKey="True" 
    37                                           SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Content="{TemplateBinding ContentControl.Content}" 
    38                                           HorizontalAlignment="Center" VerticalAlignment="Center" />
    39                     </Grid>
    40                     <!--设置触发器-->
    41                     <ControlTemplate.Triggers>
    42                         <!--鼠标移动上去时-->
    43                         <Trigger Property="UIElement.IsMouseOver" Value="True" >
    44                             <Setter TargetName="bdrButton" Value="{Binding XMoverBrush, RelativeSource={RelativeSource TemplatedParent}}" Property="Path.Fill" />
    45                         </Trigger>
    46                         <!--鼠标按下去时-->
    47                         <Trigger Property="ButtonBase.IsPressed" Value="True">
    48                             <Setter TargetName="bdrButton" Value="{Binding XEnterBrush, RelativeSource={RelativeSource TemplatedParent}}" Property="Path.Fill" />
    49                         </Trigger>
    50                         <!--禁用Button时-->
    51                         <Trigger Property="IsEnabled" Value="false">
    52                             <Setter TargetName="bdrButton" Value="{Binding XUnEnabledBrush, RelativeSource={RelativeSource TemplatedParent}}" Property="Path.Fill" />
    53                         </Trigger>
    54                         <!--如果设置了锁住按下的状态的属性,那么当按下时-->
    55                         <MultiTrigger>
    56                             <MultiTrigger.Conditions>
    57                                 <Condition Property="IsFocused" Value="True"/>
    58                                 <Condition Property="XIsFoucedBrushLock" Value="True"/>
    59                             </MultiTrigger.Conditions>
    60                             <MultiTrigger.Setters>
    61                                 <Setter TargetName="bdrButton" Value="{Binding XEnterBrush, RelativeSource={RelativeSource TemplatedParent}}" Property="Path.Fill" />
    62                             </MultiTrigger.Setters>
    63                         </MultiTrigger>
    64                     </ControlTemplate.Triggers>
    65                 </ControlTemplate>
    66             </Setter.Value>
    67         </Setter>
    68     </Style>
    69 </ResourceDictionary>

      其中的StyleFocusVisual是用来定义按Tab到这个控件上的样式的,代码如下:

     1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     3     <Style x:Key="StyleFocusVisual">
     4         <Setter Property="Control.Template">
     5             <Setter.Value>
     6                 <ControlTemplate>
     7                     <Border Margin="0" BorderBrush="#FF9FBDF4" BorderThickness="1"/>
     8                 </ControlTemplate>
     9             </Setter.Value>
    10         </Setter>
    11     </Style>
    12 </ResourceDictionary>

      接下来是CS的:

      

      1 using System;
      2 using System.Windows;
      3 using System.Windows.Controls;
      4 using System.Windows.Media;
      5 using System.Windows.Shapes;
      6 using System.Windows.Media.Imaging;
      7 
      8 namespace KAN.WPF.XCtrl.Controls
      9 {
     10     /// <summary>
     11     /// 扩展按钮:可设置悬浮和按下时的背景,可改变形状,并可设置按钮按下后保持锁定状态
     12     /// </summary>
     13     public class XButton : Button
     14     {
     15         #region 依赖属性
     16         public static readonly DependencyProperty XMoverBrushProperty;//鼠标经过时的画刷
     17         public static readonly DependencyProperty XEnterBrushProperty;//鼠标按下时的画刷
     18         public static readonly DependencyProperty XUnEnabledBrushProperty;//禁用时的画刷
     19         public static readonly DependencyProperty XIsFoucedBrushLockProperty;//是否得到焦点时锁住画刷
     20         public static readonly DependencyProperty XShapeProperty;//外形的路径
     21         public static readonly DependencyProperty XStrokeBrushProperty;//外形的路径着色
     22         public static readonly DependencyProperty XStrokeThicknessProperty;//外形的路径粗细(默认为0,因为有Border边框,所以要设这个值,要先把BorderThickness设为0)
     23         #endregion
     24 
     25         #region 内部方法
     26         /// <summary>
     27         /// 静态构造方法
     28         /// </summary>
     29         static XButton()
     30         {
     31             //注册依赖属性
     32             XButton.XMoverBrushProperty = DependencyProperty.Register("XMoverBrush", typeof(Brush), typeof(XButton), 
     33                 new PropertyMetadata(Brushes.WhiteSmoke));
     34             XButton.XEnterBrushProperty = DependencyProperty.Register("XEnterBrush", typeof(Brush), typeof(XButton),
     35                 new PropertyMetadata(Brushes.Silver));
     36             XButton.XUnEnabledBrushProperty = DependencyProperty.Register("XUnEnabledBrush", typeof(Brush), typeof(XButton), 
     37                 new PropertyMetadata(Brushes.Silver));
     38             XButton.XStrokeBrushProperty = DependencyProperty.Register("XStrokeBrush", typeof(Brush), typeof(XButton),
     39                 new PropertyMetadata(Brushes.Silver));
     40             XButton.XStrokeThicknessProperty = DependencyProperty.Register("XStrokeThickness", typeof(Double), typeof(XButton),
     41                 new PropertyMetadata(0.0));
     42             XButton.XIsFoucedBrushLockProperty = DependencyProperty.Register("XIsFoucedBrushLock", typeof(bool), typeof(XButton),
     43                 new PropertyMetadata(false));
     44             XButton.XShapeProperty = DependencyProperty.Register("XShape", typeof(string), typeof(XButton),
     45                 new PropertyMetadata("M 0 0 L 0 0 L 100 0 L 100 100 L 0 100 Z"));
     46             FrameworkElement.DefaultStyleKeyProperty.OverrideMetadata(typeof(XButton), new FrameworkPropertyMetadata(typeof(XButton)));
     47         }
     48         #endregion
     49 
     50         #region 公布属性
     51         /// <summary>
     52         /// 公布属性XMoverBrush(鼠标经过时的画刷)
     53         /// </summary>
     54         public Brush XMoverBrush
     55         {
     56             get
     57             {
     58                 return base.GetValue(XButton.XMoverBrushProperty) as Brush;
     59             }
     60             set
     61             {
     62                 base.SetValue(XButton.XMoverBrushProperty, value);
     63             }
     64         }
     65 
     66         /// <summary>
     67         /// 公布属性XMoverBrush(鼠标按下时的画刷)
     68         /// </summary>
     69         public Brush XEnterBrush
     70         {
     71             get
     72             {
     73                 return base.GetValue(XButton.XEnterBrushProperty) as Brush;
     74             }
     75             set
     76             {
     77                 base.SetValue(XButton.XEnterBrushProperty, value);
     78             }
     79         }
     80 
     81         /// <summary>
     82         /// 公布属性XUnEnabledBrush(禁用时的画刷)
     83         /// </summary>
     84         public Brush XUnEnabledBrush
     85         {
     86             get
     87             {
     88                 return base.GetValue(XButton.XUnEnabledBrushProperty) as Brush;
     89             }
     90             set
     91             {
     92                 base.SetValue(XButton.XUnEnabledBrushProperty, value);
     93             }
     94         }
     95 
     96         /// <summary>
     97         /// 公布属性XIsFoucedBrushLock(是否得到焦点时锁住画刷)
     98         /// </summary>
     99         public bool XIsFoucedBrushLock
    100         {
    101             get
    102             {
    103                 return (bool)base.GetValue(XButton.XIsFoucedBrushLockProperty);
    104             }
    105             set
    106             {
    107                 base.SetValue(XButton.XIsFoucedBrushLockProperty, value);
    108             }
    109         }
    110 
    111         /// <summary>
    112         /// 公布属性XShape(外形的路径)
    113         /// </summary>
    114         public String XShape
    115         {
    116             get
    117             {
    118                 return base.GetValue(XButton.XShapeProperty) as String;
    119             }
    120             set
    121             {
    122                 base.SetValue(XButton.XShapeProperty, value);
    123             }
    124         }
    125         
    126         /// <summary>
    127         /// 公布属性XStrokeBrush(外形的路径着色)
    128         /// </summary>
    129         public Brush XStrokeBrush
    130         {
    131             get
    132             {
    133                 return base.GetValue(XButton.XStrokeBrushProperty) as Brush;
    134             }
    135             set
    136             {
    137                 base.SetValue(XButton.XStrokeBrushProperty, value);
    138             }
    139         }
    140 
    141         /// <summary>
    142         /// 公布属性XStrokeThickness(外形的路径粗细)
    143         /// </summary>
    144         public Double XStrokeThickness
    145         {
    146             get
    147             {
    148                 return (Double)base.GetValue(XButton.XStrokeThicknessProperty);
    149             }
    150             set
    151             {
    152                 base.SetValue(XButton.XStrokeThicknessProperty, value);
    153             }
    154         }
    155         #endregion
    156     }
    157 }

      看了代码上的注释应该都能明白吧!要是有不明白的可以留言。

      至于源代码,我之后会整理几个控件后一起发上来的!

    本文为个人原创!欢迎各种形式的转载、引用!但请注明出处! 版权所有:覃宇琨
  • 相关阅读:
    [转]ASP.NET会话(Session)保存模式
    ASP.NET 2.0 实现伪静态网页方法
    显示带颜色的字符串
    sublime text 3.0使用
    sublime text插件
    cogs1715 动态逆序对
    双网卡bond
    解决CentOS6不能使用yum源
    查看磁盘io占用
    [office] 在word中的小技巧
  • 原文地址:https://www.cnblogs.com/QinYK/p/4075020.html
Copyright © 2011-2022 走看看