locked
Animations with unknown starting position (Silverlight). RRS feed

  • Question

  • In my application I need to have the ability for the user to choose between a fixed number of layouts of the controls. If a user changes the layout an animation should occur moving the controls around.

    The problem is that it means that animations need to start from different positions. For example: When the application starts the default layout is loaded. Then the user changes the layout which results in an animation that translates and scales one of the controls. The next time the user changes the layout the animation needs to start from the current position and not from the default position. Is this possible somehow?

    Thanks for help!
    Tuesday, July 28, 2009 10:00 AM

All replies

  • Visual state manager and the states panel will do this for you.  Note that states should be used on UserControls. 

    Here is some sample code you can try that demonstrates the concept:

    XAML:

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype3Screens.Screen_3"
    	Width="500" Height="500">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="ButtonPositions">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="00:00:00.5000000"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="Left"/>
    				<VisualState x:Name="Right">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="389"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="34"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Bottom">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="223"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="399"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<Button x:Name="button" Height="48" Margin="8,8,0,0" VerticalAlignment="Top" Content="Button" HorizontalAlignment="Left" Width="79" RenderTransformOrigin="0.5,0.5">
    			<Button.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Button.RenderTransform>
    		</Button>
    		<Button HorizontalAlignment="Left" Margin="25,0,0,137" Width="103" Content="GoLeft" Click="GoLeft" Height="55" VerticalAlignment="Bottom"/>
    		<Button HorizontalAlignment="Left" Margin="25,0,0,78" Width="103" Content="GoRight" Height="55" VerticalAlignment="Bottom" Click="GoRight"/>
    		<Button HorizontalAlignment="Left" Margin="25,0,0,19" Width="103" Content="GoBottom" Height="55" VerticalAlignment="Bottom" Click="GoBottom"/>
    	</Grid>
    </UserControl>
    CS:
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace SilverlightPrototype3Screens
    {
    	public partial class Screen_3 : UserControl
    	{
    		public Screen_3()
    		{
    			// Required to initialize variables
    			InitializeComponent();
    		}
    		
    		private void GoLeft(object sender, RoutedEventArgs e)
    		{
    			VisualStateManager.GoToState(this, "Left", true);
    
    		}
    
    		private void GoRight(object sender, RoutedEventArgs e)
    		{
    			VisualStateManager.GoToState(this, "Right", true);
    		}
    
    		private void GoBottom(object sender, RoutedEventArgs e)
    		{
    			VisualStateManager.GoToState(this, "Bottom", true);
    		}
    	}
    }
    Wednesday, July 29, 2009 9:12 PM
    Moderator