WPF按鈕與熱圖像

Question

   <Button Margin="10,0,2,0" Width="90" Command="Open"> 
        <Button.Style> 
         <Style TargetType="Button"> 
          <Setter Property="Content" Value="{Binding Source={StaticResource tstImage}}"/> 
          <Style.Triggers> 
           <Trigger Property="IsMouseOver" Value="true"> 
            <Setter Property="Content" Value="{Binding Source={StaticResource tstImage1}}"/> 
           </Trigger> 
           <Trigger Property="IsEnabled" Value="False"> 
            <Setter Property="Content" Value="{Binding Source={StaticResource tstImage2}}"/> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </Button.Style> 
       </Button> 

我想創建一個按鈕支持熱圖像：當鼠標懸停在按鈕上，圖像更改爲另一個。 我使用上面的代碼實現了一個按鈕實例。但實際上我想創建一個模板，每個按鈕都可以使用這種風格。爲每個按鈕編寫相同的樣式非常麻煩。

我覺得應該想：

<Style TargetType="Button"> 
     <Setter Property="Content" Value="{Binding Source= normalImage"/> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="true"> 
       <Setter Property="Content" Value="{Binding Source=hotImage"/> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter Property="Content" Value="{Binding Source=disableImage"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

再使用的樣式，如：

<Button command="Open" normalImage="icon1.png" hotImage="icon2.png" disableImage="icon3.png"/> 

我是一個新鮮到WPF，我已經嘗試了許多方法可以做到這一點，但仍然停留在這個問題。 我想創建一個可應用於每個按鈕的模板或樣式。第二和第三個片段是我想要達到的。但它不起作用。在第二個片段中，normalImage，hotImage和disableImage是動態路徑，可以通過按鈕指定，就像我在第三個片段中所寫的一樣。 請幫忙。謝謝。

我試圖使用附加屬性，但我遇到了另一個問題： Style binding attached-property didn't show up anything

Answer 1

我解決它自己通過附加屬性。它可以幫助其他人，所以我張貼我的代碼。

首先，創建附加屬性：

class ImageAttached : DependencyObject 
{ 
    public static Image GetNormalImage(DependencyObject obj) 
    { 
     return (Image)obj.GetValue(NormalImageProperty); 
    } 

    public static void SetNormalImage(DependencyObject obj, Image value) 
    { 
     obj.SetValue(NormalImageProperty, value); 
    } 

    // Using a DependencyProperty as the backing store for NormalImage. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty NormalImageProperty = 
     DependencyProperty.RegisterAttached("NormalImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null)); 

    public static Image GetHotImage(DependencyObject obj) 
    { 
     return (Image)obj.GetValue(HotImageProperty); 
    } 

    public static void SetHotImage(DependencyObject obj, Image value) 
    { 
     obj.SetValue(HotImageProperty, value); 
    } 

    // Using a DependencyProperty as the backing store for HotImage. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty HotImageProperty = 
     DependencyProperty.RegisterAttached("HotImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null)); 


    public static Image GetDisableImage(DependencyObject obj) 
    { 
     return (Image)obj.GetValue(DisableImageProperty); 
    } 

    public static void SetDisableImage(DependencyObject obj, Image value) 
    { 
     obj.SetValue(DisableImageProperty, value); 
    } 

    // Using a DependencyProperty as the backing store for DisableImage. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty DisableImageProperty = 
     DependencyProperty.RegisterAttached("DisableImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null)); 
} 

其次，創建一個樣式目標按鈕：

 <Style x:Key="btnStyle" TargetType="{x:Type Button}"> 
     <Setter Property="Content" Value="{Binding Path=(local:ImageAttached.NormalImage), RelativeSource={RelativeSource Self}}"/> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="true"> 
       <Setter Property="Content" Value="{Binding Path=(local:ImageAttached.HotImage), RelativeSource={RelativeSource Self}}"/> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter Property="Content" Value="{Binding Path=(local:ImageAttached.DisableImage), RelativeSource={RelativeSource Self}}"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

最後，使用它。 e.g：

 <Button x:Name="btn1" Click="Button_Click_1" Width="100" Height="48" Style="{DynamicResource btnStyle}" 
      local:ImageAttached.NormalImage="{StaticResource tstImage}" 
      local:ImageAttached.HotImage="{StaticResource tstImage2}" 
      local:ImageAttached.DisableImage="{StaticResource tstImage1}"/>