DialogService

• Jun 02, 2020
• 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:

  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() {
    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
  );
  

  VB.NET

  Dim registerCommand As New UICommand() With {
      .Caption = "Register",
      .IsDefault = True,
      .Command = New DelegateCommand(
          Sub()
          End Sub,
          Function() (
          Not String.IsNullOrEmpty(detailViewModel.CustomerName)
          ))
  }
  Dim cancelCommand As New UICommand() With {
      .Caption = "Cancel",
      .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.

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

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 New UICommand() With {
                .Caption = "Register",
                .IsDefault = True,
                .Command = New DelegateCommand(
                    Sub()
                    End Sub,
                    Function() (
                    Not String.IsNullOrEmpty(detailViewModel.CustomerName)
                    ))
            }
            Dim cancelCommand As New UICommand() With {
                .Caption = "Cancel",
                .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 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.

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

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

RegistrationViewModel.cs

namespace Example.ViewModel {
    public class RegistrationViewModel {
        public virtual string UserName { get; set; }
    }
}

RegistrationView.xaml

<UserControl x:Class="Example.View.RegistrationView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                         
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm">
        <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Orientation="Horizontal">
        <TextBlock VerticalAlignment="Center" Text="User Name: " />
        <TextBox Width="200" Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}">
            <dxmvvm:Interaction.Behaviors>
                <dxmvvm:FocusBehavior />
            </dxmvvm:Interaction.Behaviors>
        </TextBox>
    </StackPanel>

</UserControl>

MainViewModel.cs

using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Windows;

namespace Example.ViewModel {
public class MainViewModel {
    protected IDialogService DialogService { get { return this.GetService<IDialogService>(); } }
    RegistrationViewModel registrationViewModel = null;
    public void ShowRegistrationForm() {
        if(registrationViewModel == null)
            registrationViewModel = new RegistrationViewModel();

        UICommand registerCommand = new UICommand() {
            Caption = "Register",
            IsCancel = false,
            IsDefault = true,
            Command = new DelegateCommand<CancelEventArgs>(
                x => myExecuteMethod(),
                x => !string.IsNullOrEmpty(registrationViewModel.UserName)),
        };

        UICommand cancelCommand = new UICommand() {
            Id = MessageBoxResult.Cancel,
            Caption = "Cancel",
            IsCancel = true,
            IsDefault = false,
        };

        UICommand result = DialogService.ShowDialog(
            dialogCommands: new List<UICommand>() { registerCommand, cancelCommand },
            title: "Registration Dialog",
            viewModel: registrationViewModel);

        if (result == registerCommand) {
            //...
        }
    }

    private void myExecuteMethod() {
        Debug.Print("Registration complete");
    }
}
}

RegistrationViewModel.vb

Namespace Example.ViewModel
    Public Class RegistrationViewModel
        Public Overridable Property UserName() As String
    End Class
End Namespace

MainViewModel.vb

Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.POCO
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Diagnostics
Imports System.Windows
Imports System.Windows.Input

Namespace Example.ViewModel
Public Class MainViewModel
    Protected ReadOnly Property DialogService() As IDialogService
        Get
            Return Me.GetService(Of IDialogService)()
        End Get
    End Property
    Private registrationViewModel As RegistrationViewModel = Nothing
    Public Sub ShowRegistrationForm()
        If registrationViewModel Is Nothing Then
            registrationViewModel = New RegistrationViewModel()
        End If

        Dim registerCommand As New UICommand() With {.Caption = "Register", .IsCancel = False, .IsDefault = True, .Command = New DelegateCommand(Of CancelEventArgs)(Sub(x) myExecuteMethod(), Function(x) (Not String.IsNullOrEmpty(registrationViewModel.UserName)))}

        Dim cancelCommand As New UICommand() With {.Id = MessageBoxResult.Cancel, .Caption = "Cancel", .IsCancel = True, .IsDefault = False}

        Dim result As UICommand = DialogService.ShowDialog(dialogCommands:= New List(Of UICommand)() From {registerCommand, cancelCommand}, title:= "Registration Dialog", viewModel:= registrationViewModel)

        If result Is registerCommand Then
            '...
        End If
    End Sub

    Private Sub myExecuteMethod()
        Debug.Print("Registration complete")
    End Sub
End Class
End Namespace