Freigeben über

Popup-Fenster

Popups sind eine übliche Möglichkeit, einem Benutzer Informationen zu präsentieren, die sich auf die aktuelle Aufgabe beziehen. Betriebssysteme bieten eine Möglichkeit zum Anzeigen einer Nachricht und Anfordern einer Antwort des Benutzers. Diese Warnungen sind in der Regel in Bezug auf den Inhalt, den ein Entwickler bereitstellen kann, sowie das Layout und die Darstellung restriktiv.

Hinweis

Wenn Sie dem Benutzer Informationen etwas dezenter präsentieren möchten, schauen Sie sich unsere Toast- und Snackbar-Optionen an.

Mit der Ansicht Popup können Entwickler ihre eigene benutzerdefinierte Benutzeroberfläche erstellen und ihren Benutzern präsentieren.

Das .NET MAUI Community Toolkit bietet zwei Ansätze, um ein Popup zu erstellen, das in einer .NET MAUI-Anwendung angezeigt werden kann. Diese Ansätze hängen vom Anwendungsfall ab. Diese Seite konzentriert sich auf die einfachste Form von Popup - einfaches Rendern einer Überlagerung in einer Anwendung. Für einen fortgeschritteneren Ansatz, der es ermöglicht, ein Ergebnis aus dem Popup zurückzugeben, lesen Sie bitte Popup – Zurückgeben eines Ergebnisses.

Anzeigen eines Popups

Das .NET MAUI Community Toolkit bietet mehrere Ansätze zum Anzeigen eines Popup in einer .NET MAUI-Anwendung.

  1. Rufen Sie in einer ContentPage die this.ShowPopupAsync()-Erweiterungsmethode auf, und übergeben Sie ein View zur Anzeige im Popup.
  2. Aus dem Popup ein Ergebnis zurückgeben
  3. Verwenden des PopupServices

In der folgenden Dokumentation wird die einfachste Methode zum Anzeigen eines Popups mithilfe der .ShowPopupAsync() Erweiterungsmethode veranschaulicht. Diese Methode gibt ein Task<IPopupResult> zurück, das abgeschlossen wird, wenn das Popup geschlossen wird. Die bereitgestellten PopupOptions sind optional.

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
            }
        })
        ****/
    }
}

Popup mit Padding

Alternativ kann ein Popup in XAML oder C# erstellt und an ShowPopupAsync() übergeben werden.

Erstellen eines Popups in XAML

Der einfachste Weg, um ein Popup zu erstellen, besteht darin, ein neues .NET MAUI ContentView (XAML) zu Ihrem Projekt hinzuzufügen. Dadurch werden zwei Dateien erstellt: eine *.xaml-Datei und eine *.xaml.cs-Datei .

Ersetzen Sie den Inhalt von *.xaml durch Folgendes:

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

Die Standardwerte für HorizontalOptions und VerticalOptions führen dazu, dass Popup in der Mitte der Seite angezeigt werden, die von ihm überlagert wird.

Es wird ein Popup mit einem Padding-Standardwert von 15 angezeigt. Damit das SimplePopup besser dargestellt wird, wurde ein Padding von 10 hinzugefügt.

Präsentieren eines in XAML erstellten Popups

Nachdem die Popup in XAML erstellt wurde, kann sie dann durch die Verwendung der Popup-Erweiterungsmethoden präsentiert werden, die auf einem Page, Shell oder einem INavigation verwendet werden, oder durch die IPopupService-Implementierung aus diesem Toolkit.

Das folgende Beispiel zeigt, wie das im vorherigen Beispiel erstellte SimplePopup-Objekt mithilfe einer Erweiterungsmethode auf einem ContentPage instanziiert und angezeigt wird.

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

Popup mit Padding

Schließen eines Popups

Es gibt zwei verschiedene Möglichkeiten, wie eine Popup geschlossen werden kann:

  1. Ein Popup kann programmgesteuert geschlossen werden
  2. Ein Popup kann geschlossen werden, wenn ein Benutzer außerhalb des Popups tippt.
    • Anmerkung Um zu verhindern, dass ein Popup geschlossen wird, wenn ein Benutzer außerhalb des Popups tippt, legen Sie ihn PopupOptions.CanBeDismissedByTappingOutsideOfPopup auf false

1. Programmgesteuertes Schließen eines Popups

Es gibt drei Optionen, ein Popup programmgesteuert zu schließen.

  1. Verwenden Sie in einer ContentPage die this.ClosePopupAsync()-Erweiterungsmethode.
  2. Verwenden Sie die Erweiterungsmethode Shell in einer App, die Shell.Current.ClosePopupAsync() verwendet.
  3. Verwenden Sie das PopupService

Im unteren Beispiel zeigen wir, wie this.ClosePopupAsync() in einem ContentPage verwendet wird. Informationen zum PopupService Schließen eines Popups finden Sie in der PopupService-Dokumentation.

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. Tippen außerhalb des Popups

Standardmäßig kann ein Benutzer außerhalb des Popup tippen, um es zu schließen. Dies kann über die Verwendung der PopupOptions.CanBeDismissedByTappingOutsideOfPopup-Eigenschaft gesteuert werden. Wenn Sie diese Eigenschaft auf false festlegen, wird verhindert, dass ein Benutzer das Popup schließen kann, indem er außerhalb des Objekts tippt. Weitere Informationen finden Sie unter "PopupOptions ".

PopupOptions

Die PageOverlayColor, Shape und Shadow können alle für Popup angepasst werden. Weitere Informationen finden Sie unter "PopupOptions ".

Festlegen von Popupstandardeinstellungen

Um die Standardwerte für jedes Popup in Ihrer Anwendung außer Kraft zu setzen, können Sie .SetPopupDefaults() und .SetPopupOptionsDefaults() bei der Initialisierung des .NET MAUI Community Toolkit aufrufen.

Die bereitgestellte DefaultPopupSettings wird als Standardwert für jede Popup in Ihrer App angewendet, und DefaultPopupOptionsSettings wird als Standardwert für PopupOptions angewendet, wenn .ShowPopup() aufgerufen wird.

.UseMauiCommunityToolkit(static options =>
{
  options.SetPopupDefaults(new DefaultPopupSettings
  {
	  CanBeDismissedByTappingOutsideOfPopup = true,
	  BackgroundColor = Colors.Orange,
	  HorizontalOptions = LayoutOptions.End,
	  VerticalOptions = LayoutOptions.Start,
	  Margin = 72,
	  Padding = 4
  });
  options.SetPopupOptionsDefaults(new DefaultPopupOptionsSettings
  {
	  CanBeDismissedByTappingOutsideOfPopup = true,
	  OnTappingOutsideOfPopup = async () => await Toast.Make("Popup Dismissed").Show(CancellationToken.None),
	  PageOverlayColor = Colors.Orange,
	  Shadow = null,
	  Shape = null
  });
})

Ereignisse

Die Popup Klasse stellt die folgenden Ereignisse bereit, die abonniert werden können.

Ereignis Beschreibung
Closed Tritt ein, wenn das Popup geschlossen wird.
Opened Tritt ein, wenn das Popup geöffnet wird.

Beispiele

Sie finden ein Beispiel für dieses Feature in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.

Programmierschnittstelle (API)

Sie finden den Quellcode für Popup über das GitHub-Repository für das .NET MAUI Community Toolkit.

Zusätzliche Ressourcen