Mega Code Archive

 
Categories / Silverlight / 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>