FocusBehavior

• Aug 21, 2018
• 2 minutes to read

FocusBehavior allows you to set the focus to a UI control without utilizing code-behind.

Focus On Startup

To set the focus when an associated control is loaded, define the FocusBehavior for the control as follows.

XAML

<TextBox Text="This control is focused on startup">
    <dxmvvm:Interaction.Behaviors>
        <dxmvvm:FocusBehavior/>
    </dxmvvm:Interaction.Behaviors>
</TextBox>

Focus On an Event or Property Change

To focus a control when an event occurs, specify the EventName property.

XAML

<TextBox Text="This control is focused on button click: ">
    <dxmvvm:Interaction.Behaviors>
        <dxmvvm:FocusBehavior SourceName="button" EventName="Click"/>
    </dxmvvm:Interaction.Behaviors>
</TextBox>
<Button x:Name="button" Content="Click to focus the TextBox"/>

If it is necessary to make a UI control focused when a specific property is changed, specify the FocusBehavior.PropertyName property.

XAML

<TextBox Text="This control is focused when data is loaded">
    <dxmvvm:Interaction.Behaviors>
        <dxmvvm:FocusBehavior SourceObject="{Binding ViewModel}" PropertyName="IsDataLoaded"/>
    </dxmvvm:Interaction.Behaviors>
</TextBox>

The SourceObject and SourceName properties specify an object used for processing an event or property change. The SourceObject can be set through binding. The SourceName is the name of a UI element.

Focus With a Delay

If the associated control shouldn’t be focused immediately once it’s loaded or the event specified in the EventName property occurs, specify the required delay using the FocusBehavior.FocusDelay property.

XAML

<TextBox Text="This control is focused with a delay">
    <dxmvvm:Interaction.Behaviors>
        <dxmvvm:FocusBehavior SourceName="btn"  EventName="Click" FocusDelay="0:00:01"/>
    </dxmvvm:Interaction.Behaviors>
</TextBox>

Example

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-focusbehavior-t122987.

MainViewModel.cs

using DevExpress.Mvvm;
using DevExpress.Mvvm.DataAnnotations;

namespace Example.ViewModel {
    [POCOViewModel]
    public class MainViewModel {
    }
}

MainView.xaml

<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:ViewModel="clr-namespace:Example.ViewModel"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="500" d:DesignWidth="600"
    DataContext="{dxmvvm:ViewModelSource Type=ViewModel:MainViewModel}">

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="This control is focused on button click: " VerticalAlignment="Center"/>
                <TextBox Text="Click the bottom button">
                    <dxmvvm:Interaction.Behaviors>
                        <dxmvvm:FocusBehavior SourceName="bt" EventName="Click"/>
                    </dxmvvm:Interaction.Behaviors>
                </TextBox>
                <Button x:Name="bt" Content="Click to focus the TextBox"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="10">
                <TextBlock Text="This control is focused on startup: " VerticalAlignment="Center"/>
                <TextBox Text="Focus is here">
                    <dxmvvm:Interaction.Behaviors>
                        <dxmvvm:FocusBehavior/>
                    </dxmvvm:Interaction.Behaviors>
                </TextBox>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

MainViewModel.vb

Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.DataAnnotations

Namespace Example.ViewModel
    <POCOViewModel> _
    Public Class MainViewModel
    End Class
End Namespace