需求:很多时候界面上的按钮都需要被贴上图片,一般来说:
1.按钮处于正常状态,按钮具有背景图A
2.鼠标移至按钮上方状态,按钮具有背景图B
3.鼠标点击按钮状态,按钮具有背景图C
4.按钮处于不可用状态,按钮具有背景图D
实现起来,毫无疑问,没什么难度。但是过程还是比较繁琐。这里我将这个过程封装为新的控件类:ImageButton
ImageButton中有四个属性(支持绑定),分别对应上面A、B、C、D四个背景图的路径。
#region 属性 /// <summary> /// 按钮处于正常状态下的背景图片的路径 /// </summary> public string NormalBackgroundImage { get { return ( string ) GetValue ( NormalBackgroundImageProperty ); } set { SetValue ( NormalBackgroundImageProperty, value ); } } /// <summary> /// 鼠标移到按钮上面,按钮的背景图片的路径 /// </summary> public string MouseoverBackgroundImage { get { return ( string ) GetValue ( MouseoverBackgroundImageProperty ); } set { SetValue ( MouseoverBackgroundImageProperty, value ); } } /// <summary> /// 鼠标按下按钮,按钮的背景图片的路径 /// </summary> public string MousedownBackgroundImage { get { return ( string ) GetValue ( MousedownBackgroundImageProperty ); } set { SetValue ( MousedownBackgroundImageProperty, value ); } } /// <summary> /// 当按钮不可用时按钮的背景图片 /// </summary> public string DisabledBackgroundImage { get { return ( string ) GetValue ( DisabledBackgroundImageProperty ); } set { SetValue ( DisabledBackgroundImageProperty, value ); } } #endregion #region 依赖属性 /// <summary> /// 按钮处于正常状态下的背景图片的路径(这是依赖属性) /// </summary> public static readonly DependencyProperty NormalBackgroundImageProperty = DependencyProperty.Register ( "NormalBackgroundImage", typeof ( string ), typeof ( ImageButton ), new PropertyMetadata ( null ) ); /// <summary> /// 鼠标移到按钮上面,按钮的背景图片的路径(这是依赖属性) /// </summary> public static readonly DependencyProperty MouseoverBackgroundImageProperty = DependencyProperty.Register ( "MouseoverBackgroundImage", typeof ( string ), typeof ( ImageButton ), new PropertyMetadata ( null ) ); /// <summary> /// 鼠标按下按钮,按钮的背景图片的路径(这是依赖属性) /// </summary> public static readonly DependencyProperty MousedownBackgroundImageProperty = DependencyProperty.Register ( "MousedownBackgroundImage", typeof ( string ), typeof ( ImageButton ), new PropertyMetadata ( null ) ); /// <summary> /// 当按钮不可用时按钮的背景图片(这是一个依赖属性) /// </summary> public static readonly DependencyProperty DisabledBackgroundImageProperty = DependencyProperty.Register ( "DisabledBackgroundImage", typeof ( string ), typeof ( ImageButton ), new PropertyMetadata ( null ) ); #endregion
然后重写按钮的Style,Style保存在资源字典中:
<Style x:Key="ImageButtonStyle" TargetType="{x:Type local:ImageButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:ImageButton}"> <Border x:Name="buttonBorder"> <Border.Background> <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalBackgroundImage}"/> </Border.Background> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" TargetName="buttonBorder"> <Setter.Value> <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseoverBackgroundImage}"/> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" TargetName="buttonBorder"> <Setter.Value> <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MousedownBackgroundImage}"/> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="buttonBorder"> <Setter.Value> <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisabledBackgroundImage}"/> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
然后在构造函数中将按钮的Style改为写好的Style:
#region 构造函数 public ImageButton() : base() { //读取资源字典文件 ResourceDictionary rd = new ResourceDictionary(); rd.Source = new Uri ( "/Zmy.Wpf.Controls;component/Style.xaml", UriKind.Relative ); this.Resources.MergedDictionaries.Add ( rd ); //获取样式 this.Style = this.FindResource ( "ImageButtonStyle" ) as Style; } #endregion
通过这样的封装,图片按钮使用起来就非常的方便了:
<StackPanel Orientation="Vertical"> <controls:ImageButton Height="80" Width="80" NormalBackgroundImage="/Test;component/images/normal.png" MousedownBackgroundImage="/Test;component/images/mousedown.png" MouseoverBackgroundImage="/Test;component/images/mouseover.png"/> <controls:ImageButton Height="80" Width="80" IsEnabled="False" DisabledBackgroundImage="/Test;component/images/disabled.png"/> </StackPanel>
源代码下载地址:(不要积分)http://download.csdn.net/detail/lyclovezmy/7356841
原文:http://www.cnblogs.com/DoNetCoder/p/3732310.html