我们知道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的类层次结构:
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>
运行效果:
鼠标经过时,是另外一个背景
自定义按钮长得这么漂亮,肯定需要样式的支持:
<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>