Como bien te menciono en el comentario de tu post, puedes poner 2 animaciones en el mismo StoryBoard
perfectamente, ya que veo que tienes "MouseEnter
" 2 veces..
Pero volviendo a la solución, te dejo un ejemplo de como se hace lo que pides usando VisualStates
:
Este es un ejemplo que hice con un botón genérico al que le asigné el estilo de un Diccionario de Recursos
que tengo aparte llamado Button.xaml y al que le hice una instancia global en el App.xaml.. el código es el siguiente:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="cambiarTemplate" TargetType="Button">
<Setter Property="FocusVisualStyle"
Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" BorderBrush="Black" BorderThickness="4" TextBlock.Foreground="Black" CornerRadius="8,8,8,8" TextBlock.FontWeight="ExtraBold" Background="LightSkyBlue" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" To="Normal"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Button.FontSize)" From="12" To="20"/>
<ColorAnimationUsingKeyFrames AutoReverse="True" BeginTime="0" Duration="0:0:00.25" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" >
<SplineColorKeyFrame KeyTime="0" Value="GreenYellow"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<!-- TODO -->
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="2" Width="154" HorizontalAlignment="Center" TextBlock.TextAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Con eso solo defines tu template "normal" y el VisualState
de MouseEnter
, de este modo el MouseLeave
se auto-genera cuando MouseEnter
es falso..
El ejemplo transforma el botón a color GreenYellow
y aumenta el tamaño de la fuente y al sacar el cursor de encima genera la misma animación pero a la inversa, por eso no es necesario que tu mismo escribas el "MouseLeave
".
Quizás no es igual al código que tienes pero seguro lo podrás entender ya que es muy sencillo.
OJO! Que también puedes agregarle los Triggers si quieres más funcionalidad, ambas cosas no son excluyentes entre si.
Quedo atento.