The ScaleX and ScaleY properties of this ScaleTransform are each animated from 0 to 1
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.Graphics.Transforms.AnimatedScaleTransformExample"
WindowTitle="Animated ScaleTransform Example"
Background="White">
<StackPanel Margin="10">
<Canvas Width="250" Height="250">
<Rectangle
Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" CenterX="25" CenterY="25" ScaleX="1" ScaleY="1" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Height="50" Width="50" Stroke="#99000000"
StrokeDashArray="4,1" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100" />
</Canvas>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
Margin="10">
<Button Name="startButton" Margin="0,0,2,0">Start</Button>
<Button Name="stopButton">Stop</Button>
<StackPanel.Triggers>
<EventTrigger SourceName="startButton" RoutedEvent="Button.Click">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedScaleTransform"
Storyboard.TargetProperty="ScaleX"
From="0" To="3" Duration="0:0:2" />
<DoubleAnimation
Storyboard.TargetName="MyAnimatedScaleTransform"
Storyboard.TargetProperty="ScaleY"
From="0" To="3" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
<StopStoryboard BeginStoryboardName="myBeginStoryboard" />
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</StackPanel>
</Page>
Related examples in the same category
