Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Pop-ups são uma maneira comum de apresentar informações a um usuário relacionado à tarefa atual. Os sistemas operacionais fornecem uma maneira de mostrar uma mensagem e exigir uma resposta do usuário, esses alertas normalmente são restritivos em termos do conteúdo que um desenvolvedor pode fornecer e também o layout e a aparência.
Observação
Se você quiser apresentar algo ao usuário que seja mais sutil, confira nossas opções do Toast e do Snackbar.
O Modo de Exibição Popup
permite que os desenvolvedores criem sua própria interface do usuário personalizada e a apresentem aos usuários.
O .NET MAUI Community Toolkit fornece duas abordagens para criar uma Popup
que pode ser mostrada em um aplicativo .NET MAUI. Essas abordagens dependerão do caso de uso. Esta página se concentra na forma mais simples de Popup
simplesmente renderizar uma sobreposição em um aplicativo. Para uma abordagem mais avançada, que permite retornar um resultado do Popup
, consulte Popup – Retornando um resultado.
Exibindo um pop-up
O .NET MAUI Community Toolkit fornece várias abordagens para exibir um Popup
em um aplicativo MAUI do .NET:
- Em uma
ContentPage
, chame o método de extensãothis.ShowPopupAsync()
, passando umaView
para exibição no Pop-up- Nota: Para personalizar ainda mais um Pop-up, consulte a documentação do PopupOptions.
- Como retornar um resultado do
Popup
- Consulte a documentação Pop-up - Como retornar um resultado.
- Usando o
PopupService
- Consulte a documentação do PopupService.
A documentação a seguir demonstra a maneira mais simples de exibir um pop-up usando o .ShowPopupAsync()
método de extensão. Esse método retorna um Task<IPopupResult>
, que será concluído quando a janela pop-up for fechada. Os PopupOptions
fornecidos são opcionais.
public class MainPage : ContentPage
{
// ...
async void DisplayPopupButtonClicked(object? sender, EventArgs e)
{
await this.ShowPopupAsync(new Label
{
Text = "This is a very important message!"
}, new PopupOptions
{
CanBeDismissedByTappingOutsideOfPopup = false,
Shape = new RoundRectangle
{
CornerRadius = new CornerRadius(20, 20, 20, 20),
StrokeThickness = 2,
Stroke = Colors.LightGray
}
})
/**** Alternatively, Shell.Current can be used to display a Popup
await Shell.Current.ShowPopupAsync(new Label
{
Text = "This is a very important message!"
}, new PopupOptions
{
CanBeDismissedByTappingOutsideOfPopup = false,
Shape = new RoundRectangle
{
CornerRadius = new CornerRadius(20, 20, 20, 20),
StrokeThickness = 2,
Stroke = Colors.LightGray
}
})
****/
}
}
Como alternativa, um Popup
pode ser criado em XAML ou C# e passado para ShowPopupAsync()
.
Criando um pop-up em XAML
A maneira mais fácil de criar um Popup
é adicionar um novo .NET MAUI ContentView (XAML)
ao seu projeto. Isso criará dois arquivos: um arquivo *.xaml e um arquivo *.xaml.cs .
Substitua o conteúdo de *.xaml pelo seguinte:
<ContentView
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyProject.SimplePopup"
Padding="10">
<Label Text="This is a very important message!" />
</ContentView>
Os valores padrão para HorizontalOptions
e VerticalOptions
resultarão na exibição do Popup
sobreposto ao centro da página.
Um pop-up será apresentado com um Padding
padrão de 15. Para melhorar a aparência do SimplePopup
, um Padding
com o valor 10 foi adicionado.
Apresentando um pop-up criado em XAML
Depois que o Popup
tiver sido criado no XAML, ele poderá ser apresentado por meio do uso dos métodos de extensão Popup
usados em uma Page
, um Shell
ou em uma INavigation
, ou por meio da implementação do IPopupService
deste kit de ferramentas.
O exemplo a seguir mostra como instanciar e mostrar o SimplePopup
criado no exemplo anterior por meio de um método de extensão em um ContentPage
.
using CommunityToolkit.Maui.Views;
public class MyPage : ContentPage
{
public async Task DisplayPopup(CancellationToken token)
{
var popup = new SimplePopup();
await this.ShowPopupAsync(popup, PopupOptions.Empty, token);
}
}
Como fechar um Pop-up
Existem 2 maneiras diferentes de fechar um Popup
:
- Um pop-up pode ser fechado programaticamente
- Um pop-up pode ser fechado quando um usuário toca fora do pop-up
-
Nota Para impedir que um pop-up feche quando um usuário toca fora dele, defina
PopupOptions.CanBeDismissedByTappingOutsideOfPopup
comofalse
-
Nota Para impedir que um pop-up feche quando um usuário toca fora dele, defina
1. Fechando programaticamente um pop-up
Há três opções para fechar um Popup
programaticamente:
- Em um
ContentPage
, use o método de extensãothis.ClosePopupAsync()
- Em um aplicativo usando
Shell
, use o método de extensãoShell.Current.ClosePopupAsync()
- Usar o
PopupService
- Consulte a documentação do PopupService.
No exemplo abaixo, demonstramos como usar this.ClosePopupAsync()
em um ContentPage
. Para saber como usar PopupService
para fechar um pop-up, consulte a documentação do PopupService.
using CommunityToolkit.Maui.Views;
public class MyPage : ContentPage
{
public async Task DisplayAutomaticallyClosingPopup(Timespan displayTimeSpan, CancellationToken token)
{
var popup = new SimplePopup();
// This Popup is closed programmatically after 2 seconds
this.ShowPopup(popup, new PopupOptions
{
CanBeDismissedByTappingOutsideOfPopup = false
});
await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);
await this.ClosePopupAsync(token);
/**** Alternatively, Shell.Current can be used to close a Popup
Shell.Current.ShowPopup(popup, new PopupOptions
{
CanBeDismissedByTappingOutsideOfPopup = false
});
await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);
await Shell.Current.ClosePopupAsync(token);
***/
}
}
2. Tocando fora do Pop-up
Por padrão, um usuário pode tocar fora do Popup
para ignorá-lo. Isso pode ser controlado por meio do uso da propriedade PopupOptions.CanBeDismissedByTappingOutsideOfPopup
. Definir essa propriedade como false
irá impedir que um usuário seja capaz de fora dela. Consulte PopupOptions para obter mais detalhes.
Opções de pop-up
PageOverlayColor
, Shape
, Shadow
podem ser todos personalizados para Popup. Consulte PopupOptions para obter mais detalhes.
Eventos
A Popup
classe fornece os seguintes eventos que podem ser assinados.
Evento | Descrição |
---|---|
Closed |
Ocorre quando o Popup é fechado. |
Opened |
Ocorre quando o Popup é aberto. |
Exemplos
Você pode encontrar um exemplo desse recurso na prática em Aplicativo de exemplo do Kit de Ferramentas da Comunidade do .NET MAUI.
API (Interface de Programação de Aplicativos)
O código-fonte do Popup
pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.
Recursos adicionais
.NET MAUI Community Toolkit