Storyboard do botão WPF com uma imagem para MouseOver
-
23-09-2019 - |
Pergunta
Eu tenho o seguinte xaml para alterar a imagem do botão WPF quando o mouse está no botão.Dá erro abaixo.Qualquer ajuda é apreciada...
O objeto de animação 'System.Windows.Media.Animation.DoubleAnimation' não pode ser usado para animar a propriedade 'Source' porque é do tipo incompatível '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>
Solução
O DoubleAnimation é usado para animar uma propriedade de dependência do tipo double.Portanto, não pode ser usado para “animar” uma fonte de imagem.Para realizar o que você está fazendo, eu faria isso de maneira um pouco diferente.Eu vincularia a fonte da imagem a uma propriedade do código por trás e capturaria os eventos MouseEnter e MouseLeave para alterar essa propriedade.
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 por trá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
}
}