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}"/>