title: Wpf performance : Reduce lags when using animations
body: <p>I have a few questions related to performance issue in <code>Windows Presentation Foundation</code>. I hope experts on SO can help me a bit. I am a student and always open to learning.Anyways,let's get started.</p>
  
  <p><strong>1 • Animations over PERFORMANCE</strong></p>
  
  <p>In my wpf app,i have a lot of storyboards which are for different purposes.E.g.</p>
  
  <p><strong>Changing color of a control from WHITE to GRAY</strong></p>
  
  <p><strong>Using ColorAnimation</strong></p>
  
  <pre><code>&lt;Rectangle Fill="White"&gt;
   &lt;Rectangle.Triggers&gt;
     &lt;EventTrigger RoutedEvent="MouseEnter"&gt;
       &lt;BeginStoryboard&gt;
         &lt;Storyboard&gt;
           &lt;ColorAnimation Storyboard.TargetProperty="(Fill).Color" To="Gray" Duration="0:0:0.2"/&gt;
         &lt;/Storyboard&gt;
       &lt;/Beginstoryboard&gt;
     &lt;/EventTrigger&gt;
    &lt;/Rectangle.Triggers&gt;
  &lt;/Rectangle&gt;
  </code></pre>
  
  <p>Now,as i run my app,it looks good,fast and ...umm..FINE.The problem starts as soon as i maximize the window.The storyboards starts to lag(not the above one but rather a <code>ThicknessAnimation</code>).I knew that by default,wpf sets the refresh rate to <code>60 FPS</code>.So i minimized it to <code>10</code> with :</p>
  
  <pre><code> Timeline.DesiredFrameRate="10"
  </code></pre>
  
  <p>Now i don't notice the same lag as before.But there is still some lag.Then i came across MSDN forums and other SO qs and found out this :</p>
  
  <blockquote>
    <p>Elements where Visibility is not Visible do not participate in input events (or commands), do not influence either the Measure or Arrange passes of layout, are not in a tab sequence, and will not be reported in hit testing.</p>
  </blockquote>
  
  <p>Reading so,i went on setting <code>Visibility</code> of many controls to <code>Hidden</code> as soon as any animation is triggered.Being done with the code,i launched my app.Now the performance is,maybe,good because there's still some lag but i can't decide if it is as same as before.Then i came across <a href="http://mrpfister.com/journal/improving-wpf-rendering-performance/" rel="nofollow noreferrer">this</a>.I realized that my images which use <code>RenderOptions.BitmapScalingMode</code> might cause such lag,so i set the <code>BitmapScalingMode</code> to <code>NearestNeighbour</code>(AFAIK this is the lowest rendering quality).I launched my app but still face some lags.The lag may not be an issue/matter of headache for a regular user but for a programmer(i'm a noob tho),it is not acceptable.</p>
  
  <p>Then i kept going through the design area.I noticed a lot of labels and other controls which i added previously.Somewhere online i read that a <code>Label</code> has 5 elements whereas a <code>TextBlock</code> has 1.So i replaced all <code>Label</code>s with <code>TextBlock</code>s.Still,i face some lag.</p>
  
  <p>I launched <strong>Word</strong>,<strong>Outlook</strong> and other <strong>Microsoft</strong> products.They seem to have animations but it is hard for me to figure out how these app run way smoother than mine ?</p>
  
  <p>Again browsed the web.Found out that if i use <code>DataBinding</code>s(if/when i am working with data-related stuff),that might be in favor of <strong>Performance</strong>.So,within the MainWindow, i added a <code>ListBox</code> and set-up dataBinding for it:</p>
  
  <p><strong>XAML</strong></p>
  
  <pre><code>  &lt;ListBox Name="lstbx1" HorizontalContentAlignment="Stretch"&gt;
                      &lt;ListBox.ItemTemplate&gt;
                              &lt;DataTemplate&gt;
                                      &lt;Grid Margin="0,2"&gt;
                                              &lt;Grid.ColumnDefinitions&gt;
                                                      &lt;ColumnDefinition Width="*" /&gt;
                                              &lt;/Grid.ColumnDefinitions&gt;
                                              &lt;TextBlock Text="{Binding Names}" /&gt;
  
                                      &lt;/Grid&gt;
                              &lt;/DataTemplate&gt;
                      &lt;/ListBox.ItemTemplate&gt;
              &lt;/ListBox&gt;
  </code></pre>
  
  <p><strong>C#</strong></p>
  
  <pre><code>  namespace Test.ListBox_control
   {
      public partial class Sample : Window
      {
              public Sample()
              {
                      InitializeComponent();
                      List&lt;TodoItem&gt; items = new List&lt;TodoItem&gt;();
                      items.Add(new TodoItem() { Title = "Complete this WPF tutorial", Completion = 45 });
                      items.Add(new TodoItem() { Title = "Learn C#", Completion = 80 });
                      items.Add(new TodoItem() { Title = "Wash the car", Completion = 0 });
  
                      lstbx1.ItemsSource = items;
              }
      }
  
      public class TodoItem
      {
              public string Name{ get; set; }
  
      }
    }
  </code></pre>
  
  <p>Good,there's no issue with the listbox.But wait,am i not supposed to check the animations....!! And again they disappoint me.The animations are still slow.My laptop specs are : 8 gb ram,4gb Intel HD Graphics 520,i5 6200U 2.3 ghz cpu..I am afraid if my app lags on this machine,what might happen if a user tries to run it on a low-specs system ?</p>
  
  <p><strong>Conclusion</strong></p>
  
  <p>This post maybe voted to be closed as it may be too broad but can someone please answer my question : Are there more efficient ways to get rid of these lags ? And how does big softwares like Office have same animations as i do but dont have the lags ? Is it because i am using c# and the are using c++(maybe) ?</p>