CODEWITHSUNDEEP
c#.netmauimaui-community-toolkit
Isabelle Galvão
Isabelle Galvão

Reputation: 11

Move focus between Entry fields in .NET MAUI

How can I move the focus back to the previous Entry in .NET MAUI when the current Entry is empty instead of moving forward?

my cursor only goes forward, but I would like it to go back when I delete the entry text."Handling Entry TextChanged event in .NET MAUI

Upvotes: 0

Views: 215

Answers (2)

Stephen Quan
Stephen Quan

Reputation: 25966

Consider the following InputBox implementation (Entry workaround):

public class InputBox : Entry
{
    public event EventHandler DeleteOnEmpty;
    //public string InvisibleText = " "; // "Space"
    public string InvisibleText = "\u200B"; // "Zero Width Space"
    public static readonly BindableProperty InputTextProperty = BindableProperty.Create(nameof(InputText), typeof(string), typeof(InputBox), string.Empty, BindingMode.OneWay);
    public string InputText
    {
        get => (string)GetValue(InputTextProperty);
        set => SetValue(InputTextProperty, value);
    }
    public void SetText()
    {
        Text = InvisibleText + (InputText ?? "");
        if (CursorPosition == 0)
        {
            CursorPosition = 1;
        }
    }
    public InputBox()
    {
        PropertyChanged += (s, e) =>
        {
            switch (e.PropertyName)
            {
                case nameof(InputText):
                    SetText();
                    break;
                case nameof(Text):
                    if (Text.Length == 0)
                    {
                        Debug.WriteLine("DeleteOnEmpty");
                        DeleteOnEmpty?.Invoke(this, EventArgs.Empty);
                        SetText();
                    }
                    InputText = Text.Replace(InvisibleText, "");
                    break;
            }
        };
    }
}

What is happening here is we're creating an InputText property that one can bind to. The Text shown in the Entry component will be Text = InvisibleText + InputText. We do this so that we can detect when the Text goes to empty i.e. a delete was done on the InvisibleText hence, we can detect when the delete key was used to erase the last text.

You can hook into the DeleteOnEmpty event and call Focus on the previous instance of InputBox.

Upvotes: 0

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8080

Using TextChanged Event can accomplish your goal.

Let's say we have two Entries (or more) and we set the name for it. For Entry, we could handle TextChanged event for it,

<Entry x:Name="entry1"/>

<Entry x:Name="entry2" TextChanged="entry2_TextChanged"/>

We can set focus to any Entry we want by implementing the TextChanged event handler. The following example shows how to focus entry1 when entry2 is empty.

    private void entry2_TextChanged(object sender, Microsoft.Maui.Controls.TextChangedEventArgs e)
    {
        var entry = sender as Entry;

        if (entry.Text.Length == 0)
        {
            entry1.Focus();

        }
    }

Please let me know if you have any question.

Upvotes: 0

Related Questions