DialogService
- 8 minutes to read
The DialogService allows you to show a modal dialog window (ThemedWindow) and get its result.
The service implements the DevExpress.Mvvm.IDialogService interface.
Use the WinUIDialogService to display a modal window in the Windows 8 or Windows 10 style.
Getting Started
Attach the Service
Use the DialogService to show a dialog from a ViewModel. Assign the DialogService service to your View in any of the following ways:
attach the DialogService service to a View with the Smart Tag
declare the DialogService service:
<UserControl ... xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"> <dxmvvm:Interaction.Behaviors> <dx:DialogService/> </dxmvvm:Interaction.Behaviors> ... </UserControl>
Access the Service
Refer to the following topics for more information on how to access a service in a ViewModel:
The code sample below shows how to access the service from a ViewModel that is a DevExpress.Mvvm.ViewModelBase descendant:
public class MainViewModel : ViewModelBase {
protected IDialogService DialogService { get { return this.GetService<IDialogService>(); } }
// ...
}
Define Dialog Content
Use the DialogService.ViewTemplate property to specify the displayed dialog content.
<UserControl x:Class="MVVMDemo.Services.DialogServiceView"
...
DataContext="{dxmvvm:ViewModelSource local:DialogServiceViewModel}">
<UserControl.Resources>
<DataTemplate x:Key="dialogTemplate">
<dxlc:LayoutControl Orientation="Vertical" VerticalAlignment="Top" MinWidth="300">
<dxlc:LayoutItem Label="Customer Name:">
<dxe:TextEdit Text="{Binding CustomerName, UpdateSourceTrigger=PropertyChanged}"/>
</dxlc:LayoutItem>
</dxlc:LayoutControl>
</DataTemplate>
</UserControl.Resources>
<dxmvvm:Interaction.Behaviors>
<!-- The ViewTemplate property specifies the dialog template -->
<dx:DialogService x:Name="DialogService" ViewTemplate="{StaticResource dialogTemplate}">
<dx:DialogService.DialogStyle>
<Style TargetType="Window">
<Setter Property="SizeToContent" Value="WidthAndHeight" />
<Setter Property="WindowStyle" Value="ToolWindow" />
</Style>
</dx:DialogService.DialogStyle>
</dx:DialogService>
</dxmvvm:Interaction.Behaviors>
...
</UserControl>
Define Dialog Buttons
You can define dialog buttons in the following ways:
Pass a
DevExpress.Mvvm.MessageButton
enumeration value (OK, OKCancel, YesNoCancel, YesNo) to theShowDialog
method. In this case, the dialog returns the result of theDevExpress.Mvvm.MessageResult
type (None, OK, Cancel, Yes, No).Pass a collection of the DevExpress.Mvvm.UICommand objects to the
ShowDialog
method. In this case, the dialog returns a result of the DevExpress.Mvvm.UICommand type.UICommand registerCommand = new UICommand() { Caption = "Register", IsDefault = true, Command = new DelegateCommand( () => { }, () => !string.IsNullOrEmpty(detailViewModel.CustomerName) ) }; UICommand cancelCommand = new UICommand() { Caption = "Cancel", IsCancel = true, }; IDialogService service = this.GetService<IDialogService>(serviceName); UICommand result = service.ShowDialog( dialogCommands: new[] { registerCommand, cancelCommand }, title: "Registration Dialog", viewModel: detailViewModel );
Refer to the Display a Dialog section below to find a list of the ShowDialog
method overloads.
Display a Dialog
To display a dialog with a View, use one of the IDialogService‘s ShowDialog extension methods depending on your MVVM architecture:
public static class DialogServiceExtensions {
// Use these methods when the a child View is defined though the DialogService.ViewTemplate or DialogService.ViewTemplateSelector property.
//The child View should not contain a View Model, because it is passed through the service.
public static UICommand ShowDialog(this IDialogService service, IEnumerable<UICommand> dialogCommands, string title, object viewModel);
public static MessageResult ShowDialog(this IDialogService service, MessageButton dialogButtons, string title, object viewModel);
// Use these methods to create a child View and pass the specified View Model to the created child View.
public static UICommand ShowDialog(this IDialogService service, IEnumerable<UICommand> dialogCommands, string title, string documentType, object viewModel);
public static MessageResult ShowDialog(this IDialogService service, MessageButton dialogButtons, string title, string documentType, object viewModel);
// Use these methods to create a child View that already contains a View Model.
// The Parameter and ParentViewModel are passed to the child View Model.
public static UICommand ShowDialog(this IDialogService service, IEnumerable<UICommand> dialogCommands, string title, string documentType, object parameter, object parentViewModel);
public static MessageResult ShowDialog(this IDialogService service, MessageButton dialogButtons, string title, string documentType, object parameter, object parentViewModel);
}
Refer to the View creation mechanisms document for more information.
The code sample below demonstrates how to show a dialog with the Register and Cancel buttons.
using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;
namespace MVVMDemo.Services {
public class DialogServiceViewModel {
public void ShowDetail(string serviceName) {
DialogServiceDetailViewModel detailViewModel = DialogServiceDetailViewModel.Create();
UICommand registerCommand = new UICommand() {
Caption = "Register",
IsDefault = true,
Command = new DelegateCommand(
() => { },
() => !string.IsNullOrEmpty(detailViewModel.CustomerName)
)
};
UICommand cancelCommand = new UICommand() {
Caption = "Cancel",
IsCancel = true,
};
IDialogService service = this.GetService<IDialogService>(serviceName);
UICommand result = service.ShowDialog(
dialogCommands: new[] { registerCommand, cancelCommand },
title: "Registration Dialog",
viewModel: detailViewModel
);
if(result == registerCommand)
MessageBox.Show("Registered: " + detailViewModel.CustomerName);
}
}
}
Adjust the Service Window
The following DialogService properties allow you to configure your service window:
- The ViewTemplate property specifies a dialog window’s template.
- The ViewTemplateSelector property specifies a DataTemplateSelector that chooses a ViewTemplate based on custom logic.
- The ViewLocator property specifies a ViewLocator that creates a child View based on the passed view type.
- The DialogStyle property sets the dialog window’s Style.
- The DialogWindowStartupLocation property specifies a dialog window’s startup position.
<UserControl ...
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm">
<Grid>
<dxmvvm:Interaction.Behaviors>
<dxmvvm:DialogService SetWindowOwner="True"
WindowStartupLocation="CenterOwner">
<dxmvvm:DialogService.DialogStyle>
<Style TargetType="dx:ThemedWindow">
<Setter Property="Width" Value="500" />
<Setter Property="Height" Value="300" />
</Style>
</dxmvvm:DialogService.DialogStyle>
</dxmvvm:DialogService>
</dxmvvm:Interaction.Behaviors>
...
</Grid>
</UserControl>
Example
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-dialogservice-t145641.
- MainView.xaml
- RegistrationViewModel.cs
- RegistrationView.xaml
- MainViewModel.cs
- RegistrationViewModel.vb
- MainViewModel.vb
<UserControl x:Class="Example.View.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:ViewModel="clr-namespace:Example.ViewModel"
xmlns:View="clr-namespace:Example.View"
DataContext="{dxmvvm:ViewModelSource ViewModel:MainViewModel}">
<dxmvvm:Interaction.Behaviors>
<dx:DialogService DialogWindowStartupLocation="CenterOwner">
<dx:DialogService.ViewTemplate>
<DataTemplate>
<View:RegistrationView />
</DataTemplate>
</dx:DialogService.ViewTemplate>
<dx:DialogService.DialogStyle>
<Style TargetType="dx:ThemedWindow">
<Setter Property="Width" Value="300" />
<Setter Property="Height" Value="160" />
</Style>
</dx:DialogService.DialogStyle>
</dx:DialogService>
</dxmvvm:Interaction.Behaviors>
<Grid x:Name="LayoutRoot" Background="White">
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ShowRegistrationFormCommand}"
Content="Show Registration Form" />
</Grid>
</UserControl>