Skip to main content
se añadieron 1067 caracteres en el cuerpo
Origen Enlace
Leodev
  • 1.4k
  • 1
  • 10
  • 16

Este es un ejemplo que hice con un botón genérico al que le asigné el estilo llamado 'cambiarTemplate' 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:

OJO! Que también puedes agregarle los Triggers si quieres más funcionalidad, ambas cosas no son excluyentes entre si, solo debes ponerlos en el lugar correcto y todo funcionará como corresponde.

<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>
                        <!-- CODIGO DE LOS VISUAL STATES -->
                    </VisualStateManager.VisualStateGroups>
                    
                    <ContentPresenter Margin="2" Width="154" HorizontalAlignment="Center" TextBlock.TextAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                </Border>
                
            </ControlTemplate>
        </Setter.Value>
    </Setter>       
    <Style.Triggers>
        <!-- CODIGO DE LOS TRIGGERS -->
    </Style.Triggers>        
</Style>

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:

OJO! Que también puedes agregarle los Triggers si quieres más funcionalidad, ambas cosas no son excluyentes entre si.

Este es un ejemplo que hice con un botón genérico al que le asigné el estilo llamado 'cambiarTemplate' 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:

OJO! Que también puedes agregarle los Triggers si quieres más funcionalidad, ambas cosas no son excluyentes entre si, solo debes ponerlos en el lugar correcto y todo funcionará como corresponde.

<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>
                        <!-- CODIGO DE LOS VISUAL STATES -->
                    </VisualStateManager.VisualStateGroups>
                    
                    <ContentPresenter Margin="2" Width="154" HorizontalAlignment="Center" TextBlock.TextAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                </Border>
                
            </ControlTemplate>
        </Setter.Value>
    </Setter>       
    <Style.Triggers>
        <!-- CODIGO DE LOS TRIGGERS -->
    </Style.Triggers>        
</Style>
Origen Enlace
Leodev
  • 1.4k
  • 1
  • 10
  • 16

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.