首页 > 其他 > 详细

WPF控件库:图片按钮的封装

时间:2014-05-19 07:03:29      阅读:454      评论:0      收藏:0      [点我收藏+]

需求:很多时候界面上的按钮都需要被贴上图片,一般来说:

1.按钮处于正常状态,按钮具有背景图A

2.鼠标移至按钮上方状态,按钮具有背景图B

3.鼠标点击按钮状态,按钮具有背景图C

4.按钮处于不可用状态,按钮具有背景图D

实现起来,毫无疑问,没什么难度。但是过程还是比较繁琐。这里我将这个过程封装为新的控件类:ImageButton

ImageButton中有四个属性(支持绑定),分别对应上面A、B、C、D四个背景图的路径。

bubuko.com,布布扣
#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
bubuko.com,布布扣

 

然后重写按钮的Style,Style保存在资源字典中:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

然后在构造函数中将按钮的Style改为写好的Style:

bubuko.com,布布扣
#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
bubuko.com,布布扣

 

通过这样的封装,图片按钮使用起来就非常的方便了:

bubuko.com,布布扣
            <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>
bubuko.com,布布扣

源代码下载地址:(不要积分)http://download.csdn.net/detail/lyclovezmy/7356841

WPF控件库:图片按钮的封装,布布扣,bubuko.com

WPF控件库:图片按钮的封装

原文:http://www.cnblogs.com/DoNetCoder/p/3732310.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!