Create a multi-page application with WPF (HMI-like)

This article explains a very simple and straightforward approach to create a multi-page navigation with WPF. If you need to use dependency injection and DI containers, check this article on WPF navigation.

When working in automation, you often use HMI devices that allow you to draw graphics pages and navigate within the application using a menu.

To realize a page-switch application with WPF, you can use the UserControls, which would be the pages, which are contained in a single main window.

In every UserControl you can place:

• All the graphical controls needed to configure the process.
• Charts in real-time, to check analog values, like temperatures, pressures and so on.
• Visualize alarms and events.
• Synoptic schemas.

Code

An example on how to implement the code to switch pages can be fond on this site.

The code is simple, after creating a new WPF project, create a static class that will be the Switcher class that contains the Navigate method.

public static class Switcher
{
public static MainWindow pageSwitcher;

    public static void Switch(UserControl newPage)
    {
        pageSwitcher.Navigate(newPage);
    }    	
}

Then in the MainWindow assign the Switcher and write the public method Navigate:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Switcher.pageSwitcher = this;
        Switcher.Switch(new Page1());  //initial page   
    }

    public void Navigate(UserControl nextPage)
    {
        this.Content = nextPage;
    }   
} 

Then you can create UserControl and use the following code to change “page”:

Switcher.Navigate(new MyUserControl());

You can also create UserControls that requires parameters and pass parameters in an easy way between pages.

Sample application

I wrote a sample application to demonstrate the use of this class, you can download it from this link.