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

Filed under:
|
|
|

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

Related posts about xaml

Related posts about c#