Поделиться через


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 . Если используется PopupHorizontalOptions или VerticalOptions свойства, которые не являются значениями по умолчанию, это Size свойство является обязательным.
VerticalOptions LayoutAlignment Возвращает или задает LayoutAlignment значение для размещения Popup вертикально на экране.

События

Мероприятие Описание
Closed Происходит при закрытии Popup .
Opened Происходит при открытии Popup .

Примеры

Пример этой функции можно найти в действии в примере приложения .NET MAUI Community Toolkit.

API

Исходный код Popupможно найти в репозитории .NET MAUI Community Toolkit GitHub.