Windows 10 Universal App WebView Transition Flicker Prevention

Currently, I am developing a Windows 10 Universal App that utilizes a WebView, Knockout Js, and Zurb Foundation. Yeah, I know nothing earth shattering.

alt text

Xaml is fine and probably preferred for a larger app (and this is a small app with less than six screens) using Blend. I am not a designer. As a weekend warrior after hours programming hobbyist, I have no problem offloading as much design as possible to the Zurb framework. And I want to personally prove that it can be done (and get another app in the store) while leveraging my existing knowledge of C#, Javascript, and Zurb.

I really like the idea of a Zurb frontend communicating with a C# backend utilizing -

window.external.notify in Javascript with the WebView.ScriptNotify event in C#

and calling Javascript methods via the InvokeScriptAsync WebView.InvokeScriptAsync method in C#.

Anyway, I noticed that transitions between Frames utilize an animation that causes a slight (yet noticeable) flicker once Zurb is loaded and the knockout model is bound.

One way to address the flicker is to explicitly pass a null NavigationTransitionInfo into the Frame.Navigate method. It controls how the transition animation runs (or in my app’s case not run) during the navigation action. Some provided by the Windows runtime API are –

Another way to prevent the flicker is set your frame.ContentTransitions = null programmatically. Or use a much cleaner way by removing the Frame.ContentTransitions element in the Xaml -

<Frame x:Name="frame" Navigating="OnNavigatingToPage" Navigated="OnNavigatedToPage">
<!-- <Frame.ContentTransitions>
	</Frame.ContentTransitions> -->