How do I improve animation performance in WPF?

Question

I have the following layout in a WPF project:

I want to animate the first row to collapse so the second row can take up the entire screen like this:

I did this by setting the height of the first row to "Auto" and animating the size of the Large Image to 0. It works as expected, but it is a quite choppy/laggy. Especially on fullscreen. Any ideas to improve the performance of the animation?

All the provious animations were done in code behind using "DoubleAnimation".

What I tried:

Moving the entire grid up using a translate transformation in order to reduce layout calculations.
Setting "RenderOptions.BitmapScalingMode" to "LowQuality", and "RenderOptions.CachingHint" to "Cache".

Still, there was no noticable perforemance improvement.

Thank you.

Use a profiler to find out where things are slowing down, see https://stackoverflow.com/questions/33468572/how-to-profile-wpf-4-5-ui-performance — Dai, Aug 30 '23 at 22:18

Never.More · Answer 1 · 2023-08-31T06:19:17.210

I have gone with several solutions about this issue. You can pick A+B+(C or D)

Solution A: Decrease the frame rate of WPF You could add the below code to method OnStartup() in app.xaml.cs or main() of program.cs

        Timeline.DesiredFrameRateProperty.OverrideMetadata(
           typeof(Timeline),
           new FrameworkPropertyMetadata { DefaultValue = 30 }
           );

Note that this option will effect on the whole wpf app.It means that all frame rate of animations will be set to the value you assign.

Solution B: use easing functions. refer:https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/easing-functions?view=netframeworkdesktop-4.8

Solution C: Animating the RenderTransform.ScaleTransform instead of Large-Image-Region's size.You may need to use it in combination with Opacity animation.

Solution D: Animating the Margin instead of Large-Image's size. You can assign a negative top-margin (0,-{selfheight},0,0) to Large-Image-Region when you trigger collapsing. You may need to use it in combination with Opacity animation too.

The numbers and size of image that loaded in Listbox below may be a factor which can make effect on the performance of animation.

score 0 · Answer 2 · answered Aug 31 '23 at 00:13

It would likely be the resizing of the list control re-rendering as the size continually changes. One thing you could do is when collapsing the top area, calculate the final size for the list box then turn off any dynamic sizing temporarily, set the list box height manually once for the final size (it should be clipped by it's container) then kick off the resize animation allowing the listbox's container to resize. When the animation completes, restore the listbox dynamic sizing.

Something like on the click/trigger of whatever kicks of the collapse:

Listbox.Height = Listbox.ActualHeight + collapsedContainerOriginalHeight;

Where collapsedContainerOriginalHeight is the starting height for the row/image you are collapsing.

Then add a Completed event handler to the animation storyboard:

Listbox.Height = double.NaN;

This will prevent the listbox from re-calculating it's height, instead just "sliding" up. The different behaviour should be visible in that any scrollbar in the list will snap to a new size instead of resizing based on the area available.

How do I improve animation performance in WPF?

2 Answers2