Multi Page application with WPF (HMI-like)

Dear reader, this is an old version of the article. You can find the new version on my new blog.
[UPDATE 18/3/2012] The source code can be downloaded here: http://mesta-automation.com/Downloads/HmiLike.rar

Hi,
now that we got the code to establish connection between Plc and Pc, we want to do free HMI, SCADA, MES and so on.
So we need to put in a list what an HMI (the easier to start with) application must contain:
- Buttons, textbox, labels and so on to permit the configuration and manteinance of the machine to the operator.
- Graphs in Real Time, to control temperatures, pressures, levels and so on...
- Alarm system, that includes a database to store events, alarms and so on.
- Menu (with password?) that permits the access at the differents parts of the plant at variuos kind of personal.
- Some graphic items or designs, that change color when change status in real.

This things are a lot, so we have to forget to build an HMI using the classic windows interface with a MenuBar and a Toolbar, but we need a multipage application (like a site), where pages are accessible by buttons, and sometimes pop-up. We need an appliaction that can support also industrial panels with touch-screen.
This guy got a good idea: http://azerdark.wordpress.com/2010/04/23/multi-page-application-in-wpf/
He decided to use one window and to use the system of change page, provided by WPF, to load different UserControls, that can be full pages or controls shared by the entire application.
This is what i did:
- i created a new WPF application, opened the codebehind of MainWindow, and added the next code



Then wrote the class Switcher:
 - Created a user control that will be used as menu (this is a grid with 4 buttons)

- In the code behind i wrote the code to switch pages

 
- I added to every page the menu control and i wrote on constructor of MainWindow the 1st page that has to be displayed (PageControls in my case)



Hope it's useful. The complete solution can be found here: http://mesta-automation.com/Downloads/HmiLike.rar

8 comments:

Simone Manneschi said...

Notevole, ottime guide appena avrò tempo mi voglio rimettere a trafficare anche con queste cose. Per curiosità sai se .net si può interfacciare anche coi controller PIC senza doverli programmare in assembler?

Michele Cattafesta said...

Ciao, non credo si possa programmare il PIC direttamente con .Net (pero' controlla su google per essere sicuro), ma ci saranno sicuramente compilatori che permettono di utilizzare altri linguaggi di alto livello(C, Pascal etc)
Con .Net fai l'interfaccia utente, ossia comunicazione tramite porta seriale, con un protocollo che somiglia molto a una chat.
Ho fatto un progetto per una scheda custom tempo fa, dove il PIC controllava ingressi e uscite, mentre col PC si andavano ad impostare i valori, leggerli etc.

Anagha said...

Nice Article! Thank you for sharing. Helpful for our project.

Anonymous said...

How to send data between pages??

Michele Cattafesta said...

When you create the page you can pass a parameter in the constructor:
Public class MyPage : UserControl
{
public MyPage(int myParameter)
{
InitializeComponents();
int myValue = myParameter;
}
}

So when you create the page you can pass a parameter:
int parameter = 25;
Switcher.Switch(new MyPage( parameter));

Anonymous said...

But I have mistake in class SwitcherMenu
private void Button_Click(object sender, RoutedEventArgs e)
{
Switcher.Switch(new Page1(int)); //"mistake int"
}

Anonymous said...

I have two classes MainWindow and SwitcherMenu.Thera are to constructors Switcher.Switch(new MyPage( parameter)).
So I should declare the same variable(parameter) in two classes??

Michele Cattafesta said...

Please check out the sample application on the new blog:
http://www.mesta-automation.com/create-a-multi-page-application-with-wpf-hmi-like/

There is an example with a page that requires parameters.

Your mistake is that you wrote:
Switcher.Switch(new Page1(int)); //"mistake int"
but you should write for example
Switcher.Switch(new Page1(1));