コントロールテンプレートから一般的な背景イメージのバインディングを作成する方法は？

Question

私はこのスタイルでボタンがあります：あなたは、私は、ボタンのTagプロパティにImageSourceは結合しています見ることができるように

<Style TargetType="Button" x:Key="btnStyle"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="Button"> 
          <Image x:Name="img" Source="{TemplateBinding Tag}" Margin="{TemplateBinding Margin}" 
           Stretch="None"></Image> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsPressed" Value="true"> 
            <Setter TargetName="img" Property="Source" Value="{DynamicResource imgClose_P}"/> 
           </Trigger> 
           <Trigger Property="IsMouseOver" Value="true"> 
            <Setter TargetName="img" Property="Source" Value="{DynamicResource imgClose_H}"/> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 

を。 と私は、このビットマップを保存するのResourceDictionaryにそれを結合していTagプロパティに：

<BitmapImage x:Key="imgClose_N" UriSource="..\AppImages\mainWindow\TopBanner\CloseButton_sN.png" /> 

これは私に異なる背景画像とのテンプレートを使用してアプリケーションを介して、この「IMAGEBUTTON」すべてを使用することができます。 この一般的なアプローチをトリガーで維持する方法は問題ですか？ 私は、背景画像を変更するにはIsMouseOverトリガをしたいと思いますが、コントロールのいくつかのプロパティにバインドすると、それはハードコントロールテンプレートにコーディング書くことではありません。 これはどのようにすることができますか？すでに「IMAGEBUTTONを」それを呼び出すことにより、提案として、あなたは

Answer 1

Buttonから派生して、例えばに結合するいくつかの画像のプロパティを定義することができBackgroundImage、MouseOverImageなど

Buttonから派生する代わりに、画像を設定して、あなたのスタイルのものにバインドするattached propertiesを使用することであろうが、これらの添付プロパティにもなりません。これは、どこかで定義されなければならないだろうそれはより簡単です。

public class ImageButton : Button 
{ 
    public static readonly DependencyProperty NormalBackgroundImageProperty = DependencyProperty.Register(
     "NormalBackgroundImage", typeof(ImageSource), typeof(ImageButton)); 

    public static readonly DependencyProperty MouseOverBackgroundImageProperty = DependencyProperty.Register(
     "MouseOverBackgroundImage", typeof(ImageSource), typeof(ImageButton)); 

    public static readonly DependencyProperty PressedBackgroundImageProperty = DependencyProperty.Register(
     "PressedBackgroundImage", typeof(ImageSource), typeof(ImageButton)); 

    public ImageSource NormalBackgroundImage 
    { 
     get { return (ImageSource)GetValue(NormalBackgroundImageProperty); } 
     set { SetValue(NormalBackgroundImageProperty, value); } 
    } 

    public ImageSource MouseOverBackgroundImage 
    { 
     get { return (ImageSource)GetValue(MouseOverBackgroundImageProperty); } 
     set { SetValue(MouseOverBackgroundImageProperty, value); } 
    } 

    public ImageSource PressedBackgroundImage 
    { 
     get { return (ImageSource)GetValue(PressedBackgroundImageProperty); } 
     set { SetValue(PressedBackgroundImageProperty, value); } 
    } 
} 

と、以下の適切なスタイル：

は、ここで最初のソリューションの例です。このスタイルでは、ボタンのコンテンツにはContentPresenterもあり、TemplateBindingsの代わりにRelativeSource={RelativeSource TemplatedParent}という正規のバインディングを使用することに注意してください。これらは実行時に評価されます。

<Style TargetType="local:ImageButton"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:ImageButton"> 
       <Grid Margin="{TemplateBinding Margin}"> 
        <Image x:Name="img" Source="{Binding NormalBackgroundImage, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None"/> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter TargetName="img" Property="Source" Value="{Binding MouseOverBackgroundImage, RelativeSource={RelativeSource TemplatedParent}}"/> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="true"> 
         <Setter TargetName="img" Property="Source" Value="{Binding PressedBackgroundImage, RelativeSource={RelativeSource TemplatedParent}}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

あなたはクラスImageButtonを含む名前空間/アセンブリへのマッピングとXAML名前空間localを定義したり、交換する必要があります。

ボタンは、このように使用することができます

<local:ImageButton 
    Margin="10" 
    NormalBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" 
    PressedBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" 
    MouseOverBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" 
    Content="Click Me"/>