WPFコントロールライブラリ:画像ボタンのパッケージ

需要:多くの場合、インタフェースのボタンに画像を貼る必要があります.一般的には:
1.ボタンは正常な状態にあり、ボタンには背景図Aがある
2.マウスがボタンの上に移動した状態で、ボタンに背景図Bがある
3.マウスクリックボタンの状態、ボタンに背景図Cがある
4.ボタンは使用不可状態であり、ボタンは背景図Dを有する
実現すれば、間違いなく、難しくない.しかし、過程は煩雑だ.ここではこのプロセスを新しいコントロールクラスにカプセル化します:ImageButton
ImageButtonには、上のA、B、C、Dの4つの背景図のパスに対応する4つの属性(バインドサポート)があります.

#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