wpf研究之道——自定义Button控件

我们知道WPF中普通的按钮,长得丑,所以自定义按钮,在所难免。我们给按钮添加 MoveBrush,EnterBrush两把刷子,其实就是鼠标经过和鼠标按下的效果。只不过这不是普通的刷子,而是带图片的ImageBrush刷子。

  public class ShareButton : Button
{
/// <summary>
/// 鼠标移走
/// </summary>
public static readonly DependencyProperty MoveBrushProperty;
public Brush MoveBrush
{
set
{
base.SetValue(ShareButton.MoveBrushProperty, value);
}
get
{
return base.GetValue(ShareButton.MoveBrushProperty) as Brush;
}
}
public static readonly DependencyProperty EnterBrushProperty;
/// <summary>
/// 鼠标进入
/// </summary>
public Brush EnterBrush
{
set
{
base.SetValue(ShareButton.EnterBrushProperty, value);
}
get
{
return base.GetValue(ShareButton.EnterBrushProperty) as Brush;
}
}
static ShareButton()
{
//注册属性
ShareButton.MoveBrushProperty = DependencyProperty.Register("MoveBrush", typeof(Brush), typeof(ShareButton), new PropertyMetadata(null));
ShareButton.EnterBrushProperty = DependencyProperty.Register("EnterBrush", typeof(Brush), typeof(ShareButton), new PropertyMetadata(null));
FrameworkElement.DefaultStyleKeyProperty.OverrideMetadata(typeof(ShareButton), new FrameworkPropertyMetadata(typeof(ShareButton)));
}
public ShareButton()
{
base.Content = "";
}
}

从代码中可以看出,DependencyProperty MoveBrushProperty是个依赖属性,MoveBrush提供了对MoveBrushProperty属性的封装。那问题来了,什么是依赖属性?

传统中.net framework中的属性,也被称为CLR属性,它在实例化的时候会分配数据存储空间。而包含依赖属性的对象被称为依赖对象,它在实例化的时候并不会直接分配数据存储空间,而是保留了这样的分配能力。如果说,我们直接给这个依赖属性赋值的话,它才开始分配空间,如果它依赖于其它对象的话,也就是说,这个依赖属性的值是从其它对象那儿”拿来”的话,就不用分配内存了,而是需要绑定。

我查看了下Button的类层次结构:

wpf研究之道——自定义Button控件

Button: ButtonBase:ContentControl,因此我们自定义的 ShareButton继承自Button,自然是依赖对象,所以理所当然地可以自定义依赖属性了。

再来看看这个控件如何使用?

1、添加命名空间: xmlns:s="clr-namespace:ShareControl;assembly=ShareControl"

2、这是一个登陆按钮

  <s:ShareButton x:Name="btnLogin" Click="btnLogin_Click"  FontSize=""  Content="登  录"  Width="" Height="" Foreground="White" Cursor="Hand"  IsDefault="True">

                 <s:ShareButton.EnterBrush>
<ImageBrush ImageSource="Skin/Icon/login_button.png"/>
</s:ShareButton.EnterBrush>
<s:ShareButton.MoveBrush>
<ImageBrush ImageSource="Skin/Icon/login_button_hover.png"/>
</s:ShareButton.MoveBrush>
<s:ShareButton.Background>
<ImageBrush ImageSource="Skin/Icon/login_button.png"/>
</s:ShareButton.Background>
</s:ShareButton>

运行效果:

wpf研究之道——自定义Button控件

鼠标经过时,是另外一个背景

wpf研究之道——自定义Button控件

自定义按钮长得这么漂亮,肯定需要样式的支持:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ShareControl"> <Style x:Key="{x:Type local:ShareButton }" TargetType="{x:Type local:ShareButton}"> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ShareButton}">
<Border Name="border" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="{TemplateBinding Control.BorderThickness}" SnapsToDevicePixels="True" Width="{TemplateBinding FrameworkElement.Width}" Height="{TemplateBinding FrameworkElement.Height}" Background="{TemplateBinding Control.Background}">
<ContentPresenter Name="contentPresenter" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Focusable="False" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter TargetName="border" Value="{Binding MoveBrush, RelativeSource={RelativeSource TemplatedParent}}" Property="Border.Background" />
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter TargetName="border" Value="{Binding EnterBrush, RelativeSource={RelativeSource TemplatedParent}}" Property="Border.Background" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
上一篇:Android UI 统一修改Button控件的样式,以及其它系统控件的默认样式


下一篇:继续聊WPF——自定义CheckBox控件外观