Animate transformation : Animations « Animations « Silverlight

1. Silverlight
2. Animations
3. Animations

Animate transformation

    

<UserControl x:Class='SilverlightApplication3.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <Style x:Key="buttonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid RenderTransformOrigin=".5,.5">
                                <Grid.RenderTransform>
                                    <ScaleTransform x:Name="myTransform"/>
                                </Grid.RenderTransform>

                                <Ellipse x:Name="myEllipse" RenderTransformOrigin=".5,.5" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                    <Ellipse.Fill>
                                        <RadialGradientBrush GradientOrigin="0.3,0.2">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.075" ScaleY="1.141"/>
                                                    <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                    <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                    <TranslateTransform X="-0.04" Y="0.07"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Color="#FFD9D9D9" Offset="0.004" />
                                            <GradientStop Color="#FF2103BA" Offset="1" />
                                        </RadialGradientBrush>
                                    </Ellipse.Fill>
                                </Ellipse>

                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />

                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <DoubleAnimation To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                                <DoubleAnimation To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                            </Storyboard>
                                        </VisualState>

                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                                <DoubleAnimation To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                            </Storyboard>
                                        </VisualState>

                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="Normal" To="MouseOver">
                                                <Storyboard Duration="00:00:01">
                                                    <DoubleAnimation From="1.0" To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                                    <DoubleAnimation From="1.0" To="1.25" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                                </Storyboard>
                                            </VisualTransition>

                                            <VisualTransition From="MouseOver" To="Normal">
                                                <Storyboard Duration="00:00:01">
                                                    <DoubleAnimation From="1.25" To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleX" />
                                                    <DoubleAnimation From="1.25" To="1.0" Storyboard.TargetName="myTransform" Storyboard.TargetProperty="ScaleY" />
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>       
                </Setter>                
            </Style>
        </Grid.Resources>
        
        <Button x:Name="myButton" Width="75" Height="75" Content="Push Me" Style="{StaticResource buttonStyle}" />                    
    </Grid>
</UserControl>

   
    
    
    
  

Related examples in the same category

1.	Using Simple Animations with Objects
2.	Controlling Animations Programmatically
3.	Creating from to Animations
4.	Rectangles and Multiple Animation Effects
5.	Chained Animation Effects
6.	Point Animation Effects
7.	Starting an animation with a trigger
8.	Create a bounce animation
9.	Move a rectangle from position (0,0) to position (300,0) in 5 seconds
10.	Enlarge Button In Xaml
11.	Two Animations
12.	Animation without acceleration or deceleration
13.	Animation with a slow speed
14.	Animate EndPoint
15.	Animate StartPoint
16.	XAML Only Animation
17.	Four Sided Bounce
18.	Start the animation with Path is loaded
19.	Brush animation
20.	Control the animation from code
21.	Wipe out an Image
22.	Rotating button
23.	Simultaneous animation
24.	Fade Image Storyboard
25.	Repetition duration
26.	Timer triggered Animation
27.	Use code to control DoubleAnimation
28.	Animation Ease effect
29.	Grow a Button
30.	3D Animation