Click to scale a Button

image_pdfimage_print


   
       


<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>
                                <!-- ScaleX -->
                                <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>