Popup

Всплывающие окна — это очень распространенный способ представления информации пользователю, связанному с текущей задачей. Операционные системы предоставляют способ отображения сообщения и требуют ответа от пользователя, эти оповещения обычно ограничены с точки зрения содержимого, которое разработчик может предоставить, а также макет и внешний вид.

Представление 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();
    }
}

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 из этого набора средств.

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.

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 позволяет использовать стили 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>

Свойства

События

Примеры

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

API

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