WPF按钮故事板与MouseOver图像

Question

当鼠标在按钮上时，我有以下xaml用于更改WPF按钮的图像。它给出下面的错误。任何帮助表示赞赏...

“System.Windows.Media.Animation.DoubleAnimation”动画对象不能用于动画属性“来源”，因为它是不兼容的类型“System.Windows.Media.ImageSource”的。

<Style TargetType="{x:Type local:ButtonControl}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:ButtonControl}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <DoubleAnimation 
               Storyboard.TargetName="img" 
               Storyboard.TargetProperty="Source" 
               To="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverImage}" 
               /> 
            </Storyboard> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
          <Border> 
           <Image x:Name="img" 
             Source="pack://application:,,,/Recipe_06_13;component/Resources/normal.bmp" 
           /> 
          </Border> 
        </Grid> 
       </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    </Style> 

Answer 1

DoubleAnimation用于为double类型的依赖项属性设置动画。因此，它不能用于'动画'的图像源。要完成你正在做的事情，我会稍微改变一下。我会将图像源绑定到后面的代码属性，并捕获MouseEnter和MouseLeave事件以更改此属性。

XAML

<Window x:Class="WpfApplication1.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="336" Width="354"> 
    <Grid x:Name="myGrid"> 
     <Image 
      x:Name="myImage" 
      Stretch="UniformToFill" 
      Source="{Binding MyImageSource}" 
      VerticalAlignment="Top" /> 
    </Grid> 
</Window> 

代码背后：

namespace WpfApplication1 
{ 
    using System.ComponentModel; 
    using System.Windows; 
    using System.Windows.Input; 

    /// <summary> 
    /// Interaction logic for Window1.xaml 
    /// </summary> 
    public partial class Window1 : Window, INotifyPropertyChanged 
    { 
     public Window1() 
     { 
      this.MyImageSource = "/image_normal.png"; 
      InitializeComponent(); 

      this.DataContext = this; 

      myImage.MouseEnter += new MouseEventHandler(myGrid_MouseEnter); 
      myImage.MouseLeave += new MouseEventHandler(myGrid_MouseLeave); 
     } 

     private string _myImageSource; 
     public string MyImageSource 
     { 
      get 
      { 
       return _myImageSource; 
      } 
      set 
      { 
       if (_myImageSource != value) 
       { 
        _myImageSource = value; 
        if (PropertyChanged != null) 
        { 
         PropertyChanged.Invoke(this, new PropertyChangedEventArgs("MyImageSource")); 
        } 
       } 
      } 
     } 

     void myGrid_MouseLeave(object sender, MouseEventArgs e) 
     { 
      this.MyImageSource = "/image_normal.png"; 
     } 

     void myGrid_MouseEnter(object sender, MouseEventArgs e) 
     { 
      this.MyImageSource = "/image_hover.png"; 
     } 

     #region INotifyPropertyChanged Members 

     public event PropertyChangedEventHandler PropertyChanged; 

     #endregion 
    } 
}