Solved

WPF Control Animation

Posted on 2010-11-15
2
858 Views
Last Modified: 2013-11-12
I have a button that I want to animate the basic concept is that when the button is clicked it "falls" into place from the left had of the screen.  Once it is in position and clicked the button stands back up on the right side of the screen.  The first animation works successfully but I can't get the second animation to rotate properly.  I think I am confused about how either how the coordinate system is working or how and in what order WPF is rendering the control on the page and how the transforms and rotations are applied.  Below is the .xaml and .xaml.cs files.

<Window x:Class="ScaleTest1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" WindowState="Maximized" Name="mainWin" SizeChanged="mainWin_SizeChanged" StateChanged="mainWin_StateChanged">
    <Window.Resources>
        <Storyboard x:Key="storyBoardRotation" Completed="Storyboard_Completed">
            <DoubleAnimation
        Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
        From="0" To="90" Duration="0:0:2"
        AutoReverse="False"   />
        </Storyboard>
        <Storyboard x:Key="storyBoardRotation2" >
            <DoubleAnimation  
        Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
        From="90" To="180" Duration="0:0:5"
        AutoReverse="False"  />
        </Storyboard>
    </Window.Resources>
    <Canvas>
        <Button Margin="0,0,0,0" Name="ProgressBar1" HorizontalAlignment="Left" Width="24" Height="150" VerticalAlignment="Top" Click="ProgressBar1_Click">
            <Button.RenderTransform>
                <RotateTransform x:Name="rtTest" Angle="0"  />
            </Button.RenderTransform>
        </Button>        
    </Canvas>
</Window>


 private void ProgressBar1_Click(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();// = FindResource("storyBoardRotation") as Storyboard;
            if (rtTest.Angle == 0)
            {
                ProgressBar1.RenderTransformOrigin = new Point(1,1);
                //rtTest.CenterX = 24;
                //rtTest.CenterY = 150;
                sb = FindResource("storyBoardRotation") as Storyboard;
                Storyboard.SetTargetName(((DoubleAnimation)sb.Children[0]), "ProgressBar1");
            }
            else if (rtTest.Angle == 90)
            {
             
                ProgressBar1.RenderTransformOrigin = new Point(1,0);
                //rtTest.CenterX = 174
                //rtTest.CenterY = 24;
                sb = FindResource("storyBoardRotation2") as Storyboard;
                Storyboard.SetTargetName(((DoubleAnimation)sb.Children[0]), "ProgressBar1");
            }
           
                sb.Begin(this);
        }


I believe the problem is in understanding how either ot coordinate system is working and or the order in which transformations and rotations are appliend when the item is rendered.
If I change this line
ProgressBar1.RenderTransformOrigin = new Point(1,0);
in the else if to (.5, .5)
the the button seems to pop back to its orignial position (although rotated) and rotate around its centerpoint.  
Can someone point me in the direction of understanding the rendering pipeline or the co-ordinate system please
0
Comment
Question by:marktoth
2 Comments
 
LVL 1

Author Comment

by:marktoth
ID: 34142647
I found part of this solution.  Now I just have to get it to scale across the screen.  

Here is the .xaml and the and the code behind doesn't change right now
<Window x:Class="ScaleTest1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"  Name="mainWin" SizeChanged="mainWin_SizeChanged" StateChanged="mainWin_StateChanged">
    <Window.Resources>
        <Storyboard x:Key="storyBoardRotation">

            <DoubleAnimation x:Name="rotateAnimation"
       
        Storyboard.TargetProperty="(Button.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
        From="0" To="90" Duration="0:0:2"
        AutoReverse="False"  />
            <DoubleAnimation Storyboard.TargetProperty="(Button.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)"
                             From="0" To="0" Duration="0:0:2" AutoReverse="False"></DoubleAnimation>
            <DoubleAnimation Storyboard.TargetProperty="(Button.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)"
                             From="0" To="0" Duration="0:0:2" AutoReverse="False"></DoubleAnimation>
        </Storyboard>
       
        <Storyboard x:Key="storyBoardRotation2">

            <DoubleAnimation
       
        Storyboard.TargetProperty="(Button.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
        From="90" To="180" Duration="0:0:2"
        AutoReverse="False" Completed="DoubleAnimation_Completed" />
            <DoubleAnimation Storyboard.TargetProperty="(Button.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)"
                             From="150" To="150" Duration="0:0:2" AutoReverse="False"></DoubleAnimation>
            <DoubleAnimation Storyboard.TargetProperty="(Button.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)"
                             From="150" To="150" Duration="0:0:2" AutoReverse="False"></DoubleAnimation>
                             
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Rectangle Margin="0,0,0,0"  Name="ProgressBar1" HorizontalAlignment="Left" Width="24" Height="150" VerticalAlignment="Top"
                   Fill="Black">
           
            <Rectangle.RenderTransform>
                <TransformGroup>
                <RotateTransform x:Name="rtTest" Angle="0"  />
                    <TranslateTransform x:Name="txTest" X="0" Y="0"></TranslateTransform>
</TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Button Margin="0,0,0,0" Name="ProgressBar1Button" HorizontalAlignment="Left" Width="24" Height="150" VerticalAlignment="Top" Click="ProgressBar1_Click">
            <Button.RenderTransform>
               
                <RotateTransform x:Name="rtTestButton" Angle="0"  />
               
            </Button.RenderTransform>
           

        </Button>
        <Button Margin="0,0,0,0" Name="ProgressBar2Button" HorizontalAlignment="Right" Width="24" Height="150" VerticalAlignment="Top" Click="ProgressBar1_Click">
           

        </Button>
    </Grid>


</Window>
0
 
LVL 5

Accepted Solution

by:
gazzzzzzer earned 125 total points
ID: 35388362
To help you understand how the coordinates work,  I have uplaoded an image from my old blog.

 Coordinates
Some info about how this is used with gradients can be found at my old blog: http://garystearn.blogspot.com/

I know this does not answer your exact question, but i hope it might help with understanding the coordinates
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now