Překryvný

Automaticky otevírané okno představuje velmi běžný způsob prezentace informací uživateli, který souvisí s aktuálním úkolem. Operační systémy poskytují způsob, jak zobrazit zprávu a vyžadovat odpověď od uživatele, tato upozornění jsou obvykle omezující z hlediska obsahu, který může vývojář poskytnout, a také rozložení a vzhled.

Poznámka:

Pokud chcete prezentovat něco uživateli, který je jemnější, podívejte se na naše možnosti Informační zpráva a Snackbar .

Toto Popup zobrazení umožňuje vývojářům vytvářet vlastní uživatelské rozhraní a prezentovat ho svým uživatelům.

Sestavení automaticky otevírané nabídky

V jazyce XAML nebo C# je možné vytvořit A Popup :

XAML

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Proto platí následující:

<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>

Bylo by změněno tak, aby zahrnovalo xmlns následující:

<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>

Definování automaticky otevírané nabídky

Upozorňujeme, že pokud je vytvořený Popup v XAML, musí mít také kód jazyka C#. Informace o tom, proč je to potřeba, najdete na této stránce dokumentace k .NET MAUI.

Nejjednodušší způsob, jak vytvořit projekt, Popup je přidat nový .NET MAUI ContentView (XAML) projekt a pak změnit každý soubor na následující:

<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();
    }
}

Důležité

Pokud kód za souborem není vytvořen spolu s volánímInitializeComponent, bude vyvolán výjimka při pokusu o zobrazení .Popup

C#

using CommunityToolkit.Maui.Views;

var popup = new Popup
{
    Content = new VerticalStackLayout
    {
        Children = 
        {
            new Label
            {
                Text = "This is a very important message!"
            }
        }
    }
};

Prezentace automaticky otevírané nabídky

Jakmile se sestaví Popup , můžete ji pak předložit pomocí našich Popup rozšiřujících metod nebo prostřednictvím IPopupService implementace z této sady nástrojů.

Důležité

A Popup lze zobrazit pouze z Page nebo implementace dědění z Page.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public void DisplayPopup()
    {
        var popup = new SimplePopup();

        this.ShowPopup(popup);
    }
}

Zavření automaticky otevírané nabídky

Existují 2 různé způsoby, jak Popup můžete zavřít, programově nebo klepnutím mimo místní okno.

Zavírání automaticky otevírané nabídky prostřednictvím kódu programu

Aby vývojář mohl zavřít Popup hovor Close nebo CloseAsync na Popup sebe sama. Obvykle to provádí reagování na tlačítko stisknout od uživatele.

Předchozí příklad XAML můžeme vylepšit přidáním ok 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>

Ve výsledné obslužné rutině události, kterou voláme Close, tím programově Popupzavřete .

Poznámka:

Close() je metoda fire-and-forget. Dokončí se a vrátí se do volajícího vlákna předtím, než operační systém zavře Popup z obrazovky. Pokud potřebujete pozastavit provádění kódu, dokud operační systém zavře Popup z obrazovky, použijte místo toho CloseAsync().

public partial class MySimplePopup : Popup
{
    // ...

    void OnOKButtonClicked(object? sender, EventArgs e) => Close();
}

Ve výsledné obslužné rutině události, kterou voláme CloseAsync, programově zavře Popup volající await metodu, dokud operační systém nezavře Popup z obrazovky.

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();
    }
}

Klepnutí mimo místní okno

Ve výchozím nastavení může uživatel klepnout mimo obrazovku a zavřít ho Popup . To lze řídit pomocí použití CanBeDismissedByTappingOutsideOfPopup vlastnosti. Nastavením této vlastnosti zabráníte tomu, aby uživatel mohl zavřít false klepnutím mimo tuto vlastnostPopup.

Vrácení výsledku

Vývojář často hledá odpověď od uživatele, Popup zobrazení umožňuje vývojářům vrátit výsledek, na který je možné očekávat a reagovat na ně.

Můžeme vylepšit původní příklad XAML, abychom ukázali, jak toho lze dosáhnout:

XAML

Přidáním 2 nových tlačítek do 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! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Potom do jazyka C# přidejte následující obslužné rutiny událostí:

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);
}

Metoda Close umožňuje, aby byla zadána object hodnota, což bude výsledná návratová hodnota. Chcete-li očekávat výsledek, ShowPopupAsync musí být metoda použita následujícím způsobem:

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
            }
        }
    }
}

Poznámka:

Chcete-li zpracovat klepnutí mimo mimo dobu Popup , kdy také čeká na výsledek, můžete změnit hodnotu vrácenou prostřednictvím ResultWhenUserTapsOutsideOfPopup vlastnosti.

Formátování

Třída Popup umožňuje používat styly .NET MAUI, aby bylo snazší sdílet společná vizuální nastavení napříč několika automaticky otevíraných oken.

Následující příklad ukazuje, jak definovat styl, který se vztahuje na SimplePopup příklad z předchozí části.

<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>

Poznámka:

Při vytváření Style cíle a chcete ho použít pro vlastní automaticky otevírané okno, jako je příkladPopup, nezapomeňte nastavit SimplePopup vlastnost v definici ApplyToDerivedTypesStyle.

Vlastnosti

Vlastnost	Type	Popis
Anchor	View	Získá nebo nastaví ukotvení View . Ukotvení je místo, kde se automaticky otevírané okno zobrazí nejblíže. Po nakonfigurování ukotvení se automaticky otevírané okno zobrazí uprostřed nad tímto ovládacím prvku nebo co nejblíže.
CanBeDismissedByTappingOutsideOfPopup	bool	Získá nebo nastaví hodnotu označující, zda lze místní okno zavřít klepnutím mimo místní nabídka. V Androidu – pokud je tlačítko zpět hardwaru zakázané.
Color	Color	Získá nebo nastaví Color automaticky otevírané okno. Tato barva nastaví nativní barvu Popuppozadí , která je nezávislá na jakékoli barvě pozadí nakonfigurované ve skutečnosti Content.
Content	View	Získá nebo nastaví View obsah, který se má vykreslit v souboru Popup.
HorizontalOptions	LayoutAlignment	Získá nebo nastaví LayoutAlignment pro umístění Popup vodorovně na obrazovce.
Result	Task<object?>	Získá konečný výsledek zamítnutého Popup.
Size	Size	Získá nebo nastaví Size automaticky otevírané okno zobrazení. Automaticky otevírané okno se vždy pokusí omezit skutečnou velikost Popup zobrazení na velikost zobrazení, pokud Size není zadána. Popup Pokud se používají HorizontalOptions vlastnosti, VerticalOptions které nejsou výchozí hodnoty, je tato Size vlastnost povinná.
VerticalOptions	LayoutAlignment	Získá nebo nastaví LayoutAlignment pro umístění Popup svisle na obrazovce.

Události

Událost	Popis
Closed	Nastane při zavření Popup .
Opened	Nastane při Popup otevření.

Příklady

Příklad této funkce najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód Popup najdete v úložišti .NET MAUI Community Toolkit na GitHubu.