DialogService

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

    IDialogService service = this.GetService<IDialogService>(serviceName);
    MessageResult result = 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.

    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.

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