Thau
Topic Author
Posts: 2
Joined: 07 Aug 2014, 14:13

Resolution independent animation

07 Aug 2014, 14:20

Hello. I'm trying to animate a button that should scale from 0 to it's size, centered on the screen, and then move to the bottom right corner. My problem is that I can't find a way to ensure the animation doesn't depend on the screen resolution.

Right now, my setup is a Button inside a Grid inside a UserControl. The button's alignment is set to bottom-right to ensure the animation finishes in the right place, but I can't make it so it also starts on the center.

Does anyone have any idea on how can I do this?

Thank you.
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: Resolution independent animation

07 Aug 2014, 19:48

Something a bit tricky, playing with Grid relative sizes and LayoutTransform:
<Grid
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Grid.Resources>
	    <Storyboard x:Key="AnimButton">
	        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheButton" Storyboard.TargetProperty="RenderTransform.ScaleX">
	            <LinearDoubleKeyFrame KeyTime="0" Value="0.0001"/>
	            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
	        </DoubleAnimationUsingKeyFrames>
	        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheButton" Storyboard.TargetProperty="RenderTransform.ScaleY">
	            <LinearDoubleKeyFrame KeyTime="0" Value="0.0001"/>
	            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
	        </DoubleAnimationUsingKeyFrames>
	        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveX" Storyboard.TargetProperty="LayoutTransform.ScaleX">
	            <LinearDoubleKeyFrame KeyTime="0" Value="0.5"/>
	            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
	            <LinearDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
	        </DoubleAnimationUsingKeyFrames>
	        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveY" Storyboard.TargetProperty="LayoutTransform.ScaleY">
	            <LinearDoubleKeyFrame KeyTime="0" Value="0.5"/>
	            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
	            <LinearDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
	        </DoubleAnimationUsingKeyFrames>
	    </Storyboard>
	</Grid.Resources>
	<Grid.Triggers>
	    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
	        <EventTrigger.Actions>
	            <BeginStoryboard Storyboard="{StaticResource AnimButton}"/>
	        </EventTrigger.Actions>
	    </EventTrigger>
	</Grid.Triggers>
    <Grid VerticalAlignment="Bottom">
	    <Grid.ColumnDefinitions>
	        <ColumnDefinition Width="*"/>
	        <ColumnDefinition Width="Auto"/>
	    </Grid.ColumnDefinitions>
	    <Rectangle x:Name="HorizontalSpace" Grid.Column="0" Fill="Yellow" Visibility="Hidden"/>
    	<Rectangle Grid.Column="1" Width="{Binding ActualWidth, ElementName=TheButton}" Height="10" Fill="Gold" Visibility="Hidden"/>
    </Grid>
	<Grid HorizontalAlignment="Right">
	    <Grid.RowDefinitions>
	        <RowDefinition Height="*"/>
	        <RowDefinition Height="Auto"/>
	    </Grid.RowDefinitions>
	    <Rectangle x:Name="VerticalSpace" Grid.Row="0" Fill="Yellow" Visibility="Hidden"/>
    	<Rectangle Grid.Row="1" Width="10" Height="{Binding ActualHeight, ElementName=TheButton}" Fill="Gold" Visibility="Hidden"/>
    </Grid>
	<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
	    <Rectangle x:Name="MoveX" Width="{Binding ActualWidth, ElementName=HorizontalSpace}" Fill="Red" Visibility="Hidden">
	        <Rectangle.LayoutTransform>
	            <ScaleTransform ScaleX="0.5"/>
	        </Rectangle.LayoutTransform>
	    </Rectangle>
	    <StackPanel Orientation="Vertical">
	        <Rectangle x:Name="MoveY" Height="{Binding ActualHeight, ElementName=VerticalSpace}" Fill="Orange" Visibility="Hidden">
	            <Rectangle.LayoutTransform>
	                <ScaleTransform ScaleY="0.5"/>
	            </Rectangle.LayoutTransform>
	        </Rectangle>
            <Button x:Name="TheButton" Width="200" Height="100" Content="Animated Button" RenderTransformOrigin="0.5,0.5">
                <Button.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Button.RenderTransform>
            </Button>
    	</StackPanel>
	</StackPanel>
</Grid>
;)
 
Thau
Topic Author
Posts: 2
Joined: 07 Aug 2014, 14:13

Re: Resolution independent animation

08 Aug 2014, 10:55

Thank you very much, sfernandez!

Who is online

Users browsing this forum: Google [Bot] and 86 guests