I'm trying to create a slide out menu for my WPF Application, however I've noticed that the animation gets jittery / laggy depending on the size of the screen. I've tried googling but haven't really found any solutions and nobody else even mentions screen size.
Heres my XAML Code:
<Grid x:Name="sideMenu" Visibility="Collapsed" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="2" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<TranslateTransform X="350" Y="0"/>
</Grid.RenderTransform>
<Border Grid.ColumnSpan="2" Grid.RowSpan="4" BorderBrush="Black" BorderThickness="1 0 0 0"></Border>
<Border Background="#253031" BorderBrush="Black" Grid.ColumnSpan="2" BorderThickness="0 0 0 1"></Border>
<Label Content="Menu Heading" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="White" FontSize="18" Margin="5" />
</Grid>
Also here are my following storyboard animations
SlideIn:
<Storyboard x:Key="SlideIn" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)">
<DoubleAnimation To="0" From="350" Duration="0:0:0.2"/
</Storyboard>
SlideOut:
<Storyboard x:Key="SlideOut" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)">
<DoubleAnimation To="350" From="0" Duration="0:0:0.2"/
</Storyboard>
And finally here's the code behind that activates the storboard animations:
private void ShowMenu()
{
//Start the slide animation
Storyboard animation = Resources["SlideIn"] as Storyboard;
animation.Begin(sideMenu);
}
private void HideMenu()
{
Storyboard animation = Resources["SlideOut"] as Storyboard;
animation.Begin(sideMenu);
}
any thoughts or suggestions would be much appreciated!