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