Click to scale a Button : Button Animation « Windows Presentation Foundation « C# / CSharp Tutorial






<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SpinAndGrowButton" Height="300" Width="300">
    <Grid>
        <Button Name="btnSpinMe" Content="Spin Me" Width="100" Height="50">
            <Button.Background>
                <RadialGradientBrush Center="0.5,0.5" RadiusX="1.0" RadiusY="1.0">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Orange" Offset="1.0" />
                </RadialGradientBrush>
            </Button.Background>
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotButton" Angle="0" CenterX="50" CenterY="25" />
                    <ScaleTransform x:Name="scaButton" ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
                </TransformGroup>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaButton" Storyboard.TargetProperty="(ScaleTransform.ScaleX)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.0" Value="1.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.5" Value="2.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:01.0" Value="1.0" />
                                </DoubleAnimationUsingKeyFrames>

                                <!-- ScaleY -->
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaButton" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.0" Value="1.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.5" Value="2.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:01.0" Value="1.0" />
                                </DoubleAnimationUsingKeyFrames>


                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>
WPF Click To Scale A Button








24.3.Button Animation
24.3.1.Shaking a Button with DoubleAnimationShaking a Button with DoubleAnimation
24.3.2.Using common TextElement attached properties to set Button textUsing common TextElement attached properties to set Button text
24.3.3.Create a Fish Eye Button with Double AnimationCreate a Fish Eye Button with Double Animation
24.3.4.Enlarge a Button with XamlEnlarge a Button with Xaml
24.3.5.Click to rotate a ButtonClick to rotate a Button
24.3.6.Click to scale a ButtonClick to scale a Button
24.3.7.Translated button with Code
24.3.8.Scaled button with Code
24.3.9.Skewed button with Code
24.3.10.Rotated button with Code
24.3.11.Enlarge Button With Animation
24.3.12.Enlarge Button with Timer