Multi-Page Application in WPF

Posted: April 23, 2010 in C#, Programming
Tags: ,

This tutorial is about a multi-page application in WPF, in other words an application which just consists of one window but it has multiple pages.  Actually, this is the WPF version from multi-page Silverlight application.

The solution is quite cool but simple,  here’s the steps:

1. Create WPF Application project in Visual Studio (2008 or 2010)

2. Rename Window1 class into PageSwitcher

3. Your code in PageSwitcher.xaml.cs should be like below. there are two Navigate functions (overloading), if you want to pass information to other page, you should call one with object state parameter (i’ll explain this later).

using System;
using System.Windows;
using System.Windows.Controls;

namespace WPFPageSwitch
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class PageSwitcher : Window
    {
        public PageSwitcher()
        {
            InitializeComponent();
            Switcher.pageSwitcher = this;
            Switcher.Switch(new MainMenu());
        }

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

        public void Navigate(UserControl nextPage, object state)
        {
            this.Content = nextPage;
            ISwitchable s = nextPage as ISwitchable;

            if (s != null)
                s.UtilizeState(state);
            else
                throw new ArgumentException("NextPage is not ISwitchable! "
                  + nextPage.Name.ToString());
        }
    }
}

4. The next steps is creating ISwitchable Interface


namespace WPFPageSwitch
{
  	public interface ISwitchable
  	{
    	void UtilizeState( object state );
  	}
}

5. Create a static class,  name this class as Switcher


using System.Windows.Controls;

namespace WPFPageSwitch
{
  	public static class Switcher
  	{
    	public static PageSwitcher pageSwitcher;

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

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

6. Each page is represented by a user control, implement all user controls with ISwitchable

7. If you want to navigate to other user control, use this code :

Switcher.Switch(new YourUserControl());

8. Then, you just have to call UtilizeState(Object state) … but you’ll need to parse transfered object

9. How the result looks like :

Download the solution here

Comments
  1. jeff says:

    http://netindonesia.net/blogs/zeddy/archive/2010/06/09/building-wcf-rest-services-in-visual-studio-2010-no-svc-no-interface.aspx

    Zer, coba pelajari ini..
    Supaya WCF nya lbih friendly ke semua platform harus yg WCF RESTful Service.
    Rencanaku nek sempet mo tak bkin androidnya biar keliatan interoperabilitas nya tinggi..

  2. bin_tero says:

    sebelumnya saya sangat berterima kasih karena saya telah belajar dari Artikel diatas. Namun tetap saja saya kurang memahami dengan cara memperaktekan aplikasi diatas hehehe…
    ada kursus2 gratis ga ya untuk mengajarkan atau sharing pengalaman untuk menjadi mengerti ppemmroggraman ?
    terimakasih

  3. This worked perfectly just the way I wanted it to! Thanks.

  4. JT says:

    I have question for you.

    I tried creating a function to shut down the application by creating a button instead of using the x mark but I unfortunately, I ‘m not enable to complete it. Do you know how to shut down the application by creating and pressing a button without using the x mark?

  5. JT says:

    The code “Application.Current.Shutdown();” shut down my whole application and its popup window.

    I have a main application and popup window, named test, that use the concept “Multi-Page Application”.

    Would like to main application to be active after closing the popup window.

    • azer89 says:

      ok, i create one window called TestWindow and 2 buttons: button1 and button2.
      button one will pop up a TestWindow instance and button 2 will close it.
      here is the code:

      button1 :

              TestWindow window;
      
              private void button1_Click(object sender, RoutedEventArgs e)
              {
                  window = new TestWindow();
                  window.Visibility = Visibility.Visible;
              }
      

      button2 :

              private void button2_Click(object sender, RoutedEventArgs e)
              {
                  if(window != null) window.Close();
              }
      

      the trick is using window.Close();
      hope this will help you

  6. JT says:

    I maybe gave you not enough information or cleary explaination but lemme give a new try to make it more understandable.

    I will now explain much easier by using your application “Multi-Page Application” as a good example.

    When you activate the application the startup window page is mainIndex.xaml and inside of it you have a button. Wnen you press the button, a new window page will appear. That winow page is your application named Mainmenu.xaml. Right know you have two window pages.

    If you are now wathing Mainmenu.xaml and then you click on the “link” and a the page login.xaml will appear.

    In the login.xaml, there should be a button named close and if you press on it, the window Mainmenu.xaml will be close but mainIndex.xaml is still active.

    I need help to close Mainmenu.xaml without affectiong mainIndex.xaml.

  7. Obi says:

    Hello Azer89!
    I’m interest for your Multi-Page Application in WPF. But I can’t downloaded from your web side.
    I have try to write it from your guidance, but I have no success. Can you send me your source please?
    Have nice day und thanks

  8. sankar says:

    hi azer,i’m in need of same solution for multi paged script…..i ve downloaded ur zip file,but it couldnt execute on my studio…causing u ve used a newer version nd mine is older,,,,,,im using v.s 2008……..please give some solution for me

  9. Chris K. says:

    Exactly what I needed. Thanks for the fantastically simple solution!

  10. Sindhu Mayappa says:

    hi….
    Really its very nice example for navigation of page. It saves my time i learnt a easy way of doing it.
    Its fantastic…. Thank you…

  11. Hayden says:

    Hi, it’s a really nice tutorial.
    But mind if I ask something about the memory handling , as I tried implementing this page switcher but find my memory seems to increment , e.g.

    Page 1 use : 80MB
    Page 2 use: 60MB

    When I switch from page 1 to page 2, the memory is fine, but when I switch back to Page 1, the memory increment to 90MB, it is no longer 80 MB. I tried to switch to page 2, and it increment to 70MB, it is no longer 60MB.

    Do you have any advice for this?

    Many thanks from a beginner to WPF.

  12. Nithin says:

    can you tell me how to embed database connectivity within pages??is there any special operations we need to perform?? i did as we usually do on windows forms but it gives me errors!! can you help me…

  13. b4h4 says:

    In my WPF application there is several user controls and one MainWindow with ContentControl. To navigate between windows i just change the content of ContentControl to new UserControl(), But after some time i observed that when ContentControl have changed the previous content (UserControl()) does not free memory it used, Application used memory increase from 15 to 200, 300 mb very quickly. Thanks.

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

  15. KOMIN says:

    I’d like to create program with multipages. I have new thread where I only read data from serial port, tcp etc and I save data to table (while(true) {readdata(tab[]);}). And now I want to send data to several pages.How to do it?? Where in the code should I start my thread??Where I should declare my table in the code that will be available in all pages??

  16. Darren says:

    great tutorial, one question i have is when i add controls into a stack panel at runtime on a menu page they are not displayed. i guess i am missing something.

  17. Leonardo says:

    Congratulations, thank you.

  18. Ryan says:

    Hi. This is great example and I appreciate. But how I can host the pages/switchable user controls inside a container or in a grid? Thanks.

  19. William says:

    Thank you, it is just a great example of what I need, simple screen switch.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s