Maui (Android): Bind Editor/Entry in ContentTemplate to Relay Command on ViewModel using Behaviours

Question

HI I have a Maui app using ContentTemplates where I'm trying to bind the Unfocused event of an Editor to a RelayCommand on the Viewmodel.

I've managed to bind a button click to a RelayCommand but the Editor Unfocused command won't trigger.

FYI I've implemented the following solution to solve the issue with Editors not unfocusing on clicking outside of the control:

https://github.com/dotnet/maui/issues/21053

Sample repo here where the functionality is in MainPage:

Repo

Any help much appreciated.

Stephen Quan · Accepted Answer

When working with ContentView, it's best to focus on Commands or Properties. If you want to map an Event to a Command, there's extra work involved, but it is doable. However, since the Editor has an IsFocused property, we can declare a BindableProperty called IsEditorFocused and use a OneWayBindingToSource to propagate this event from the Editor through the ContentView to the Page.

// CustomEditor.xaml.cs
namespace Maui.StackOverflow;

public partial class CustomEditor : ContentView
{
    public static readonly BindableProperty IsEditorFocusedProperty = BindableProperty.Create(nameof(IsEditorFocused), typeof(bool), typeof(CustomEditor), false);
    public bool IsEditorFocused
    {
        get => (bool)GetValue(IsFocusedProperty);
        set => SetValue(IsFocusedProperty, value);
    }

    public CustomEditor()
    {
        InitializeComponent();
    }
}

And we can consume it on our page as follows:

// EditorPage.xaml.cs
using System.Diagnostics;

namespace Maui.StackOverflow;

public partial class EditorPage : ContentPage
{
    public static readonly BindableProperty IsEditorFocusedProperty = BindableProperty.Create(nameof(IsEditorFocused), typeof(bool), typeof(EditorPage), false);
    public bool IsEditorFocused
    {
        get => (bool)GetValue(IsEditorFocusedProperty);
        set => SetValue(IsEditorFocusedProperty, value);
    }

    public EditorPage()
    {
        InitializeComponent();

        BindingContext = this;

        PropertyChanged += (s, e) =>
        {
            switch (e.PropertyName)
            {
                case nameof(IsEditorFocused):
                    Debug.WriteLine($"IsEditorFocused changed to {IsEditorFocused}");
                    break;
            }
        };
    }
}

Now, I mentioned it was possible to convert Events to Commands. The pattern I follow is I declare a thin wrapper to the thing that I need commands on. In this case, I will declare CustomEditorInner which is basically a wrapper on Editor where Focused and Unfocused events are converted to ICommands. Then, I can rewrite CustomEditor and my ContentPage to use it. On the ContentPage is where I declare the RelayCommand.

// CustomEditorInner.cs
using System.Windows.Input;

namespace Maui.StackOverflow;

class CustomEditorInner : Editor
{
    public static readonly BindableProperty FocusedCommandProperty = BindableProperty.Create(nameof(FocusedCommand), typeof(ICommand), typeof(CustomEditorInner), null);
    public ICommand FocusedCommand
    {
        get => (ICommand)GetValue(FocusedCommandProperty);
        set => SetValue(FocusedCommandProperty, value);
    }

    public static readonly BindableProperty UnfocusedCommandProperty = BindableProperty.Create(nameof(UnfocusedCommand), typeof(ICommand), typeof(CustomEditorInner), null);
    public ICommand UnfocusedCommand
    {
        get => (ICommand)GetValue(UnfocusedCommandProperty);
        set => SetValue(UnfocusedCommandProperty, value);
    }

    public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(CustomEditorInner), null);
    public object CommandParameter
    {
        get => GetValue(CommandParameterProperty);
        set => SetValue(CommandParameterProperty, value);
    }

    public CustomEditorInner()
    {
        this.Focused += (s,e) => FocusedCommand?.Execute(CommandParameter);
        this.Unfocused += (s,e) => UnfocusedCommand?.Execute(CommandParameter);
    }
}

// CustomEditor.xaml.cs
using System.Windows.Input;

namespace Maui.StackOverflow;

public partial class CustomEditor : ContentView
{
    public static readonly BindableProperty FocusedCommandProperty = BindableProperty.Create(nameof(FocusedCommand), typeof(ICommand), typeof(CustomEditor), null);
    public ICommand FocusedCommand
    {
        get => (ICommand)GetValue(FocusedCommandProperty);
        set => SetValue(FocusedCommandProperty, value);
    }

    public static readonly BindableProperty UnfocusedCommandProperty = BindableProperty.Create(nameof(UnfocusedCommand), typeof(ICommand), typeof(CustomEditor), null);
    public ICommand UnfocusedCommand
    {
        get => (ICommand)GetValue(UnfocusedCommandProperty);
        set => SetValue(UnfocusedCommandProperty, value);
    }

    public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(CustomEditor), null);
    public object CommandParameter
    {
        get => GetValue(CommandParameterProperty);
        set => SetValue(CommandParameterProperty, value);
    }

    public CustomEditor()
    {
        InitializeComponent();
    }
}

// EditorPage.xaml.cs
using System.Diagnostics;
using CommunityToolkit.Mvvm.Input;

namespace Maui.StackOverflow;

public partial class EditorPage : ContentPage
{
    [RelayCommand]
    void MyFocused(int magic)
    {
        Debug.WriteLine($"OnFocused magic:{magic}");
    }

    [RelayCommand]
    void MyUnfocused(int magic)
    {
        Debug.WriteLine($"OnUnfocused magic:{magic}");
    }

    public int Magic { get; set; } = 42;

    public EditorPage()
    {
        InitializeComponent();

        BindingContext = this;
    }
}

Maui (Android): Bind Editor/Entry in ContentTemplate to Relay Command on ViewModel using Behaviours

Answers (2)

Related Questions