220

I am currently writing a desktop application, but I cannot seem to get my head around what to use when redirecting someone to a new section of the application.

My options appear to be

  • Window
  • Page
  • UserControl

but I don't understand what the difference between them is, and when I should use each one.

Could someone explain the differences for me, and give an example of what situations/applications you may use each one for?

0

5 Answers 5

385

A Window object is just what it sounds like: its a new Window for your application. You should use it when you want to pop up an entirely new window. I don't often use more than one Window in WPF because I prefer to put dynamic content in my main Window that changes based on user action.

A Page is a page inside your Window. It is mostly used for web-based systems like an XBAP, where you have a single browser window and different pages can be hosted in that window. It can also be used in Navigation Applications like sellmeadog said.

A UserControl is a reusable user-created control that you can add to your UI the same way you would add any other control. Usually I create a UserControl when I want to build in some custom functionality (for example, a CalendarControl), or when I have a large amount of related XAML code, such as a View when using the MVVM design pattern.

When navigating between windows, you could simply create a new Window object and show it

var NewWindow = new MyWindow();
newWindow.Show();

but like I said at the beginning of this answer, I prefer not to manage multiple windows if possible.

My preferred method of navigation is to create some dynamic content area using a ContentControl, and populate that with a UserControl containing whatever the current view is.

<Window x:Class="MyNamespace.MainWindow" ...>
    <DockPanel>
        <ContentControl x:Name="ContentArea" />
    </DockPanel>
</Window>

and in your navigate event you can simply set it using

ContentArea.Content = new MyUserControl();

But if you're working with WPF, I'd highly recommend the MVVM design pattern. I have a very basic example on my blog that illustrates how you'd navigate using MVVM, using this pattern:

<Window x:Class="SimpleMVVMExample.ApplicationView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SimpleMVVMExample"
        Title="Simple MVVM Example" Height="350" Width="525">

   <Window.Resources>
      <DataTemplate DataType="{x:Type local:HomeViewModel}">
         <local:HomeView /> <!-- This is a UserControl -->
      </DataTemplate>
      <DataTemplate DataType="{x:Type local:ProductsViewModel}">
         <local:ProductsView /> <!-- This is a UserControl -->
      </DataTemplate>
   </Window.Resources>

   <DockPanel>
      <!-- Navigation Buttons -->
      <Border DockPanel.Dock="Left" BorderBrush="Black"
                                    BorderThickness="0,0,1,0">
         <ItemsControl ItemsSource="{Binding PageViewModels}">
            <ItemsControl.ItemTemplate>
               <DataTemplate>
                  <Button Content="{Binding Name}"
                          Command="{Binding DataContext.ChangePageCommand,
                             RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                          CommandParameter="{Binding }"
                          Margin="2,5"/>
               </DataTemplate>
            </ItemsControl.ItemTemplate>
         </ItemsControl>
      </Border>

      <!-- Content Area -->
      <ContentControl Content="{Binding CurrentPageViewModel}" />
   </DockPanel>
</Window>

Screenshot1 Screenshot2

10
  • I have a question, MVVM from what I can tell seems to work well with datasets, but what about static forms like for instance an entry form for an audit. Should I be using a page or usercontrol for static pages?
    – Herrozerro
    Jun 12, 2013 at 20:05
  • 2
    @Herrozerro If I wanted to make an Audit form using MVVM, I'd have an AuditViewModel containing all the data and functionality for the form, and I'd draw it using either an AuditView UserControl, or just a DataTemplate
    – Rachel
    Jun 13, 2013 at 3:22
  • 1
    Thanks! Actually After going through your blog and a few other sites, I have a better understanding of how MVVM works.
    – Herrozerro
    Jun 13, 2013 at 15:18
  • 1
    @Herrozerro The ViewModel is typically built for the View, while the Models are the data objects and classes ("building blocks") used by your application (ViewModels)
    – Rachel
    Jun 13, 2013 at 19:56
  • 1
    @GTS13 Yes I do that frequently. I bind the TabControl.ItemsSource to a collection of objects, and use DataTemplates to tell WPF how to draw each object type on each tab. Usually something like this
    – Rachel
    Apr 10, 2017 at 14:24
15
  • Window is like Windows.Forms.Form, so just a new window
  • Page is, according to online documentation:

    Encapsulates a page of content that can be navigated to and hosted by Windows Internet Explorer, NavigationWindow, and Frame.

    So you basically use this if going you visualize some HTML content

  • UserControl is for cases when you want to create some reusable component (but not standalone one) to use it in multiple different Windows

4
  • Thank you for your answer. So for example if you were building an app that had buttons on the left but you wanted to see the content inside these buttons on the right hand side you would use a user control?
    – Steve
    Aug 30, 2012 at 22:07
  • @Steve: use UserControl in case where you think the same set of controls you gonna use on this window you will use on some other one too, so instead of writing double code, just create a UserControl, but if not, just put controls for visualization of your data on the Window itself, on right side from the buttons you mantioned.
    – Tigran
    Aug 30, 2012 at 22:12
  • 6
    There's one more item that I think should be added: DataTemplates. These are used when you want to tell WPF how to draw an item within a specific scope. For example, if you wanted to draw your Buttons to be round circles, you could simply use a DataTemplate instead of a UserControl. I usually use UserControls when I want a new control with its own functionality, or when I have a lot of XAML for a single component, such as for a View. For smaller bits of XAML that don't require any special functionality, you should use a DataTemplate instead of creating a UserControl
    – Rachel
    Aug 31, 2012 at 12:51
  • 4
    In general the contents of a Page is not HTML but XAML. However, a Page is tied into the navigation framework that is conceptually similar to how navigation is done in a web browser. (And pages can even be hosted in a browser if the application is an XBAP application.) Aug 31, 2012 at 13:12
7

All depends on the app you're trying to build. Use Windows if you're building a dialog based app. Use Pages if you're building a navigation based app. UserControls will be useful regardless of the direction you go as you can use them in both Windows and Pages.

A good place to start exploring is here: http://windowsclient.net/learn

6

We usually use One Main Window for the application and other windows can be used in situations like when you need popups because instead of using popup controls in XAML which are not visible we can use a Window that is visible at design time so that'll be easy to work with

on the other hand we use many pages to navigate from one screen to another like User management screen to Order Screen etc In the main Window we can use Frame control for navigation like below XAML

    <Frame Name="mainWinFrame" NavigationUIVisibility="Hidden"  ButtonBase.Click="mainWinFrame_Click">
    </Frame>

C#

     private void mainWinFrame_Click(object sender, RoutedEventArgs e)
    {
        try
        {
            if (e.OriginalSource is Button)
            {
                Button btn = (Button)e.OriginalSource;

                if ((btn.CommandParameter != null) && (btn.CommandParameter.Equals("Order")))
                {

                    mainWinFrame.Navigate(OrderPage);
                }
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message, "Error");
        }
    }

That's one way of doing it We can also use a Tab Control instead of Fram and Add pages to it using a Dictionary while adding new page check if the control already exists then only navigate otherwise add and navigate. I hope that'll help someone

2

Most of all has posted correct answer. I would like to add few links, so that you can refer to them and have clear and better ideas about the same:

UserControl: http://msdn.microsoft.com/en-IN/library/a6h7e207(v=vs.71).aspx

The difference between page and window with respect to WPF: Page vs Window in WPF?

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.