UWP EventTriggerBehaviors按下GotFocus

Question

I am trying to understand how to setup EventTriggerBehaviors in a UWP project. So I understand that I need to have the package Microsoft.Xaml.Behaviors.Uwp.Managed installed, and the following namespaces declared in my XAML file:

xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"

The button by itself should be declared as:

<Button x:Name="btnTest >
    <Interactivity:Interaction.Behaviors>
        <Core:EventTriggerBehavior EventName="GotFocus" >
            <Core:EventTriggerBehavior.Actions>
                <Core:InvokeCommandAction Command="{Binding ... }" />
            </Core:EventTriggerBehavior.Actions>
        </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
</Button>

but then I got lost... What I would like is once the button get focus, it set some text (based on button name) within a text box.

Do I need a service, and what should be the ViewModel code?

and actually, is anyone able to recommend great reading, examples, books ... on the subject please?

Update following James reply: The XAML InvokeCommandAction becomes:

<Core:InvokeCommandAction Command="{Binding OnButtonFocusCommand}" CommandParameter="{Binding Name, ElementName=btnTest}" />

But how do I receive the parameter within the method in the ViewModel?

Answer 1

The InvokeCommandAction Command property requires an implementation of an ICommand in your view model in order to perform an action when the EventTriggerBehavior is fired.

You might have something like this in the XAML:

    <Button x:Name="btnTest">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="GotFocus">
                <Core:EventTriggerBehavior.Actions>
                    <Core:InvokeCommandAction Command="{Binding OnButtonFocusCommand}" />
                </Core:EventTriggerBehavior.Actions>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>

Then in the bound view-model, you would have something similar to this:

    public ViewModel()
    {
        OnButtonFocusCommand = new DelegateCommand(() =>
        {
            this.TextBoxText = "Hello, World";
        });
    }

    public ICommand OnButtonFocusCommand { get; private set; }

The DelegateCommand is not built in to the platform though but you can find many implementations of a DelegateCommand or RelayCommand online.

EDIT: You can also do this with a passed parameter using like this:

    public ViewModel()
    {
        OnButtonFocusCommand = new DelegateCommand<RoutedEventArgs>(args =>
            {
                this.TextBoxText = "Hello, World";
            });
    }

The RoutedEventArgs would be the type of parameter you're passing through. In the case of what's passed by the Focus event, this is the parameter that you'll receive. You'll need the DelegateCommand{T} for these scenarios.

The examples of DelegateCommand that I've referenced also have a mechanism to check whether to run the action by validating the model. You can do that like so:

    public ViewModel()
    {
        OnButtonFocusCommand = new DelegateCommand<RoutedEventArgs>(args =>
            {
                this.TextBoxText = "Hello, World";
            },
            args => args.OriginalSource is TextBox);
    }

For your scenario with updating the text of a TextBox, you would need to create a property in your view-model (in my example I showed the TextBoxText being updated). That property would then need binding up to the Text property of your TextBox in XAML.

For things to take a look at, off the top of my head, I would suggest taking a look at an MVVM framework (possibly MvvmLight) and reading up on that if you've not already.

Also the official Microsoft samples on GitHub may cover a lot of topics which might be useful to you.

If you need any more information, get in touch and I'm happy to help.