Click here to Skip to main content
15,868,164 members
Articles / Desktop Programming / WPF

XAML Dialog Control: Enabling MVVM and Dialogs in WPF

Rate me:
Please Sign up or sign in to vote.
4.70/5 (17 votes)
29 Apr 2009CPOL5 min read 110.7K   5.3K   52   9
Add Data Templated dialog to your application with a single line of XAML
MVVMDialogSample

Introduction

Wouldn't it be great if you could use dialogs like any other control in XAML? That is, drop in a <Dialog> element and have a modal dialog window appear? This would let Model-View-ViewModel (MVVM) programs show dialogs without touching the XAML's code behind; a feat not currently possible with Windows Presentation Foundation (WPF). This article presents the Dialog control which both simplifies dialogs and makes them work directly with MVVM.

Background

True proponents of MVVM believe that MVVM applications should have no substantial code behind for XAML files. This restriction guarantees that no ViewModel logic accidentally creeps into the View. Unfortunately, out of the box it's impossible to implement a dialog without writing some code behind. And even with code behind, the dialog won't have access to the automatic data template features of WPF because the dialog is treated as a separate logical tree. Because of these limitations, most MVVM applications simply don't use dialogs. This control solves many of these problems.

Using the Code

The dialog control is defined in the "DialogControl" folder of the sample code. It's all under the namespace MVVMDialogSample.DialogControl. To use it in an XAML file, first add the namespace to the parent element of your XAML:

XML
xmlns:dialog="clr-namespace:MVVMDialogSample.DialogControl"

Then add the Dialog as a child control. The dialog control won't actually appear in the UI, so simply place it where it will correctly inherit any required data templates. A simple dialog element looks like this:

XML
<dialog:Dialog Content="Hello World!" Showing="True" />

After adding the control to your XAML, a window may appear. This is because the Visual Studio XAML previewer is "previewing" your dialog. You have to close it before you can use Visual Studio again as it is a modal dialog. You can hide the dialog by setting Showing="False". Alternatively, the Showing property defaults to false.

Run the code and a window will appear with the content "Hello World!".

Much more interesting is to set or bind the Content property to a complex object. The dialog will pick up any applicable data templates from the main window and apply them to the content shown in the dialog window.

In MVVM, the most common usage of Dialog is to bind a property of the ViewModel to the Content property of the Dialog. For example:

XML
<dialog:Dialog Content="{Binding Path=DialogViewModel}" /> 

Then, set a trigger on the Dialog which shows the dialog only when it has Content. To show the dialog window, simply set the bound ViewModel property to whatever you want to display in the dialog. To hide it, simply set the bound property to null. Here's a style that shows the dialog only when it has content:

XML
<Style TargetType="{x:Type dialog:Dialog}">
 <Style.Triggers>
  <Trigger Property="HasContent" Value="True">
   <Setter Property="Showing" Value="True" />
  </Trigger>
 </Style.Triggers>
</Style>

Additionally, most MVVM applications will bind a ViewModel ICommand to the CancelCommand property. The Dialog will invoke the command stored in the CancelCommand property if the user closes the dialog by clicking the X. This allows the ViewModel to clean up if the user forcibly cancels.

Because the dialog control inherits from ContentControl, it has some extra properties that don't have any effect. In fact, the only properties that do anything are as follows:

  • Content - See the documentation for ContentControl.
  • ContentStringFormat - See the documentation for ContentControl.
  • ContentTemplate - See the documentation for ContentControl. Unfortunately, WPF has a bug where setting this property on a Window with a Template that contains a ContentPresenter will throw an exception, rendering this property pretty much useless. Thus, to format content you must rely on ContentTemplateSelector or a DataTemplate.
  • ContentTemplateSelector - See the documentation for ContentControl. If this property and ContentTemplate property are unspecified, the dialog control will attempt to find an appropriate data template.
  • DataContext - See the documentation for ContentControl.
  • Title - The title of the dialog.
  • Showing - Whether the dialog is showing or not.
  • CancelCommand - ICommand that is invoked when the dialog is cancelled.
  • WindowTemplate - The ControlTemplate for the Window. Must have a root element that derives from or is of type Window. A default Window is specified in "Themes\Generic.xaml".

Points of Interest

This control works mainly by binding properties of Dialog control to an instance of Window so the Window stays in sync. However, getting the DataTemplate from the dialog control to the dialog window takes a little more work. The dialog window has a special DataTemplateSelector which asks the dialog control what DataTemplate to use. Since the dialog control is in the logical tree of the main window, it chooses the correct DataTemplate. In this way, the dialog window gets the DataTemplate as though it were a control in the main window's logical tree. This would all be made much easier if the Window class could be added as a logical child of another tree but the code specifically disallows this.

The control also delays evaluation of the dialog's visibility when the Showing property changes. This is to prevent the dialog's ShowDialog() and Hide() from being called over and over again if the Showing property is changed multiple times due to coercion or styles. It delays evaluation by hooking a delegate to the Windows message pump via Application.Current.Dispatcher. The delegate evaluates the visibility once. While this is not strictly necessary, it reduces the number of Hide() and ShowDialog() calls that are made in complicated cases.

History

  • 2009/04/25
    • Made control lookless
    • Window is destroyed and recreated on each ShowDialog() and Close() which makes IsCancel work all the time
    • Moved Window specification to "Generic.xaml" and added WindowTemplate property
    • Hooked up ContentStringFormat, ContentTemplate, ContentTemplateSelector to Window
  • 2009/04/15
    • First published

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Hidden City Games
United States United States
Alexander Jhin currently works at Hidden City Games and has worked at Microsoft. Any articles I post are my own and are not representative of Hidden City Games or Microsoft.

Comments and Discussions

 
GeneralMy vote of 5 Pin
zommarin10-Feb-14 8:38
zommarin10-Feb-14 8:38 
Suggestionsmall improvement Pin
Mr.PoorEnglish22-Apr-13 15:00
Mr.PoorEnglish22-Apr-13 15:00 
The Sample produces a System.Windows.Data Error caused from the TitlePropertyBinding:
Value produced by BindingExpression is not valid for target property.; Value='<null>' BindingExpression:Path=Title; DataItem='Dialog' (Name=''); target element is 'Window' (Name=''); target property is 'Title' (type 'String')
you can solve that by registering the TitleProperty with "" as DefaultValue:
C#
/*public static readonly DependencyProperty TitleProperty =
   DependencyProperty.Register("Title", typeof(string), typeof(Dialog), new FrameworkPropertyMetadata(null));*/
public static readonly DependencyProperty TitleProperty =
   DependencyProperty.Register("Title", typeof(string), typeof(Dialog), new FrameworkPropertyMetadata(""));

GeneralVote of 5 Pin
GRF7528-Feb-13 8:26
GRF7528-Feb-13 8:26 
GeneralMy vote of 5 Pin
Vinit Yadav13-Apr-11 22:59
professionalVinit Yadav13-Apr-11 22:59 
GeneralMy vote of 4 Pin
aeternam8-Mar-11 2:28
aeternam8-Mar-11 2:28 
QuestionNew version? Pin
SeriousM4-Aug-09 22:25
SeriousM4-Aug-09 22:25 
GeneralJust what I needed Pin
josepaulino4-May-09 4:07
josepaulino4-May-09 4:07 
GeneralMy vote of 1 Pin
Tawani Anyangwe2-May-09 9:24
Tawani Anyangwe2-May-09 9:24 
NewsUpdated Version Coming Soon! Pin
DoomGoober19-Apr-09 19:36
DoomGoober19-Apr-09 19:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.