Resolution independent animation
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.
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.
-
-
sfernandez
Site Admin
- Posts: 3184
- Joined:
Re: Resolution independent animation
Something a bit tricky, playing with Grid relative sizes and LayoutTransform:
Code: Select all
<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>Who is online
Users browsing this forum: No registered users and 3 guests