WPF botón Storyboard con una imagen de MouseOver
-
23-09-2019 - |
Pregunta
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>
Solución
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
}
}