1

Estoy intentando poner una animación del background de un botón al que he tenido que cambiarle el template y no consigo que funcione. Creo que lo que pasa es que al cambiar el template ya se va toda la configuración al carajo y yo no controlo totalmente aún. Hasta ahora tengo esto:

<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="{StaticResource degOperaciones}"
                                >
                        <ContentPresenter
                                Margin="2"                            
                                Width="154"                            
                                HorizontalAlignment="Center"
                                TextBlock.TextAlignment="Center"
                                VerticalAlignment="Center"
                                RecognizesAccessKey="True"/>
                    </Border>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
             <EventTrigger RoutedEvent="Button.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                   Duration="0:0:0.5" Storyboard.TargetProperty="(Button.FontSize)" From="10" 
                                                     To="20">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

            <EventTrigger RoutedEvent="Button.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="0:0:0.5" Storyboard.TargetProperty="(Button.FontSize)"
                                From="20" To="10"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                  Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                  From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

        </Style.Triggers>        
    </Style>

Los dos triggers que cambian el tamaño de la letra funcionan pero el que cambia el color no funciona por alguna razón que no alcanzo a entender. Alguna idea? Gracias de antemano. :)

1
  • Primero: tienes 2 veces el evento MouseEnter, puedes poner 2 animaciones en un mismo StoryBoard, segundo: lo que quieres hacer es factible hacer con VisualStates en vez de Triggers.. Te dejaré un ejemplo
    – Leodev
    Commented el 20 ene. 2020 a las 17:59

1 respuesta 1

0

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 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:

<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, 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>

Quedo atento.

2
  • Gracias, he aprendido un montón con tu ejemplo. hehe. Ahora tengo otro reto que superar, que voy a poner en otra pregunta...¿se puede animar un background de un textbox de un color degradado a otro degradado? voy a crear el hilo...
    – seloram
    Commented el 22 ene. 2020 a las 1:50
  • Claro que se puede! Voy a verlo de inmediato.
    – Leodev
    Commented el 22 ene. 2020 a las 4:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.