Popup
Всплывающие окна — это очень распространенный способ представления информации пользователю, связанному с текущей задачей. Операционные системы предоставляют способ отображения сообщения и требуют ответа от пользователя, эти оповещения обычно ограничены с точки зрения содержимого, которое разработчик может предоставить, а также макет и внешний вид.
Примечание.
Если вы хотите представить что-то пользователю, который более тонкий, то ознакомьтесь с нашими параметрами Toast и Snackbar .
Представление Popup
позволяет разработчикам создавать собственный пользовательский интерфейс и представлять его пользователям.
Создание всплывающего окна
Можно создать в Popup
XAML или C#:
XAML
Включение пространства имен XAML
Чтобы использовать набор средств в XAML, xmlns
необходимо добавить на страницу или представление следующее:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Поэтому следующее:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
</ContentPage>
Будет изменено, чтобы включить следующее xmlns
:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
</ContentPage>
Определение всплывающего окна
Обратите внимание, что если в Popup
XAML он также должен иметь код C#. Чтобы понять, почему это необходимо, см. эту страницу документации по .NET MAUI.
Самый простой способ создать Popup
— добавить новый в .NET MAUI ContentView (XAML)
проект, а затем изменить каждый из файлов следующим образом:
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyProject.SimplePopup">
<VerticalStackLayout>
<Label Text="This is a very important message!" />
</VerticalStackLayout>
</toolkit:Popup>
public partial class SimplePopup : Popup
{
public SimplePopup()
{
InitializeComponent();
}
}
Внимание
Если код за файлом не создается вместе с вызовом InitializeComponent
, при попытке отобразить Popup
исключение будет возникать исключение.
C#
using CommunityToolkit.Maui.Views;
var popup = new Popup
{
Content = new VerticalStackLayout
{
Children =
{
new Label
{
Text = "This is a very important message!"
}
}
}
};
Представление всплывающего окна
Popup
После создания его можно представить с помощью наших Popup
методов расширения или реализации IPopupService
из этого набора средств.
Внимание
Может Popup
отображаться только от Page
реализации, наследуемой от Page
.
using CommunityToolkit.Maui.Views;
public class MyPage : ContentPage
{
public void DisplayPopup()
{
var popup = new SimplePopup();
this.ShowPopup(popup);
}
}
Закрытие всплывающего окна
Существует 2 различных способа закрытия Popup
; программным способом или путем касания за пределами всплывающего окна.
Программное закрытие всплывающего окна
Чтобы закрыть разработчика Popup
, необходимо вызвать Close
или CloseAsync
по Popup
себе. Обычно это выполняется путем реагирования на нажатие кнопки от пользователя.
Мы можем улучшить предыдущий пример XAML, добавив ОКButton
:
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyProject.SimplePopup">
<VerticalStackLayout>
<Label Text="This is a very important message!" />
<Button Text="OK"
Clicked="OnOKButtonClicked" />
</VerticalStackLayout>
</toolkit:Popup>
В результирующем обработчике событий, который мы вызываем Close
, будет программно закрываться Popup
.
Примечание.
Close()
— это метод fire-and-forget. Он завершится и вернется в вызывающий поток до того, как операционная система отклонила Popup
экран. Если вам нужно приостановить выполнение кода до тех пор, пока операционная система не уволила Popup
его с экрана, используйте вместо него CloseAsync()
.
public partial class MySimplePopup : Popup
{
// ...
void OnOKButtonClicked(object? sender, EventArgs e) => Close();
}
В результирующем обработчике событий, который мы вызываем CloseAsync
, будет программно закрывать Popup
вызывающий await
метод до тех пор, пока операционная система не отклонится Popup
от экрана.
public partial class MySimplePopup : Popup
{
// ...
async void OnOKButtonClicked(object? sender, EventArgs e)
{
var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
await CloseAsync(token: cts.Token);
await Toast.Make("Popup Dismissed By Button").Show();
}
}
Касание за пределами всплывающего окна
По умолчанию пользователь может коснуться вне его Popup
, чтобы закрыть его. Это можно контролировать с помощью CanBeDismissedByTappingOutsideOfPopup
свойства. Если задать это свойство, false
пользователь не сможет закрыть его Popup
, коснувшись за ее пределами.
Возврат результата
Разработчик часто ищет ответ от своего пользователя, Popup
представление позволяет разработчикам возвращать результат, который можно ожидать и выполнять.
Мы можем улучшить исходный пример XAML, чтобы показать, как это можно сделать:
XAML
Добавив в XAML 2 новые кнопки:
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyProject.SimplePopup">
<VerticalStackLayout>
<Label Text="This is a very important message! Do you agree?" />
<Button Text="Yes"
Clicked="OnYesButtonClicked" />
<Button Text="No"
Clicked="OnNoButtonClicked" />
</VerticalStackLayout>
</toolkit:Popup>
Затем добавьте следующие обработчики событий в C#:
async void OnYesButtonClicked(object? sender, EventArgs e)
{
var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
await CloseAsync(true, cts.Token);
}
async void OnNoButtonClicked(object? sender, EventArgs e)
{
var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
await CloseAsync(false, cts.Token);
}
Метод Close
позволяет object
указать значение, которое будет получено в результате возвращаемого значения. Чтобы ожидать результат, ShowPopupAsync
метод должен использоваться следующим образом:
using CommunityToolkit.Maui.Views;
public class MyPage : ContentPage
{
public async Task DisplayPopup()
{
var popup = new SimplePopup();
var result = await this.ShowPopupAsync(popup, CancellationToken.None);
if (result is bool boolResult)
{
if (boolResult)
{
// Yes was tapped
}
else
{
// No was tapped
}
}
}
}
Примечание.
Для обработки касания за пределами Popup
, когда также ожидается результат, можно изменить значение, возвращаемое через ResultWhenUserTapsOutsideOfPopup
свойство.
Стили
Класс Popup
позволяет использовать стили MAUI .NET, чтобы упростить совместное использование общих параметров визуального элемента в нескольких всплывающих окнах.
В следующем примере показано, как определить стиль, применимый к SimplePopup
примеру из предыдущего раздела.
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:popups="clr-namespace:CommunityToolkit.Maui.Sample.Views.Popups"
x:Class="MyProject.SimplePopup">
<toolkit:Popup.Resources>
<Style TargetType="{x:Type popups:SimplePopup}">
<Setter Property="Size" Value="100,200" />
<Setter Property="Color" Value="Green" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Start" />
<Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
</Style>
</toolkit:Popup.Resources>
<VerticalStackLayout>
<Label Text="This is a very important message! Do you agree?" />
<Button Text="Yes"
Clicked="OnYesButtonClicked" />
<Button Text="No"
Clicked="OnNoButtonClicked" />
</VerticalStackLayout>
</toolkit:Popup>
Примечание.
При создании Style
целевых объектов Popup
и вы хотите применить его к пользовательским всплывающим окнам, например SimplePopup
к примеру, обязательно задайте ApplyToDerivedTypes
свойство в определении Style
.
Свойства
Свойство | Type | Описание |
---|---|---|
Anchor |
View |
Возвращает или задает привязку View . Привязка — это место, где всплывающее окно будет отображаться ближе всего. При настройке всплывающего окна привязки появится центрирование над этим элементом управления или как можно ближе. |
CanBeDismissedByTappingOutsideOfPopup |
bool |
Возвращает или задает значение, указывающее, может ли всплывающее окно быть отклонено, касаясь за пределами всплывающего окна. В Android — при отключении кнопки "Назад" оборудования. |
Color |
Color |
Возвращает или задает всплывающее Color окно. Этот цвет задает собственный цвет фона Popup , который не зависит от любого цвета фона, настроенного в фактическом Content . |
Content |
View |
Возвращает или задает содержимое View для отрисовки в объекте Popup . |
HorizontalOptions |
LayoutAlignment |
Возвращает или задает LayoutAlignment значение для размещения Popup горизонтально на экране. |
Result |
Task<object?> |
Возвращает окончательный результат отклоненного Popup . |
Size |
Size |
Возвращает или задает Size всплывающее окно. Всплывающее окно всегда пытается ограничить фактический размер Popup представления, если не указано значение Size . Если используется Popup HorizontalOptions или VerticalOptions свойства, которые не являются значениями по умолчанию, это Size свойство является обязательным. |
VerticalOptions |
LayoutAlignment |
Возвращает или задает LayoutAlignment значение для размещения Popup вертикально на экране. |
События
Мероприятие | Описание |
---|---|
Closed |
Происходит при закрытии Popup . |
Opened |
Происходит при открытии Popup . |
Примеры
Пример этой функции можно найти в действии в примере приложения .NET MAUI Community Toolkit.
API
Исходный код Popup
можно найти в репозитории .NET MAUI Community Toolkit GitHub.
.NET MAUI Community Toolkit