Xamarin.Forms Pop-ups Tutorial

Artigo
Developer (Iniciante)
6 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.
Tutorial de Botão.

Neste tutorial, você aprenderá como:

Exibir um alerta para solicitar que o usuário faça uma escolha.
Exibir uma folha de ações para orientar o usuário durante uma tarefa.

Você usará Visual Studio 2019 ou Visual Studio para Mac, para criar um aplicativo simples que demonstra como exibir pop-ups em Xamarin.Forms. Estas capturas de tela mostram o aplicativo final:

Exibir um alerta

5 minutos restantes

Xamarin.Forms tem um pop-up modal, conhecido como alerta, para alertar o usuário ou para fazer perguntas simples sobre eles. Neste exercício, você aprenderá a usar o método DisplayAlert, da classe Page, para exibir um alerta ao usuário e fazer uma pergunta simples.

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

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada PopupsTutorial. 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 PopupsTutorial, 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="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que consiste em dois objetos Button em um StackLayout. As propriedades Button.Text especificam o texto que aparece em cada Button e os eventos Clicked são definidos como manipuladores de eventos que serão criados na próxima etapa.
No Gerenciador de Soluções, no projeto PopupsTutorial, 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 OnDisplayAlertButtonClicked e OnDisplayAlertQuestionButtonClicked à classe:
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
Quando um Button é tocado, o método de manipulador do respectivo evento é executado. O método OnDisplayAlertButtonClicked chama o método DisplayAlert para exibir um alerta modal com um botão Cancelar único. Depois que o alerta é descartado, o usuário pode continuar interagindo com o aplicativo.

O método OnDisplayAlertQuestionButtonClicked chama uma sobrecarga do método DisplayAlert para exibir um alerta modal com um botão aceitar e um botão cancelar. Após o usuário selecionar um dos botões, a seleção será retornada como um boolean.

Importante

O método DisplayAlert é assíncrono e sempre deve ser esperado com a palavra-chave await.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro de seu simulador remoto de iOS ou do Android Emulator escolhido. Em seguida, toque no primeiro Button:

Depois de ignorar o alerta, toque no segundo Button:

Observe que, depois de selecionar uma resposta à pergunta, a resposta é enviada para a janela de Saída do Visual Studio. Se essa janela não estiver visível, ela poderá ficar visível selecionando a opção exibir > menu Saída .

Interrompa o aplicativo no Visual Studio.

Confira mais informações sobre a exibição de alertas em Exibir um alerta no guia Exibir pop-ups.

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

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada PopupsTutorial. 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 PopupsTutorial, 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="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
Esse código define declarativamente a interface do usuário para a página, que consiste em dois objetos Button em um StackLayout. As propriedades Button.Text especificam o texto que aparece em cada Button e os eventos Clicked são definidos como manipuladores de eventos que serão criados na próxima etapa.
No Painel de Soluções, no projeto PopupsTutorial, 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 OnDisplayAlertButtonClicked e OnDisplayAlertQuestionButtonClicked à classe:
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
Quando um Button é tocado, o método de manipulador do respectivo evento é executado. O método OnDisplayAlertButtonClicked chama o método DisplayAlert para exibir um alerta modal com um botão Cancelar único. Depois que o alerta é descartado, o usuário pode continuar interagindo com o aplicativo.

O método OnDisplayAlertQuestionButtonClicked chama uma sobrecarga do método DisplayAlert para exibir um alerta modal com um botão aceitar e um botão cancelar. Após o usuário selecionar um dos botões, a seleção será retornada como um boolean.

Importante

O método DisplayAlert é assíncrono e sempre deve ser esperado com a palavra-chave await.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido. Em seguida, toque no primeiro Button:

Depois de ignorar o alerta, toque no segundo Button:

Observe que, depois de selecionar uma resposta à pergunta, a resposta é enviada para a janela de Saída do Aplicativo do Visual Studio para Mac. Se essa janela não estiver visível, ela poderá ficar visível selecionando a opção Exibir > Outro Windows > menu Saída do Aplicativo.

Interrompa o aplicativo no Visual Studio para Mac.

Confira mais informações sobre a exibição de alertas em Exibir um alerta no guia Exibir pop-ups.

Exibir uma folha de ações

2 minutos restantes

Xamarin.Forms tem um pop-up modal, conhecido como uma planilha de ações, que pode ser usado para orientar os usuários por meio de uma tarefa. Neste exercício, você usará o método DisplayActionSheet, da classe Page, para exibir uma folha de ações que orienta os usuários durante uma tarefa.

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, adicione uma nova declaração Button que exibirá uma folha de ações:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
A propriedade Button.Text especifica o texto exibido no Button. Além disso, o evento Clicked é definido como um manipulador de eventos chamado OnDisplayActionSheetButtonClicked que será criado na próxima etapa.
No Gerenciador de Soluções, no projeto PopupsTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione o manipulador de eventos OnDisplayActionSheetButtonClicked à classe:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Quando o Button é tocado, o método OnDisplayActionSheetButtonClicked é executado. Este método chama o método DisplayActionSheet, para apresentar ao usuário um conjunto de alternativas de como proceder em uma tarefa. Após o usuário selecionar uma das alternativas, a seleção será retornada como um string.

Importante

O método DisplayActionSheet é assíncrono e sempre deve ser esperado com a palavra-chave await.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro de seu simulador remoto de iOS ou do Android Emulator escolhido. Em seguida, toque no Button que você adicionou ao ContentPage:

Observe que, após selecionar uma alternativa na caixa de diálogo de folha de ações, a seleção aparece na janela de Saída do Visual Studio. Se essa janela não estiver visível, ela poderá ficar visível selecionando a opção exibir > menu Saída .

Interrompa o aplicativo no Visual Studio.

Confira mais informações sobre a exibição de folhas de ação em Orientar usuários durante tarefas no guia Exibir pop-ups.

Em MainPage.xaml, adicione uma nova declaração Button que exibirá uma folha de ações:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
A propriedade Button.Text especifica o texto exibido no Button. Além disso, o evento Clicked é definido como um manipulador de eventos chamado OnDisplayActionSheetButtonClicked que será criado na próxima etapa.
No Painel de Soluções, no projeto PopupsTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione o manipulador de eventos OnDisplayActionSheetButtonClicked à classe:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
Quando o Button é tocado, o método OnDisplayActionSheetButtonClicked é executado. Este método chama o método DisplayActionSheet, para apresentar ao usuário um conjunto de alternativas de como proceder em uma tarefa. Após o usuário selecionar uma das alternativas, a seleção será retornada como um string.

Importante

O método DisplayActionSheet é assíncrono e sempre deve ser esperado com a palavra-chave await.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido. Em seguida, toque no Button que você adicionou ao ContentPage:

Observe que, após selecionar uma alternativa na caixa de diálogo de folha de ações, a seleção aparece na janela de Saída do Aplicativo do Visual Studio para Mac. Se essa janela não estiver visível, ela poderá ficar visível selecionando a opção Exibir > Outro Windows > menu Saída do Aplicativo.

Interrompa o aplicativo no Visual Studio para Mac.

Confira mais informações sobre a exibição de folhas de ação em Orientar usuários durante tarefas no guia Exibir pop-ups.

Xamarin.Forms Pop-ups Tutorial

Exibir um alerta

Exibir uma folha de ações

Parabéns!

Próximas etapas

Xamarin.Forms Pop-ups Tutorial

Exibir um alerta

Exibir uma folha de ações

Parabéns!

Próximas etapas

Links relacionados