Solved

WPF Control Animation

Posted on 2010-11-15
2
868 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
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 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…
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

829 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