首页 > 代码库 > WPF控件库：图片按钮的封装

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

2024-07-04 18:32:12   224人阅读

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

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


联系
我们