首页 > 解决方案 > WPF Choppy / Jittery Animation related to window size

问题描述

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!

标签: wpfwpf-animation

解决方案


推荐阅读