Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

WPF Control Animation

Posted on 2010-11-15
2
Medium Priority
?
901 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 500 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article introduced a TextBox that supports transparent background.   Introduction TextBox is the most widely used control component in GUI design. Most GUI controls do not support transparent background and more or less do not have the…
We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can…
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 this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…

604 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