Xamarin.Forms Pop-ups Tutorial

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.

1. Inicie o 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 Aprofundamento do Xamarin.Forms Início Rápido.

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

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

4. 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 esta janela não estiver visível, ela pode ser tornada visível selecionando a opção de menu Exibir > 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.

1. Inicie o 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 Aprofundamento do Xamarin.Forms Início Rápido.

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

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

4. 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 de menu Exibir > outra saída do aplicativo do Windows>.

   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.

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

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

3. 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 esta janela não estiver visível, ela pode ser tornada visível selecionando a opção de menu Exibir > 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.

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

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

3. 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 de menu Exibir > outra saída do aplicativo do Windows>.

   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.