Skip to main content

DialogService

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

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

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:

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

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:

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

Adjust the Service Window

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

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