WPF botón Storyboard con una imagen de MouseOver

Question

Tengo el siguiente XAML para cambiar la imagen de botón WPF cuando el ratón está sobre el botón. Se dan a continuación error. Cualquier ayuda se agradece ...

'System.Windows.Media.Animation.DoubleAnimation' animación de objetos no puede ser utilizado para animar la propiedad 'Origen', ya que es de tipo incompatible '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

El DoubleAnimation se utiliza para animar una propiedad de dependencia de tipo doble. Por lo tanto, no se puede utilizar para 'animar' una fuente de imagen. Para llevar a cabo lo que está haciendo, me gustaría ir sobre él un poco diferente. Me ato la fuente de imagen a una propiedad del código detrás, y capturar los eventos MouseEnter y MouseLeave a cambiar esta propiedad.

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>

Código Detrás:

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