How can I prevent the screen to be blank when switching DataContext

[HakanL]

My application is running on a fairly low power Raspberry Pi and the transitions between pages causes the screen to go white (background color) when navigating. I don't believe it's due to slow loading of view models or overly complex UI, but rather the switch of DataContext (which is done by the Uno Navigation kit), where it is first set to null and then to the new ViewModel (the Page/View is reused). My wish is for the screen to not attempt rendering until the new ViewModel is made available, I've toyed with the idea of taking a screenshot and displaying that, but it seems like a clunky hack. If there would be a way to freeze rendering when DataContext is null that would've solved it, or perhaps a way to not have it set to null first, just switch it to the new VM.

First screen:

Then I click on the hamburger menu (and set a BP in the DataContextChanged so I can see what's going on and take a screen shot) and this is what is displayed when DataContext = null:

And then the VM is assigned:

The VM doesn't take very long to generate (around 160 ms), but I believe the root cause is the assignment to null which forces a re-render of the screen. Here's the repo for the app: https://github.com/HakanL/UnoTestApp
And this is the line where you can set a BP to see that the screen is blank (it's less obvious on a fast Windows machine): https://github.com/HakanL/UnoTestApp/blob/main/UnoHost/Views/MenuPage.xaml.cs#L33

[Xiaoy312]

There are two notable problems here:

1. utu:Card is horribly inefficient and bloated. The lag was even noticeable on desktop for just 9 items. You can greatly improve the performance by switching to a simpler menu item template:

   <ItemsRepeater.ItemTemplate>
   	<DataTemplate x:DataType="models:MenuItem">
   		<Grid Width="344"
   				Margin="1,3,0,3"
   				CornerRadius="12"
   				BorderBrush="Black"
   				BorderThickness="2"
   				Background="{StaticResource AvatarOutlinedCardBackground}"
   				Padding="16"
   				ColumnSpacing="16"
   				Tapped="Card_Tapped"
   				Holding="Card_Holding"
   				RightTapped="Card_RightTapped">
   			<Grid.ColumnDefinitions>
   				<ColumnDefinition Width="Auto" />
   				<ColumnDefinition Width="*" />
   			</Grid.ColumnDefinitions>
   			<Grid.RowDefinitions>
   				<RowDefinition Height="Auto" />
   				<RowDefinition Height="Auto" />
   			</Grid.RowDefinitions>
   
   			<Image Grid.Column="0" Grid.RowSpan="2" Source="{x:Bind FullIconPath}"
   					MaxHeight="40"
   					Width="40"
   					Height="40"
   					Stretch="None" />
   			<TextBlock Grid.Column="1" Grid.Row="0" Text="{x:Bind Name}" Style="{ThemeResource TitleMedium}" />
   			<TextBlock Grid.Column="1" Grid.Row="1" Text="{x:Bind Description}" Style="{ThemeResource LabelSmall}" />
   		</Grid>
   	</DataTemplate>
   </ItemsRepeater.ItemTemplate>

2. Lack of page content before the view-model is assigned. For the persistent and static parts like TopExpander, Background, and FooterControl, consider removing the visibility binding(s) affecting them or at least make them visible by default. This prevents your entire app becoming blank for the short duration.

[HakanL]

Thanks for the suggestions!

1. I picked the card because I liked the look of them, but you're right that's a good suggestion to just make a simpler version of it like you outlined.
2. Hmm, the TopExpander is tricky because it's truly optional, some menu pages will have it. I can default it to off I guess because it's more common to not have it, but still.
   I have a Visibility binding on the background because without it I got partial content rendered that looked wrong, so I was deciding between blank content and incomplete data. The footer I can definitely make default visible as it's almost always there, but it has labels that are populated from the ViewModel so even if it's visible, having invalid/incomplete data is almost as bad as a blank screen.
   Bottom line is, if I could have a way to either pause rendering, or prevent the DataContext of getting null (not even sure what the purpose is of pushing null to it?) it feels like it would solve all my headaches (I will still optimize the Card as you suggested).

[Xiaoy312]

for #⁠2, I don't know much about uno.ext.nav. But you can use this hack at the view level to blocks the null ones:

namespace DMXCore.DMXCore100.Views;
public partial class ViewBase : Page
{
	public ViewBase()
	{
		DataContextChanged += OnDataContextChanged;
	}

	private void OnDataContextChanged(FrameworkElement s, DataContextChangedEventArgs e)
	{
		if (e.NewValue is null) return;

		if (Content is UIElement uie)
		{
			uie.DataContext = e.NewValue;
		}
	}
}

public sealed partial class MenuPage : ViewBase, IFocusableItemsProvider, ICanSetFocus
...
<views:ViewBase
	x:Class="DMXCore.DMXCore100.Views.MenuPage"
	xmlns:views="using:DMXCore.DMXCore100.Views" ...

The idea to let the null flow to the page(ViewBase) data-context, but the page content will only receives non-null data-context. This said, you will still have problem with null DC on the first navigation, but any subsequent navigation to that page is fine.

[HakanL]

That's a good suggestion, I was doing a hack where I was setting the DataContext in the event, but that felt too hacky, your suggestion is better. Do you know if there is a way I could create an instance of my page ahead of time, to "prime" it? I have a splashscreen when the app loads, if I could create an instance of the page during that time (which isn't rendered) then it would make that first navigation slicker. I could of course just new up the page, but it wouldn't be used by the Uno Navigation, I would need a way to have it go through the navigation, without actually navigating :)

[Xiaoy312]

There is no official, or correct way... However, you can always hack your way in with reflection:

/* HomePage.cs */
using static System.Reflection.BindingFlags;
...
#if HAS_UNO
	private static bool navigationPreloadInitOnce = true;
	protected override void OnNavigatedTo(NavigationEventArgs e)
	{
		base.OnNavigatedTo(e);

		if (navigationPreloadInitOnce &&
			Frame is { } frame &&
			typeof(Frame).GetField("m_upNavigationCache", NonPublic | Instance)?.GetValue(frame) is { } cache &&
			cache.GetType().GetMethod("CacheContent", NonPublic | Instance) is { } cacheMethod
		)
		{
			navigationPreloadInitOnce = false;

			void CacheContent<T>() where T : new() => cacheMethod.Invoke(cache, [NavigationCacheMode.Required, typeof(T).AssemblyQualifiedName, new T()]);
			CacheContent<MenuPage>();
		}
	}
#endif

The root frame is from the ExtendedSplashScreen's content-template, which is difficult to obtain, so here I'm using your landing page's OnNavigatedTo to obtain it. Ideally, you would hook this into some event from the Shell, but this is good enough.

[HakanL]

Thanks @Xiaoy312 that works pretty well. Do you know why the images in the cards take a while to load? I'm using your simplified cards above, pre-load the view and view model, so no blank display in-between navigation, so that's great, but I see the cards, and then after that the icons are populated. They are tiny icons, 338 bytes PNGs, and in the view of "Cues" they are all the same. I was hoping to figure out a way to minimize the user experience where the screen is "built up" as it looks like it's slow.