Behaviors

• Jun 08, 2022
• 3 minutes to read

The Behavior mechanism extends the capabilities of visual controls and adheres to the MVVM pattern. You can implement missing functionality with a custom Behavior and begin using it at any place in your application.

Run Demo: Behaviors Module in the WinUI MVVM Demo

Add Behaviors to a Control

In XAML

The Interaction class implements the attached Behaviors property. To use a Behavior, place it in the following collection:

MainView.xaml

<UserControl ...
    xmlns:dx="using:DevExpress.WinUI.Core">
    <!-- ... -->
        <TextBox Text="This control is focused on startup">
            <dx:Interaction.Behaviors>
                <dx:FocusBehavior/>
                <!--Other Behaviors-->
            </dx:Interaction.Behaviors>
        </TextBox>
    <!-- ... -->
</UserControl>

Behaviors may contain dependency properties:

MainView.xaml

<ListBox ...> 
    <dx:Interaction.Behaviors> 
        <dx:EventToCommand EventName="MouseDoubleClick" Command="{x:Bind EditCommand}"/>
    </dx:Interaction.Behaviors> 
    <!-- ... -->
</ListBox>

In XAML Styles

Add a Single Behavior

You can attach a behavior to all objects (and their descendants) of a specific type in a container or a UserControl. To do that, place your declaration in Style. The following code sample uses the BehaviorsTemplate attached property to add the KeyToCommand behavior to each element of the TextEdit type:

XAML

<UserControl ...
    xmlns:dx="using:DevExpress.WinUI.Core"
    xmlns:dxe="using:DevExpress.WinUI.Editors">
    <UserControl.Resources>
        <Style TargetType="dxe:TextEdit">
            <Setter Property="dxc:Interaction.BehaviorsTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ContentControl>
                            <dxc:KeyToCommand KeyGesture="CTRL+U" Command="{Binding UpdateCommand}"/>
                        </ContentControl>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <!-- ... -->
        <dxe:TextEdit Text="Maggie Boxter"/>
    <!-- ... -->
</UserControl>

Add Multiple Behaviors

Place multiple behaviors in the ItemsControl element. The following code sample adds KeyToCommand and FocusBehavior behaviors to each element of the TextEdit type and its descendants:

MainView.xaml

<UserControl ...
    xmlns:dx="using:DevExpress.WinUI.Core"
    xmlns:dxe="using:DevExpress.WinUI.Editors">
    <UserControl.Resources>
        <Style TargetType="dxe:TextEdit">
            <Setter Property="dxc:Interaction.BehaviorsTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ItemsControl>
                            <dxc:KeyToCommand KeyGesture="CTRL+U" Command="{Binding UpdateCommand}"/>
                            <dxc:FocusBehavior/> 
                        </ItemsControl>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <!-- ... -->
        <dxe:TextEdit Text="Maggie Boxter"/>
    <!-- ... -->
</UserControl>

In Code-Behind

The following code sample attaches a FocusBehavior to a TextEdit in code-behind:

MainWindow.xaml

<Window ...
    xmlns:dxe="using:DevExpress.WinUI.Editors">
    <StackPanel>
        <dxe:TextEdit x:Name="textEdit" Text="Maggie Boxter"/>
    </StackPanel>
</Window>

MainWindow.xaml.cs

using DevExpress.WinUI.Core;
// ...
    public MainWindow() {
        InitializeComponent();
        Interaction.GetBehaviors(textEdit).Add(new FocusBehavior());
    }

MainWindow.xaml.vb

Imports DevExpress.WinUI.Core
'...
    Public Sub New()
        InitializeComponent()
        Interaction.GetBehaviors(textEdit).Add(New FocusBehavior)
    End Sub

Predefined Behaviors

DevExpress WinUI Controls include the following predefined behaviors:

EventToCommand

Executes a command in response to a raised event.

KeyToCommand

Allows you to specify a key combination that invokes a command.

FocusBehavior

Focuses a UI control without code-behind.

DependencyPropertyBehavior

Allows you to bind a ViewModel property to a control’s non-dependency property.

Create a Custom Behavior

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

MainWindow.xaml.cs

public class TextBoxSelectionBehavior : Behavior<TextBox> // TextBox is the AssociatedObject type 
{
    protected override void OnAttached() {
        base.OnAttached();
        AssociatedObject.GotFocus += AssociatedObject_GotFocus;
    }
    protected override void OnDetaching() {
        base.OnDetaching();
        AssociatedObject.GotFocus -= AssociatedObject_GotFocus;
    }
    private void AssociatedObject_GotFocus(object sender, RoutedEventArgs e) {
        AssociatedObject.SelectAll();
    }
}

MainWindow.xaml.vb

Class SurroundingClass
    Public Class ValidationBehavior
    ' TextBox is the AssociatedObject type 
        Inherits Behavior(Of TextBox)
    End Class

    Protected Overrides Sub OnAttached()
    ' subscribe to the AssociatedObject events
        MyBase.OnAttached()
    End Sub

    Protected Overrides Sub OnDetaching()
    'unsubscribe from the AssociatedObject events
        MyBase.OnDetaching()
    End Sub
End Class

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

After the AssociatedObject is specified, the DevExpress MVVM Framework invokes the virtual OnAttached method. You can override this method to subscribe to the AssociatedObject‘s events and initialize its properties.

To unsubscribe from events, you can use the virtual OnDetaching method.

MainWindow.xaml

<Window ...
    xmlns:dxmvvm="using:DevExpress.Mvvm"
    xmlns:dxc="using:DevExpress.WinUI.Core"
    xmlns:dxg="using:DevExpress.WinUI.Grid">
    <Grid>
        <StackPanel VerticalAlignment="Top">
            <TextBox Text="Focus me and I will be selected">
                <dxc:Interaction.Behaviors>
                    <local:TextBoxSelectionBehevior/>
                </dxc:Interaction.Behaviors>
            </TextBox>
        </StackPanel>
        <dxg:GridControl ItemsSource="{x:Bind ViewModel.Customers}" AutoGenerateColumns="True"/>
    </Grid>
</Window>

View Example: Create a Custom WinUI MVVM Behavior