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. Essentially, whenever the user goes from one screen to the next, there's some serious flicker going on bringing up the new window. In severe cases, the desktop is displayed for a few seconds before the new screen shows up. That doesn't happen in this sample code, because it's so simple, but add a few more buttons and styles and you'll see it.
App.xaml.cs:
public partial class App : Application {
Manager mManager;
public App() {
mManager = new Manager();
Window1 screen1 = new Window1(mManager);
mManager.Screen1 = screen1;
try {
this.Run(screen1);
} catch (Exception e) {
System.Console.WriteLine(e.ToString());
} finally {
Application.Current.Shutdown();
}
}
}
Window1.xaml.cs:
public partial class Window1 : Window {
Manager Manager{get; set;}
public Window1(Manager inManager) {
InitializeComponent();
Manager = inManager;
}
private void OnChangeScreen(object sender, RoutedEventArgs e) {
Manager.OpenScreen2();
}
}
Window2.xaml.cs:
public partial class Window2 : Window {
Manager Manager{get; set;}
public Window2(Manager inManager) {
InitializeComponent();
Manager = inManager;
}
private void OnChangeScreen(object sender, RoutedEventArgs e) {
Manager.OpenScreen1();
}
}
Manager.cs:
public class Manager {
public Window1 Screen1{ get; set;}
public Window2 Screen2{ get; set;}
public Manager(){
Screen1 = new Window1(this);
}
public void OpenScreen2() {
Screen2 = new Window2(this);
Screen2.Show();
if (Screen1 != null) {
Screen1.Hide();
}
}
public void OpenScreen1() {
Screen1 = new Window1(this);
Screen1.Show();
if (Screen2 != null) {
Screen2.Hide();
}
}
}
Window1.xaml (essentially mimicked by window2.xaml):
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1"
WindowStyle="None"
WindowState="Maximized"
Width="1280"
Height="1024"
FontFamily="Global User Interface"
ResizeMode="NoResize">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Name="ChangeScreenButton" Click="OnChangeScreen" Grid.Row="2" Grid.Column="2" Content="Toggle Screen 2"></Button>
</Grid>
</Window>
Interleaving the displays of the two windows (ie, showing window 1 before deleting window 2, etc) does not change the flickering behavior. In this simple app, it would be possible to just hide the other screens that aren't shown, but in the more complicated app, there's just too much state information to manage screen information properly and easily.
Is there some magic codeword or technique to avoid flicker that would work in this simple app that also scales to the more complex app? I'm worried that I'll be forced to rewrite the entire UI at this point to support hiding and showing, and that's just not feasible in my timeframe.
EDIT: I've tried the hide/show thing on some dialogs, and it just doesn't seem to matter. Maybe it's because the main kiosk app is style heavy?
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:
The ContentTemplate you would use for your TabControl is extremely simple:
<ContentTemplate TargetType="TabControl">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent" />
</ContentTemplate>
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.
I'm curious as to why you are using multiple windows for the same application in a Kiosk. You could easily put all of the controls on the same "Window" and simply change visibility on Panels to display different "screens". This would certainly prevent the desktop from ever being shown, and would allow you to do neat things like fade transitions or sliding animations, etc.
WPF has built in navigation functionality.
Just look at the Frame and the Page classes which you can easily design using VS or Blend.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With