How do you make the scale animation begin at the middle of the object instead of the top left?
- by Roy
What I am trying to accomplish:
10 percent increase scale transformation of a rectangle via Silverlight storyboard animation.
What I currently doing:
While in Expression Blend 3, I created a rectangle, created a storyboard, and created the scale transformation. The preview looked correct because the increase in scale begins in the middle of the object. When I run the project the scale transformation begins at the top left. Is there some piece of code missing?
Here is my current code:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="TestingGroundsWebsite.MainPage"
Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="RectangleAppear">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.1"/>
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="1.1"/>
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.1"/>
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="1.1"/>
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="rectangle" Fill="#FFE80000" Stroke="Black" Height="75" Width="76" Canvas.Left="227" Canvas.Top="167" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</UserControl>
Thanks
