DialogService

• Sep 28, 2022
• 8 minutes to read

View Example: How to: Use DialogService

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.

Get 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 Quick Actions

• declare the DialogService service:

  XAML

  <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:

• Services in ViewModelBase descendants
• Services in POCO objects
• Services in custom ViewModels

The code sample below shows how to access the service from a ViewModel that is a DevExpress.Mvvm.ViewModelBase descendant:

C#

public class MainViewModel : ViewModelBase {
    protected IDialogService DialogService { get { return this.GetService<IDialogService>(); } }
    // ...
}

VB.NET

Public Class MainViewModel
    Protected ReadOnly Property DialogService() As IDialogService
        Get
            Return Me.GetService(Of IDialogService)()
        End Get
    End Property
    ' ...
End Class

Define Dialog Content

Use the DialogService.ViewTemplate property to specify the displayed dialog content.

Xaml

<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 the ShowDialog method. In this case, the dialog returns the result of the DevExpress.Mvvm.MessageResult type (None, OK, Cancel, Yes, No).

  C#

  IDialogService service = this.GetService<IDialogService>(serviceName);
  MessageResult result = service.ShowDialog(
      dialogButtons: MessageButton.OKCancel,
      title: "Registration Dialog",
      viewModel: detailViewModel
  );
  

  VB.NET

  Dim service As IDialogService = Me.GetService(Of IDialogService)(serviceName)
  Dim result As MessageResult = service.ShowDialog(
      dialogButtons:=MessageButton.OKCancel,
      title:="Registration Dialog",
      viewModel:=detailViewModel
  )
  

  

• 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.

  C#

  UICommand registerCommand = new UICommand(
      id: null,
      caption: "Register",
      command: new DelegateCommand<CancelEventArgs>(
          cancelArgs => {
              try {
                  myExecuteMethod();
              }
              catch (Exception e) {
                  this.GetService<IMessageBoxService>().ShowMessage(e.Message, "Error", MessageButton.OK);
                  cancelArgs.Cancel = true;
              }
          },
          cancelArgs => !string.IsNullOrEmpty(registrationViewModel.UserName)
      ),
      isDefault: true,
      isCancel: false
  );
  
  UICommand cancelCommand = new UICommand(
      id: MessageBoxResult.Cancel,
      caption: "Cancel",
      command: null,
      isDefault: false,
      isCancel: true
  );
  
  IDialogService service = this.GetService<IDialogService>(serviceName);
  UICommand result = service.ShowDialog(
      dialogCommands: new[] { registerCommand, cancelCommand },
      title: "Registration Dialog",
      viewModel: detailViewModel
  );
  

  VB.NET

  Dim registerCommand As UICommand = New UICommand(
      id:=Nothing, 
      caption:="Register", 
      command:=New DelegateCommand(Of CancelEventArgs)(
          Function(cancelArgs)
              Try
                  myExecuteMethod()
              Catch e As Exception
                  Me.GetService(Of IMessageBoxService)().ShowMessage(e.Message, "Error", MessageButton.OK)
                  cancelArgs.Cancel = True
              End Try
          End Function, 
          Function(cancelArgs) 
              Not String.IsNullOrEmpty(registrationViewModel.UserName)), isDefault:=True, isCancel:=False)
  
  Dim cancelCommand As UICommand = New UICommand(
      id:=MessageBoxResult.Cancel, 
      caption:="Cancel", 
      command:=Nothing, 
      isDefault:=False, 
      isCancel:=True)
  
  Dim service As IDialogService = Me.GetService(Of IDialogService)(serviceName)
  
  Dim result As UICommand = 
      service.ShowDialog(
          dialogCommands:={registerCommand, cancelCommand}, 
          title:="Registration Dialog", 
          viewModel:=detailViewModel)
  

  

Refer to the Display a Dialog section below to find a list of the ShowDialog method overloads.

Add Asynchronous Buttons

The DialogService can display asynchronous buttons. These buttons indicate whether the associated asynchronous operation is in progress. Assign an asynchronous command to the UICommand.Command property and set the UICommand.AsyncDisplayMode property to Wait or WaitCancel to display the wait indicator:

C#

UICommand registerAsyncCommand = new UICommand(
    id: null,
    caption: "Register Async",
    command: new AsyncCommand<CancelEventArgs>(
        async cancelArgs => {
            try {
                await MyAsyncExecuteMethod();
            }
            catch (Exception e) {
                MessageBoxService.ShowMessage(e.Message, "Error", MessageButton.OK);
                cancelArgs.Cancel = true;
            }
        },
        cancelArgs => !string.IsNullOrEmpty(registrationViewModel.UserName)
    ),
    asyncDisplayMode: AsyncDisplayMode.Wait,
    isDefault: false,
    isCancel: false
);

VB.NET

Dim registerAsyncCommand As UICommand = New UICommand(
    id:=Nothing, 
    caption:="Register Async", 
    command:=New AsyncCommand(Of CancelEventArgs)(
        Async Function(cancelArgs)
            Try
                Await MyAsyncExecuteMethod()
            Catch e As Exception
                MessageBoxService.ShowMessage(e.Message, "Error", MessageButton.OK)
                cancelArgs.Cancel = True
            End Try
        End Function, 
        Function(cancelArgs) Not String.IsNullOrEmpty(registrationViewModel.UserName)), 
    asyncDisplayMode:=AsyncDisplayMode.Wait, 
    isDefault:=False, 
    isCancel:=False
)

Refer to the following help topic for more information: Asynchronous Commands.

Display a Dialog

To display a dialog with a View, use one of the IDialogService‘s ShowDialog extension methods depending on your MVVM architecture:

C#

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);
}

VB.NET

Public NotInheritable 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.
    <System.Runtime.CompilerServices.Extension> _
    Public Shared Function ShowDialog(service As IDialogService, dialogCommands As IEnumerable(Of UICommand), title As String, viewModel As Object) As UICommand
    <System.Runtime.CompilerServices.Extension> _
    Public Shared Function ShowDialog(service As IDialogService, dialogButtons As MessageButton, title As String, viewModel As Object) As MessageResult

    ' Use these methods to create a child View and pass the specified View Model to the created child View.
    <System.Runtime.CompilerServices.Extension> _
    Public Shared Function ShowDialog(service As IDialogService, dialogCommands As IEnumerable(Of UICommand), title As String, documentType As String, viewModel As Object) As UICommand
    System.Runtime.CompilerServices.Extension> _
    Public Shared Function ShowDialog(service As IDialogService, dialogButtons As MessageButton, title As String, documentType As String, viewModel As Object) As MessageResult

    ' 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.
    <System.Runtime.CompilerServices.Extension> _
    Public Shared Function ShowDialog(service As IDialogService, dialogCommands As IEnumerable(Of UICommand), title As String, documentType As String, parameter As Object, parentViewModel As Object) As UICommand
    <System.Runtime.CompilerServices.Extension> _
    Public Shared Function ShowDialog(service As IDialogService, dialogButtons As MessageButton, title As String, documentType As String, parameter As Object, parentViewModel As Object) As MessageResult
End Class

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.

C#

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(
                id: null,
                caption: "Register",
                command: new DelegateCommand<CancelEventArgs>(
                    cancelArgs => {
                        try {
                            myExecuteMethod();
                        }
                        catch (Exception e) {
                            this.GetService<IMessageBoxService>().ShowMessage(e.Message, "Error", MessageButton.OK);
                            cancelArgs.Cancel = true;
                        }
                    },
                    cancelArgs => !string.IsNullOrEmpty(registrationViewModel.UserName)
                ),
                isDefault: true,
                isCancel: false
            );

            UICommand cancelCommand = new UICommand(
                id: MessageBoxResult.Cancel,
                caption: "Cancel",
                command: null,
                isDefault: false,
                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);
        }
    }
}

VB.NET

Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.POCO

Namespace MVVMDemo.Services
    Public Class DialogServiceViewModel
        Public Sub ShowDetail(ByVal serviceName As String)
            Dim detailViewModel As DialogServiceDetailViewModel = DialogServiceDetailViewModel.Create()

            Dim registerCommand As UICommand = New UICommand(
                id:=Nothing, 
                caption:="Register", 
                command:=New DelegateCommand(Of CancelEventArgs)(
                    Function(cancelArgs)
                        Try
                            myExecuteMethod()
                        Catch e As Exception
                            Me.GetService(Of IMessageBoxService)().ShowMessage(e.Message, "Error", MessageButton.OK)
                            cancelArgs.Cancel = True
                        End Try
                    End Function, 
                    Function(cancelArgs) 
                        Not String.IsNullOrEmpty(registrationViewModel.UserName)), isDefault:=True, isCancel:=False)

            Dim cancelCommand As UICommand = New UICommand(
                id:=MessageBoxResult.Cancel, 
                caption:="Cancel", 
                command:=Nothing, 
                isDefault:=False, 
                isCancel:=True)

            Dim service As IDialogService = Me.GetService(Of IDialogService)(serviceName)
            Dim result As UICommand = service.ShowDialog(
                dialogCommands:={registerCommand, cancelCommand},
                title:="Registration Dialog",
                viewModel:=detailViewModel
            )

            If result Is registerCommand Then
                MessageBox.Show("Registered: " & detailViewModel.CustomerName)
            End If
        End Sub
    End Class
End Namespace

Adjust the Service Window

The following DialogService properties allow you to configure your service window:

• The ViewServiceBase.ViewTemplate inherited property specifies a dialog window’s template.
• The ViewServiceBase.ViewTemplateSelector inherited property specifies a DataTemplateSelector that chooses a ViewTemplate based on custom logic.
• The ViewServiceBase.ViewLocator inherited 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.

XAML

<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>
            <dx:DialogService SetWindowOwner="True"
                                  DialogWindowStartupLocation="CenterOwner">
                <dx:DialogService.DialogStyle>
                    <Style TargetType="dx:ThemedWindow">
                        <Setter Property="Width" Value="500" />
                        <Setter Property="Height" Value="300" />
                    </Style>
                </dx:DialogService.DialogStyle>
            </dx:DialogService>
        </dxmvvm:Interaction.Behaviors>
        ...
    </Grid>
</UserControl>