How do you make the scale animation begin at the middle of the object instead of the top left?
Posted
by Roy
on Stack Overflow
See other posts from Stack Overflow
or by Roy
Published on 2010-04-04T19:23:40Z
Indexed on
2010/04/04
19:33 UTC
Read the original article
Hit count: 168
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
© Stack Overflow or respective owner