Xamarin.Forms Editor Tutorial

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 do aplicativo.
Tutorial de StackLayout.

Neste tutorial, você aprenderá como:

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

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

Captura Automático de um Editor de Dimensionamento Automático no do iOS e android

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

Criar um editor

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 EditorTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada EditorTutorial. 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 Xamarin.Forms Início Rápido Aprofundado.
No Gerenciador de Soluções, no projeto EditorTutorial, 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Editor em um StackLayout. A propriedade Editor.Placeholder especifica o texto de espaço reservado mostrado quando o Editor é exibido pela primeira vez. Além disso, a propriedade HeightRequest especifica a altura de Editor em unidades independentes do dispositivo.
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:

Observação

Enquanto o Android indica a altura do Editor, o iOS não faz isso.

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 Visual Studio para Mac e crie um novo aplicativo em branco Xamarin.Forms chamado EditorTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada EditorTutorial. 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 Xamarin.Forms Início Rápido Aprofundado.
No Painel de Soluções, no projeto EditorTutorial, 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Editor em um StackLayout. A propriedade Editor.Placeholder especifica o texto de espaço reservado mostrado quando o Editor é exibido pela primeira vez. Além disso, a propriedade HeightRequest especifica a altura de Editor em unidades independentes do dispositivo.
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:

Observação

Enquanto o Android indica a altura do Editor, o iOS não faz isso.

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 Editor de modo que ela defina um manipulador para os eventos TextChanged e Completed:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Esse código define o evento TextChanged para um manipulador de eventos chamado OnEditorTextChanged e o evento Completed para um manipulador de eventos chamado OnEditorCompleted. Ambos os manipuladores de eventos serão criados na próxima etapa.
No Gerenciador de Soluções, no projeto EditorTutorial, 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 OnEditorTextChanged e OnEditorCompleted à classe:
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

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

Quando a edição é concluída, o método OnEditorCompleted é executado. Isso é feito desfocando Editor ou, além disso, pressionando o botão "Concluído" no iOS. O argumento sender é o objeto Editor responsável por acionar o evento TextChanged e pode ser usado para acessar o objeto Editor.

Importante

Qualquer texto inserido em uma Editor 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, insira texto no Editor e observe o acionamento de evento TextChanged. Desfoque o Editor para observar o evento Completed sendo acionado.

Para obter mais informações sobre Editor eventos, consulte Eventos e interatividade no guia doXamarin.Forms Editor.

Em MainPage.xaml, modifique a declaração Editor de modo que ela defina um manipulador para os eventos TextChanged e Completed:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Esse código define o evento TextChanged para um manipulador de eventos chamado OnEditorTextChanged e o evento Completed para um manipulador de eventos chamado OnEditorCompleted. Ambos os manipuladores de eventos serão criados na próxima etapa.
No Painel de Soluções, no projeto EditorTutorial, 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 OnEditorTextChanged e OnEditorCompleted à classe:
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

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

Quando a edição é concluída, o método OnEditorCompleted é executado. Isso é feito desfocando Editor ou, além disso, pressionando o botão "Concluído" no iOS. O argumento sender é o objeto Editor responsável por acionar o evento TextChanged e pode ser usado para acessar o objeto Editor.

Importante

Qualquer texto inserido em uma Editor 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, insira texto no Editor e observe o acionamento de evento TextChanged. Desfoque o Editor para observar o evento Completed sendo acionado.

Para obter mais informações sobre Editor eventos, consulte Eventos e interatividade no guia doXamarin.Forms Editor.

Personalizar o comportamento

2 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Editor para personalizar seu comportamento:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Esse código define propriedades que personalizam o comportamento do Editor. A propriedade AutoSize é definida como TextChanges, o que indica que a altura do Editor aumentará quando for preenchida com texto e diminuirá quando o texto for removido. A propriedade MaxLength limita o tamanho de entrada permitido para o Editor. Além disso, a propriedade IsSpellCheckEnabled é definida como false para desabilitar a verificação de ortografia, enquanto a propriedade IsTextPredictionEnabled é definida como false para desabilitar a previsão de texto e a previsão de texto automática.
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 para Editor e observe que a altura do Editor aumenta à medida que é preenchido com texto e diminui à medida que o texto é removido e que o número máximo de caracteres que pode ser inserido é de 200:

Captura iOS e do Android

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre como personalizar Editor o comportamento, consulte o Guia do Xamarin.Forms Editor .

Em MainPage.xaml, modifique a declaração Editor para personalizar seu comportamento:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Esse código define propriedades que personalizam o comportamento do Editor. A propriedade AutoSize é definida como TextChanges, o que indica que a altura do Editor aumentará quando for preenchida com texto e diminuirá quando o texto for removido. A propriedade MaxLength limita o tamanho de entrada permitido para o Editor. Além disso, a propriedade IsSpellCheckEnabled é definida como false para desabilitar a verificação de ortografia, enquanto a propriedade IsTextPredictionEnabled é definida como false para desabilitar a previsão de texto e a previsão de texto automática.
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 para Editor e observe que a altura do Editor aumenta à medida que é preenchido com texto e diminui à medida que o texto é removido e que o número máximo de caracteres que pode ser inserido é de 200:

Captura iOS e do Android

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre como personalizar Editor o comportamento, consulte o Guia do Xamarin.Forms Editor .

Xamarin.Forms Editor Tutorial

Criar um editor

Responder a alterações de texto

Personalizar o comportamento

Parabéns!

Próximas etapas

Xamarin.Forms Editor Tutorial

Criar um editor

Responder a alterações de texto

Personalizar o comportamento

Parabéns!

Próximas etapas

Links relacionados