WPF Button Storyboard с изображением для MouseOver

Question

У меня есть следующий xaml для изменения изображения для кнопки WPF, когда мышь находится на кнопке. Это дает ниже ошибку. Любая помощь приветствуется ...

Объект анимации 'System.Windows.Media.Animation.DoubleAnimation' нельзя использовать для анимации свойства 'Source', поскольку он имеет несовместимый тип '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
    }
}