locked
Button Width/Height Animation While Disabled RRS feed

  • Question

  • Hi,

    I'm trying to create a button whose width and height both repeatedly animate from 100 to 110 and in reverse while the button is disabled.

    While enabled, I want the button to return to its original size, 100 x 100, and stay this way.

    For this purpose I use a trigger to property "IsEnabled" = "False", as may be seen below (near the bottom of the XAML).

    Yet, though I succeed in making some properties (like "Foreground" and "Background") change according to the state of the button (Enabled/Disabled), I fail to achieve above described animation effect.

    I'll be thankful for instructions how to fix my XAML.

    Ofer.

        <Style x:Key="RunButton" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="100"/>
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="FontSize" Value="15px"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}" />
            <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                        <GradientStop Color="LightCyan" Offset="0.33"/>
                        <GradientStop Color="LightBlue" Offset="0.66"/>
                        <GradientStop Color="LightSkyBlue" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="RunButtonBorder" Padding="4,2" BorderBrush="DarkGray" BorderThickness="5" CornerRadius="20" Background="{TemplateBinding Background}">
                            <Grid >
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="contentShadow" Style="{StaticResource ShadowStyle}">
                                </ContentPresenter>
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="RunButtonBorder" Property="BorderBrush" Value="#FF4788c8" />
                                <Setter Property="Foreground" Value="#FF4788c8" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" >
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="LightCyan" Offset="0.33"/>
                                            <GradientStop Color="LightGreen" Offset="0.66"/>
                                            <GradientStop Color="Orange" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="content" Property="RenderTransform" >
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsDefaulted" Value="True">
                                <Setter TargetName="RunButtonBorder" Property="BorderBrush" Value="#FF282828" />
                            </Trigger>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter TargetName="RunButtonBorder" Property="BorderBrush" Value="#FF282828" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="RunButtonBorder" Property="Opacity" Value="0.7" />
                                <Setter TargetName="RunButtonBorder" Property="BorderBrush" Value="Red" />
                                <Setter Property="Foreground" Value="Silver" />
                                <Setter TargetName="RunButtonBorder" Property="Background" >
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="Orange" Offset="0.25"/>
                                            <GradientStop Color="DarkOrange" Offset="0.50"/>
                                            <GradientStop Color="OrangeRed" Offset="0.75"/>
                                            <GradientStop Color="DarkRed" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimation Storyboard.TargetProperty="Width" From="100" To="110" Duration="0:0:1" AutoReverse="True"></DoubleAnimation>
                                            <DoubleAnimation Storyboard.TargetProperty="Height" From="100" To="110" Duration="0:0:1" AutoReverse="True"></DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    Ofer

    Tuesday, November 27, 2012 5:32 PM