Stutters when changing between datatemplates containing large images
Posted: 04 Jul 2022, 13:55
I have a problem which I think is caused by Noesis loading and reloading images during runtime when switching between screens in my menu. I am using EmbeddedTextureProvider from NoesisApp here.
For now my architecture is as follows - I have a single UserControl containing ContentControl, which displays all specific screens via DataTemplates defined in the user control resources. Below that I have a Control used to display transition animation when changing screens (I change screens in the middle of the animation),
Datatemplates are defined as follows
Now whenever the screens actually change (ie in the middle of the transition animation when ActiveScreenViewModel to which the ContentControl is bound) I have a stutter for a few hundred miliseconds, which usually (but not always) completely stop the rest of the animation from being visible (it finishes during the stutter). The more images contained in the new screen the longer the stutter.
My question is - what is the best way to solve this problem? Is there some way to preload all the images and controls from all the datatemplates? The stutter happens even if I go to the same screen for the second time (so it seems the images get unloaded?). Or do I have to change the design from a single ContentControl with DataTemplates to all the controls being inside the grid of the main control (and switching their visibilities between collapsed/visible) - would that even resolve the issue (or would the images for the collapsed controls get unloaded, causing the same stutters again?
For now my architecture is as follows - I have a single UserControl containing ContentControl, which displays all specific screens via DataTemplates defined in the user control resources. Below that I have a Control used to display transition animation when changing screens (I change screens in the middle of the animation),
Code: Select all
<ContentControl Content="{Binding ActiveScreenViewModel}" />
<Control x:Name="TransitionControl" Template="{StaticResource TransitionSlideTemplate}" Visibility="Hidden" />Code: Select all
<UserControl.Resources>
<DataTemplate DataType="{x:Type data:IntroScreenViewModel}">
<local:IntroScreen />
</DataTemplate>
<DataTemplate DataType="{x:Type data:CentralSelectionScreenViewModel}">
<local:CentralSelectionScreen />
</DataTemplate>
(...)
</UserControl.Resources>My question is - what is the best way to solve this problem? Is there some way to preload all the images and controls from all the datatemplates? The stutter happens even if I go to the same screen for the second time (so it seems the images get unloaded?). Or do I have to change the design from a single ContentControl with DataTemplates to all the controls being inside the grid of the main control (and switching their visibilities between collapsed/visible) - would that even resolve the issue (or would the images for the collapsed controls get unloaded, causing the same stutters again?