带有 MouseOver 图像的 WPF 按钮故事板答案

【问题标题】：WPF Button Storyboard with an image for MouseOver带有 MouseOver 图像的 WPF 按钮故事板
【发布时间】：2010-03-29 22:31:43
【问题描述】：

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

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

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

【问题讨论】：

标签： wpf

【解决方案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
    }
}

【讨论】：