Solved

WPF Control Animation

Posted on 2010-11-15
2
873 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Suggested Solutions

Title # Comments Views Activity
Please explain purpose of GZIP 4 59
C# class library debugging - Breakpoint will not hit. 8 32
Making exceptions for ValidationAttribute 2 27
Need help with another query 10 38
A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in an application. Themes can be made up of a set of elements: skins, style sheets, images, and o…
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…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

733 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