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?

ASh
  • 34,632
  • 9
  • 60
  • 82
Steve
  • 2,227
  • 3
  • 16
  • 9

5 Answers5

383

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

Community
  • 1
  • 1
Rachel
  • 130,264
  • 66
  • 304
  • 490
  • 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 '13 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 '13 at 03: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 '13 at 15:18
  • @Rachel (1/2)Quick question if you dont mind. I am wondering about my approach to this task. I have a basic form class with a structure that I can map to my SQL. And my original idea was to have several child classes that basically interfaced the generic fields with the specific data, for instance _Alpha101 might be FirstName on one form but Description on another. The original idea just had these treated as objects, but I think I might be able to do a MVVM model. My thought is to keep the basic form as the model but then to make the Specific forms as the ViewModel? – Herrozerro Jun 13 '13 at 16:02
  • @Rachel (2/2) The specific ViewModel's properties would then become the mappings to the generic fields of the model. IE: _Firstname {Get{return _Alpha101} set{_Alpha101 = value}}? and then the viewmodel would also be responsible for processing the model to update or add to sql? thanks! – Herrozerro Jun 13 '13 at 16:04
  • 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 '13 at 19:56
  • "http://windowsclient.net/learn/video.aspx?v=4190" is 'dead'. Navigates to a common getting started with .Net page. – Mike de Klerk Feb 06 '17 at 08:58
  • @Rachel do you think it's also a good idea to use this UserControl-way for TabControl? So for each tab a usercontrol is assigned. Does that make sense? – gts13 Apr 10 '17 at 13:49
  • 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](http://stackoverflow.com/a/7191534/302677) – Rachel Apr 10 '17 at 14:24
  • To add to the answer, I found the Prism framework useful for MVVM implementation https://github.com/PrismLibrary/Prism – JeeShen Lee Oct 04 '20 at 07:00
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

Rachel
  • 130,264
  • 66
  • 304
  • 490
Tigran
  • 61,654
  • 8
  • 86
  • 123
  • 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 '12 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 '12 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 '12 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.) – Martin Liversage Aug 31 '12 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

sellmeadog
  • 7,437
  • 1
  • 31
  • 45
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

mrid
  • 5,782
  • 5
  • 28
  • 71
dnxit
  • 7,118
  • 2
  • 30
  • 34
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?

Community
  • 1
  • 1
Hitesh
  • 3,508
  • 1
  • 18
  • 24