DialogService

• Mar 02, 2021
• 5 minutes to read

The DialogService is a DevExpress.Mvvm.IDialogService implementation that allows you to show a dialog window and get its result.

Getting Started

Attach the Service

Use the DialogService to show a dialog from a ViewModel. Declare and assign the DialogService to your View:

XAML

<UserControl ...
    xmlns:dxmvvmi="using:DevExpress.WinUI.Mvvm.UI.Interactivity"
    xmlns:dxmvvm="using:DevExpress.WinUI.Mvvm.UI">
    <UserControl.DataContext>
        <local:ViewModel/>
    </UserControl.DataContext>
    <dxmvvmi:Interaction.Behaviors>
        <dxmvvm:DialogService/>
    </dxmvvmi:Interaction.Behaviors>
    ...
</UserControl>

Access the Service

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 ...
    xmlns:dxmvvmi="using:DevExpress.WinUI.Mvvm.UI.Interactivity"
    xmlns:dxmvvm="using:DevExpress.WinUI.Mvvm.UI">
    <UserControl.DataContext>
        <local:ViewModel/>
    </UserControl.DataContext>
    <UserControl.Resources>
        <DataTemplate x:Key="dialogTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock VerticalAlignment="Center" Text="User Name: " />
                <TextBox Width="200" Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                    <dxmvvmi:Interaction.Behaviors>
                        <dxmvvm:FocusBehavior />
                    </dxmvvmi:Interaction.Behaviors>
                </TextBox>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>
    <dxmvvmi:Interaction.Behaviors>
        <dxmvvm:DialogService ViewTemplate="{StaticResource dialogTemplate}" />
    </dxmvvmi:Interaction.Behaviors>
        ...
</UserControl>

Display a Dialog

Use the DialogService.ShowDialogAsync method to display a dialog with a View.

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#

  public class RegistrationViewModel : BindableBase {
      public string UserName { get { return GetProperty<string>(); } set { SetProperty(value); } }
  }
  public class ViewModel : ViewModelBase {
      public DelegateCommand ShowRegistrationFormCommand { get; private set; }
      protected IDialogService DialogService { get { return this.GetService<IDialogService>(); } }
  
      public ViewModel() {
          ShowRegistrationFormCommand = new DelegateCommand(() => ShowRegistrationForm());
      }
      public async void ShowRegistrationForm() {
          var dialogViewModel = new RegistrationViewModel();
          MessageResult result = await DialogService.ShowDialogAsync(
              dialogButtons: MessageButton.OKCancel,
              title: "Registration Dialog",
              viewModel: dialogViewModel
          );
          if(result == MessageResult.OK) {
              if(string.IsNullOrEmpty(dialogViewModel.UserName)) {
                  //...
              } else {
                  //...
              }
          } else {
              //...
          }
      }
  }
  

  VB.NET

  Public Class RegistrationViewModel
      Inherits BindableBase
  
      Public Property UserName() As String
          Get
              Return GetProperty(Of String)()
          End Get
          Set(ByVal value As String)
              SetProperty(value)
          End Set
      End Property
  End Class
  Public Class ViewModel
      Inherits ViewModelBase
  
      Private privateShowRegistrationFormCommand As DelegateCommand
      Public Property ShowRegistrationFormCommand() As DelegateCommand
          Get
              Return privateShowRegistrationFormCommand
          End Get
          Private Set(ByVal value As DelegateCommand)
              privateShowRegistrationFormCommand = value
          End Set
      End Property
      Protected ReadOnly Property DialogService() As IDialogService
          Get
              Return Me.GetService(Of IDialogService)()
          End Get
      End Property
  
      Public Sub New()
          ShowRegistrationFormCommand = New DelegateCommand(Sub() ShowRegistrationForm())
      End Sub
      Public Async Sub ShowRegistrationForm()
          Dim dialogViewModel = New RegistrationViewModel()
          Dim result As MessageResult = Await DialogService.ShowDialogAsync(dialogButtons:= MessageButton.OKCancel, title:= "Registration Dialog", viewModel:= dialogViewModel)
          If result Is MessageResult.OK Then
              If String.IsNullOrEmpty(dialogViewModel.UserName) Then
                  '...
              Else
                  '...
              End If
          Else
              '...
          End If
      End Sub
  End Class
  

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

  public class RegistrationViewModel : BindableBase {
      public string UserName { get { return GetProperty<string>(); } set { SetProperty(value, OnUserNameChanged); } }
      public UICommand OKCommand { get; private set; }
      public UICommand CancelCommand { get; private set; }
  
      public RegistrationViewModel() {
          OKCommand = new UICommand() {
              Caption = "OK",
              IsDefault = true,
              Command = new DelegateCommand(
                  () => { },
                  () => !string.IsNullOrEmpty(UserName))
          };
          CancelCommand = new UICommand() {
              Caption = "Cancel",
              IsCancel = true,
          };
      }
      void OnUserNameChanged() {
          ((DelegateCommand)OKCommand.Command).RaiseCanExecuteChanged();
      }
  }
  public class ViewModel : ViewModelBase {
        ...
      public async void ShowRegistrationForm() {
          var dialogViewModel = new RegistrationViewModel();
          UICommand result = await DialogService.ShowDialogAsync(
              dialogCommands: new[] { dialogViewModel.OKCommand, dialogViewModel.CancelCommand },
              title: "Registration Dialog",
              viewModel: dialogViewModel
          );
          if(result == dialogViewModel.OKCommand) {
              //..
          } else {
              //...
          }
      }
  }
  

  VB.NET

  Public Class RegistrationViewModel
      Inherits BindableBase
  
      Public Property UserName() As String
          Get
              Return GetProperty(Of String)()
          End Get
          Set(ByVal value As String)
              SetProperty(value, AddressOf OnUserNameChanged)
          End Set
      End Property
      Private privateOKCommand As UICommand
      Public Property OKCommand() As UICommand
          Get
              Return privateOKCommand
          End Get
          Private Set(ByVal value As UICommand)
              privateOKCommand = value
          End Set
      End Property
      Private privateCancelCommand As UICommand
      Public Property CancelCommand() As UICommand
          Get
              Return privateCancelCommand
          End Get
          Private Set(ByVal value As UICommand)
              privateCancelCommand = value
          End Set
      End Property
  
      Public Sub New()
          OKCommand = New UICommand() With {.Caption = "OK", .IsDefault = True, .Command = New DelegateCommand(Function()
  
          End Function, Function() Not String.IsNullOrEmpty(UserName))}
          CancelCommand = New UICommand() With {
              .Caption = "Cancel",
              .IsCancel = True
          }
      End Sub
      Private Sub OnUserNameChanged()
          CType(OKCommand.Command, DelegateCommand).RaiseCanExecuteChanged()
      End Sub
  End Class
  Public Class ViewModel
      Inherits ViewModelBase
  
        '...
      Public Async Sub ShowRegistrationForm()
          Dim dialogViewModel = New RegistrationViewModel()
          Dim result As UICommand = Await DialogService.ShowDialogAsync(dialogCommands:= { dialogViewModel.OKCommand, dialogViewModel.CancelCommand }, title:= "Registration Dialog", viewModel:= dialogViewModel)
          If result Is dialogViewModel.OKCommand Then
              '..
          Else
              '...
          End If
      End Sub
  End Class
  

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 target type is DevExpress.WinUI.Mvvm.UI.DialogContentControl.

XAML

<UserControl ...
    xmlns:dxmvvm="using:DevExpress.WinUI.Mvvm.UI"
    xmlns:dxmvvmi="using:DevExpress.WinUI.Mvvm.UI.Interactivity">
    <Grid>
        <dxmvvm:DialogService x:Name="DialogService" >
            <dxmvvm:DialogService.ViewTemplate>
                <DataTemplate>
                    <local:RegistrationView />
                </DataTemplate>
            </dxmvvm:DialogService.ViewTemplate>
            <dxmvvm:DialogService.DialogStyle>
                <Style TargetType="dxmvvm:DialogContentControl">
                    <Setter Property="Width" Value="300" />
                    <Setter Property="Height" Value="160" />
                </Style>
            </dxmvvm:DialogService.DialogStyle>
        </dxmvvm:DialogService>
        ...
    </Grid>
</UserControl>