WPF Button Storyboard con un'immagine per MouseOver
-
23-09-2019 - |
Domanda
ho il seguente codice XAML per cambiare l'immagine pulsante WPF quando il mouse è sul pulsante. Si dà errore sotto. Ogni aiuto è apprezzato ...
oggetto di animazione 'System.Windows.Media.Animation.DoubleAnimation' non può essere utilizzato per animare proprietà 'Source' perché è di tipo incompatibile '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>
Soluzione
Il DoubleAnimation viene utilizzata per animare una proprietà di dipendenza di tipo double. Pertanto, non può essere utilizzato per 'animare' una sorgente di immagini. Per fare quello che stai facendo, vorrei andare su di esso un po 'diverso. Mi piacerebbe impegnare la sorgente di immagini a una proprietà del codice dietro, e catturare gli eventi e MouseEnter MouseLeave a modificare questa proprietà.
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>
Codice Dietro:
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
}
}