How can I avoid flicker in a WPF fullscreen app?

Question

I have a WPF application that is a fullscreen kiosk app. It\'s actually a pretty complicated app at this point, but here\'s some code that shows the basic idea. Essentiall

Answer 1

The underlying cause of the flicker is that whenever you .Hide() a window its PresentationSource is disconnected, causing Unloaded events to be fired on everything and everything cached in the MILCore layer of WPF to be discarded. Then when you .Show() it again later, everything is rebuilt.

To prevent flicker, make sure you keep your UI connected to a PresentationSource at all times. This can be done in several ways:

Single window with a disguised TabControl

Use a single window containing a TabControl styled so you can't see the tabs. Switch tabs in code when you would normally show or hide windows. You can simply search-and-replace "Window" in your existing code with "Page", then replace "Show()" calls to your custom "Show()" which does the following:

1. Check for previously created TabItem for this Page (using a Dictionary)
2. If no TabItem found, wrap the Page inside a new TabItem and add it to the TabControl
3. Switch the TabControl to the new TabItem

The ContentTemplate you would use for your TabControl is extremely simple:

Using a Frame with Navigation

Using Frame with Navigation is a very good solution for a kiosk because it implements a lot of the page switching and other functionality. However it may be more work to update an existing application this way than to use a TabControl. In either case you need to convert from Window to Page, but with Frame you also need to deal with navigation.

Multiple windows with opacity

You can make a window almost completely invisible using a low opacity and yet WPF will still keep the visual tree around. This would be a trivial change: Just replace all calls to Window.Show() and Window.Hide() with calls to "MyHide()" and "MyShow()" which updates the opacity. Note that you can improve this further by having these routines trigger animations of very short duration (eg 0.2 second) that animate the opacity. Since both animations will be set at the same time the animation will proceed smoothly and it will be a neat effect.