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