DialogService

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

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

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

    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 {
                //...
            }
        }
    }
    
  • 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.

    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 {
                //...
            }
        }
    }
    

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