SetFocusOnEntryCompletedBehavior

Artigo
03/18/2024

O SetFocusOnEntryCompletedBehavior é um Behavior que dá foco a um VisualElement especificado quando uma Entry é concluída. Por exemplo, uma página pode ter várias Entry em sequência, o que é conveniente para o usuário se a conclusão de um Entry mudar automaticamente o foco para o próximo Entry.

Sintaxe

Os exemplos a seguir mostram como adicionar o SetFocusOnEntryCompletedBehavior a um Entry para que, quando o botão Next no teclado macio for pressionado, outra Entry tenha o foco.

XAML

Incluir o namespace XAML

Para usar o kit de ferramentas no XAML, o xmlns a seguir precisa ser adicionado à sua página ou exibição:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Portanto, o seguinte:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Seria modificado para incluir o xmlns conforme o seguinte:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Usando o SetFocusOnEntryCompletedBehavior

O SetFocusOnEntryCompletedBehavior pode ser usado da seguinte maneira em XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.SetFocusOnEntryCompletedBehaviorPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

    <VerticalStackLayout Spacing="12">

        <Entry
            x:Name="FirstNameEntry"
            toolkit:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference LastNameEntry}"
            Placeholder="Entry 1 (Tap `Next` on the keyboard when finished)"
            ReturnType="Next" />
    
        <Entry
            x:Name="LastNameEntry" />

    </VerticalStackLayout>
</ContentPage>

C#

O SetFocusOnEntryCompletedBehavior pode ser usado da seguinte maneira em C#:

class SetFocusOnEntryCompletedBehaviorPage : ContentPage
{
    public SetFocusOnEntryCompletedBehaviorPage()
    {
        var firstName = new Entry
        {
            Placeholder = "Entry 1 (Tap `Next` on the keyboard when finished)",
            ReturnType = ReturnType.Next
        };

        var lastName = new Entry();

        SetFocusOnEntryCompletedBehavior.SetNextElement(firstName, lastName);

        Content = new VerticalStackLayout
        {
            Spacing = 12,
            Children = 
            {
                firstName,
                lastName
            }
        };
    }
}

Markup do C#

Nosso pacote CommunityToolkit.Maui.Markup fornece uma maneira muito mais concisa de usar esse comportamento em C#.

using CommunityToolkit.Maui.Markup;

class SetFocusOnEntryCompletedBehaviorPage : ContentPage
{
    public SetFocusOnEntryCompletedBehaviorPage()
    {
        Content = new VerticalStackLayout
        {
            Spacing = 12,
            Children = 
            {
                new Entry { ReturnType = ReturnType.Next }
                    .Assign(out var firstName)
                    .Placeholder("Entry 1 (Tap `Next` on the keyboard when finished)"),

                new Entry()
                    .Assign(out var lastName)
            }
        };

        SetFocusOnEntryCompletedBehavior.SetNextElement(firstName, lastName);
    }
}

Exemplos

Você pode encontrar um exemplo desse comportamento em ação no Aplicativo de exemplo do .NET MAUI Community Toolkit.

API

O código-fonte do SetFocusOnEntryCompletedBehavior pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.

Compartilhar via