لوحة القصة المصورة 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

يتم استخدام التثبيت المزدوج لتحريك خاصية التبعية من النوع المزدوج. لذلك ، لا يمكن استخدامه "لتحريك" مصدر الصورة. لإنجاز ما تفعله ، كنت سأقوم بذلك بشكل مختلف قليلاً. سأربط مصدر الصورة بخاصية الكود وراء ، والتقاط أحداث 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
    }
}