Neste artigo veremos como implementar popups em aplicações Xamarin.Forms de uma maneira fácil e rápida.
ADICIONANDO O NUGET PACKAGE
Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.
Digite “Rg.Plugins.Popup” e selecione o plugin como demonstrado na imagem a seguir.
Selecione todos os projetos e clique no botão “Install”.
PopupView.xaml
Adicione um arquivo do tipo ContentPage em seu projeto.
Referencie o plugin em seu arquivo xaml e troque “ContentPage” por “pages: PopupPage” como demonstrado a seguir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <pages:PopupPage | |
| xmlns="http://xamarin.com/schemas/2014/forms" | |
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
| x:Class="DemoPopup.PopupView" | |
| xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"> | |
| <StackLayout Margin="18" | |
| Padding="36" | |
| HorizontalOptions="Center" | |
| VerticalOptions="Center" | |
| BackgroundColor="White" | |
| HeightRequest="100" | |
| WidthRequest="300"> | |
| <Label Text="Hello Xamarin.Forms!" HorizontalOptions="Center" | |
| VerticalOptions="Center"/> | |
| </StackLayout> | |
| </pages:PopupPage> |
Observações: Lembre-se de alterar o Code-Behind removendo a herança de ContentPage.
C#
Para abrir o Popup criado no passo anterior, utilize o código a seguir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| PopupNavigation.PushAsync(new PopupView()); |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano Custódio 