Recently someone asked what is a good way to show animated dialog boxes/controls while keeping the views and view models separated in an MVVM fashion.
My answer was to use data templates! Such that, you have a view model to represent a dialog box/control (I will refer to these as simply dialogs), whether it be an alert, modal view to edit properties, informational or anything else, and let the view decide how and where to show it by using a common service to which you can pass these alerts in.
Data templates allowed me to get an affect like this:
The view model layer could be represented using the following dependency graph:
The IDialogService
exposes 1 method (ShowDialog
) which is used by the view model in order to show any IDialog
, with an optional generic continuation Action<TDialog>
so some more logic can be carried out after the dialog closes. The IDialogService
also exposes 2 events (DialogShown
/ DialogClosed
) which allow any interested parties to carry out some action whenever a dialog is shown or closed. This is used by the MainViewModel
, which hosts the CurrentDialog
property, in order to show and hide dialogs.
public interface IDialogService
{
IContinueWith ShowDialog(TDialog dialog) where TDialog : IDialog;
event EventHandler DialogShown;
event EventHandler DialogClosed;
}
The MainViewModel
which is used as the DataContext
for the MainWindow
, looks like the following:
public class MainViewModel : ViewModelBase
{
public MainViewModel(IDialogService dialogService) { ... }
public RelayCommand CommandAboutMe { ... }
public IDialog CurrentDialog { ... }
public ObservableCollection Posts { ... }
}
The MainViewModel
, has the IDialogService
injected into it, and it subscribes to the IDialogService.DialogShown
and IDialogService.DialogClosed
events, which in turn set the CurrentDialog
to a given IDialog
(on shown) or null
(on closed). This allows the external sources to show and hide dialogs on the MainWindow
via the IDialogService
.
MainWindow.xaml
:
<Window x:Class="MvvmAnimatedDialogs.MainWindow" ... >
<Grid>
<DockPanel>
/* Content of window */
</DockPanel>
<ContentControl Content="{Binding CurrentDialog}" />
</Grid>
</Window>
In the MainWindow
, the DockPanel
contains all of the UI layout for the main window, and the ContentControl
is a place-holder for the dialogs, which is bound the the MainViewModel.CurrentDialog
. It uses the power of WPF data templates in order to decide how to display whatever IDialog
object it is bound to (via the CurrentDialog
property) and will display nothing if it is null
. It is important to either make the ContentControl
the last element, or set its Z-Index
to a value higher than any other Z-Index
, in order for the dialogs to be shown on top of everything else.
The ContentControl
will traverse up the tree, trying to find data templates for an object of the current type that its Content
property is bound to, so the data templates are placed as a ResourceDictionary
in the App.xaml
file.
<Application x:Class="MvvmAnimatedDialogs.App" ....
xmlns:viewModel="clr-namespace:MvvmAnimatedDialogs.ViewModel">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dialogs/DialogTemplates.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
And inside the DialogTemplates.xaml
, I have DataTemplates
for each concrete implementation of IDialog
.
DialogTemplates.xaml
<ResourceDictionary>
<DataTemplate DataType="{x:Type dialogs:SimpleDialog}" Resources="{StaticResource DialogResources}">
<Border>
<Border>
<Grid Margin="20">
<DockPanel Grid.Column="1">
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="OK" Command="{Binding CommandOk}" />
</StackPanel>
<TextBlock Text="{Binding Message}" />
</DockPanel>
</Grid>
</Border>
</Border>
</DataTemplate>
<DataTemplate DataType="{x:Type dialogs:OkCancelDialog}" Resources="{StaticResource DialogResources}">
<Border>
<Border>
<Grid Margin="20">
<DockPanel Grid.Column="1">
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="OK" Command="{Binding CommandOk}" />
<Button Content="Cancel" Command="{Binding CommandCancel}" />
</StackPanel>
<TextBlock Text="{Binding Message}" />
</DockPanel>
</Grid>
</Border>
</Border>
</DataTemplate>
</ResourceDictionary>
Yes I know the plumbing code for each dialog should be abstracted into its own UserControl
/CustomControl
but for this exercise copy + paste will have to suffice.
As usual, you can find all the code on GitHub @ codePerf/20150315-WpfMvvmAnimatedDialogs