UI Services

• Jun 08, 2022
• 3 minutes to read

You can use services to access UI functionality from your view model in MVVM applications. Although services are defined within Views, their functionality can still be invoked from View Models that do not include information about Views.

Run Demo: UI Services Module in the WinUI MVVM Demo

Add a UI Service

The Interaction class implements the attached Behaviors property. To use a UI Service, place it in that collection.

ViewModel is in DataContext

To access a UI Service from a ViewModel, the ViewModel must implement the ISupportUIServices interface. You can derive your ViewModel from the ViewModelBase class or use the DevExpress.Mvvm.CodeGenerators to generate a ViewModel that implements ISupportUIServices at compile time.

The following code sample registers a UI Service in the service-associated object’s DataContext:

XAML

<UserControl ...
    xmlns:dx="using:DevExpress.WinUI.Core"
    xmlns:ViewModel="using:WinUIApp.ViewModel"> 
    <UserControl.DataContext>
        <ViewModel:ViewModel/> 
        <!--This ViewModel has access to the MessageBoxService defined below-->
    </UserControl.DataContext>

    <dx:Interaction.Behaviors>
        <dx:MessageBoxService/>
    </dx:Interaction.Behaviors>
</UserControl>

ViewModel is Stored in a View’s Property

You can use the ServiceClient property to register a service in the specified ViewModel. Use this technique when you do not need to place a View Model in the DataContext:

XAML

<UserControl ...
    x:Class="WinUIApp.View"
    xmlns:dx="using:DevExpress.WinUI.Core"
    xmlns:ViewModel="using:WinUIApp.ViewModels"> 
    <dx:Interaction.Behaviors>
        <dx:MessageBoxService ServiceClient="{x:Bind ViewModel}"/>
    </dx:Interaction.Behaviors>
    <!-- ... -->
</UserControl>

C#

public sealed partial class View : UserControl {
    public ViewModel ViewModel { get; } = new ViewModel();
    public View() {
        this.InitializeComponent();
    }
}

Access a UI Service of a View Model

Call the GetUIService method to access UI Services that are defined in a View Model:

C#

public class ViewModel : ViewModelBase {
    IMessageBoxService MessageBoxService => GetUIService<IMessageBoxService>();

    [GenerateCommand]
    void Register()
    {
        MessageBoxService.ShowAsync($"{UserName} was successfully registered!", "Registration");
    }
}

Predefined UI Services

DevExpress WinUI Controls include the following predefined UI Services:

DispatcherService

A UI service that allows you to use the DispatcherQueue to perform actions in a ViewModel.

MessageBoxService

The UI service that allows you to show messages.

UIObjectService

The UI Service that provides direct access to the service’s AssociatedObject from the View Model without referencing the AssociatedObject’s real type.

Create a Custom Service

Each service is a UIServiceBase<T> class descendant. The T parameter defines the associated control type. The following code sample specifies a service that you can apply only to a GridControl or its descendants:

MainWindow.xaml.cs

public class GridUpdateService : UIServiceBase<GridControl>, IUpdateService {
    public void BeginUpdate() {
        AssociatedObject?.BeginDataUpdate();
    }
    public void EndUpdate() {
        AssociatedObject?.EndDataUpdate();
    }
}

The UI Service in the code sample above is available from the View Model layer.

The UIServiceBase<T> class contains the AssociatedObject property. The DevExpress MVVM Framework specifies this property when you add a service to the Behaviors collection.

The following code sample creates a UI Service that invokes the Grid Control’s BeginDataUpdate() and EndDataUpdate() methods:

MainWindow.xaml.cs

public interface IUpdateService {
    void BeginUpdate();
    void EndUpdate();
}

public class GridUpdateService : UIServiceBase<GridControl>, IUpdateService {
    public void BeginUpdate() {
        AssociatedObject?.BeginDataUpdate();
    }
    public void EndUpdate() {
        AssociatedObject?.EndDataUpdate();
    }
}

MainWindow.xaml

<Window ...
    xmlns:dxmvvm="using:DevExpress.Mvvm"
    xmlns:dxc="using:DevExpress.WinUI.Core"
    xmlns:dxg="using:DevExpress.WinUI.Grid">
    <Grid>
        <dxg:GridControl ... >
            <dxc:Interaction.Behaviors>
                <local:GridUpdateService ServiceClient="{x:Bind ViewModel}"/>
            </dxc:Interaction.Behaviors>
        </dxg:GridControl>
    </Grid>
</Window>

View Example: Create a Custom WinUI MVVM UI Service