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

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

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