Xamarin.Forms Tutorial de entrada

Artigo
Developer (Iniciante)
8 minutos para concluir

Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:

Crie seu primeiro Xamarin.Forms início rápido de aplicativo .
Tutorial de StackLayout.

Neste tutorial, você aprenderá a:

Crie um Xamarin.FormsEntry em XAML.
Responder a alterações no texto no Entry.
Personalizar o comportamento do Entry.

Você usará o Visual Studio 2019 ou Visual Studio para Mac para criar um aplicativo simples que demonstra como personalizar o comportamento de um Entry. Estas capturas de tela mostram o aplicativo final:

Você também usará Recarga Dinâmica XAML para Xamarin.Forms ver as alterações da interface do usuário sem recompilar seu aplicativo.

Criar uma entrada

7 minutos restantes

Visual Studio
Visual Studio para Mac

Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado EntryTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada EntryTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Gerenciador de Soluções, no projeto EntryTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Entry em um StackLayout. A propriedade Entry.Placeholder especifica o texto de espaço reservado mostrado quando o Entry é exibido pela primeira vez.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Interrompa o aplicativo no Visual Studio.

Para concluir este tutorial, você precisará ter o Visual Studio para Mac (versão mais recente), com suporte para plataforma iOS e Android, instalado. Além disso, você também precisará do Xcode (versão mais recente). Para obter mais informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin.

Inicie o Visual Studio para Mac e crie um novo aplicativo em branco Xamarin.Forms chamado EntryTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada EntryTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Painel de Soluções, no projeto EntryTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Entry em um StackLayout. A propriedade Entry.Placeholder especifica o texto de espaço reservado mostrado quando o Entry é exibido pela primeira vez.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Interrompa o aplicativo no Visual Studio para Mac.

Responder a alterações de texto

5 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Entry de modo que ela defina um manipulador para os eventos TextChanged e Completed:
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Esse código define o evento TextChanged para um manipulador de eventos chamado OnEntryTextChanged e o evento Completed para um manipulador de eventos chamado OnEntryCompleted. Ambos os manipuladores de eventos serão criados na próxima etapa.
No Gerenciador de Soluções, no projeto EntryTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione os manipuladores de eventos OnEntryTextChanged e OnEntryCompleted à classe:
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Quando o texto na Entry mudar, o método OnEntryTextChanged será executado. O argumento sender é o objeto Entry responsável por acionar o evento TextChanged e pode ser usado para acessar o objeto Entry. O argumento TextChangedEventArgs fornece os valores novos e antigos do texto de antes e depois da alteração do texto.

Quando você finalizar o texto na Entry com a tecla de retorno, o método OnEntryCompleted será executado. O argumento sender é o objeto Entry responsável por acionar o evento TextChanged e pode ser usado para acessar o objeto Entry.

Importante

Qualquer texto inserido em uma Entry será armazenado na propriedade Text.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Defina pontos de interrupção nos dois manipuladores de eventos e insira o texto na Entry, então observe os eventos TextChanged e Completed serem disparados.

Para obter mais informações sobre Entry eventos, consulte Eventos e interatividade no Xamarin.Forms guia Entrada .

Em MainPage.xaml, modifique a declaração Entry de modo que ela defina um manipulador para os eventos TextChanged e Completed:
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Esse código define o evento TextChanged para um manipulador de eventos chamado OnEntryTextChanged e o evento Completed para um manipulador de eventos chamado OnEntryCompleted. Ambos os manipuladores de eventos serão criados na próxima etapa.
No Painel de Soluções, no projeto EntryTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione os manipuladores de eventos OnEntryTextChanged e OnEntryCompleted à classe:
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Quando o texto na Entry mudar, o método OnEntryTextChanged será executado. O argumento sender é o objeto Entry responsável por acionar o evento TextChanged e pode ser usado para acessar o objeto Entry. O argumento TextChangedEventArgs fornece os valores novos e antigos do texto de antes e depois da alteração do texto.

Quando você finalizar o texto na Entry com a tecla de retorno, o método OnEntryCompleted será executado. O argumento sender é o objeto Entry responsável por acionar o evento TextChanged e pode ser usado para acessar o objeto Entry.

Importante

Qualquer texto inserido em uma Entry será armazenado na propriedade Text.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Defina pontos de interrupção nos dois manipuladores de eventos e insira o texto na Entry, então observe os eventos TextChanged e Completed serem disparados.

Para obter mais informações sobre Entry eventos, consulte Eventos e interatividade no Xamarin.Forms guia Entrada .

Personalizar o comportamento

2 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Entry para personalizar seu comportamento:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
Esse código define propriedades que personalizam o comportamento do Entry. A propriedade MaxLength limita o tamanho de entrada permitido para Entry, e a propriedade IsSpellCheckEnabled é definida como false para desabilitar a verificação ortográfica. Da mesma forma, a propriedade IsTextPredictionEnabled é definida como false para desabilitar a previsão de texto e a previsão de texto automática. Além disso, a propriedade IsPassword garante que os caracteres digitados sejam mascarados com um caractere de senha (um círculo preto).

Observação

Para alguns cenários de entrada de texto, como inserir uma senha, a verificação ortográfica e a previsão de texto fornecem uma experiência negativa e, portanto, devem ser desabilitadas.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência. Insira o texto em Entry e observe que cada caractere é substituído por um caractere de máscara de senha e que o número máximo de caracteres que pode ser inserido é 15:

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre como personalizar Entry o comportamento, consulte o Xamarin.Forms Guia de entrada .

Em MainPage.xaml, modifique a declaração Entry para personalizar seu comportamento:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
Esse código define propriedades que personalizam o comportamento do Entry. A propriedade MaxLength limita o tamanho de entrada permitido para Entry, e a propriedade IsSpellCheckEnabled é definida como false para desabilitar a verificação ortográfica. Da mesma forma, a propriedade IsTextPredictionEnabled é definida como false para desabilitar a previsão de texto e a previsão de texto automática. Além disso, a propriedade IsPassword garante que os caracteres digitados sejam mascarados com um caractere de senha (um círculo preto).

Observação

Para alguns cenários de entrada de texto, como inserir uma senha, a verificação ortográfica e a previsão de texto fornecem uma experiência negativa e, portanto, devem ser desabilitadas.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio para Mac, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência. Insira o texto em Entry e observe que cada caractere é substituído por um caractere de máscara de senha e que o número máximo de caracteres que pode ser inserido é 15:

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre como personalizar Entry o comportamento, consulte o Xamarin.Forms Guia de entrada .

Compartilhar via

Xamarin.Forms Tutorial de entrada

Criar uma entrada

Responder a alterações de texto

Personalizar o comportamento

Parabéns!

Próximas etapas

Compartilhar via

Xamarin.Forms Tutorial de entrada

Criar uma entrada

Responder a alterações de texto

Personalizar o comportamento

Parabéns!

Próximas etapas

Links relacionados