Freigeben über

Anzeigen mehrerer Fenster für Ihre App

In Ihrer WinUI-App können Sie Den App-Inhalt in sekundären Fenstern anzeigen, während Sie weiterhin an demselben UI-Thread in jedem Fenster arbeiten.

Öffnen Sie die WinUI Gallery-App, und sehen Sie mehrere Fenster in Aktion.

Mit der WinUI 3 Gallery-App können Sie interaktive Beispiele für WinUI 3-Steuerelemente, -Features und -Funktionen erkunden und durchsuchen. Holen Sie sich die App aus dem Microsoft Store oder holen Sie sich den Quellcode auf GitHub.

Tipp

Ein häufiger Grund für die Verwendung mehrerer Fenster ist es, TabView-Registerkarten in ein neues Fenster zu ziehen. Informationen und Beispiele, die für dieses Szenario spezifisch sind, finden Sie im Abschnitt "Tab tear-out" des Registerkartenansicht-Artikels.

API-Übersicht

Hier sind einige der wichtigen APIs, die Sie zum Anzeigen von Inhalten in mehreren Fenstern verwenden.

XAML Window und AppWindow

Die Klassen Window und AppWindow können verwendet werden, um einen Teil einer App in einem sekundären Fenster anzuzeigen. Ein wichtiges Feature von WinUI-Fenstern besteht darin, dass jede Instanz denselben UI-Verarbeitungsthread (einschließlich des Ereignisverteilers) verwendet, aus dem sie erstellt wurden, wodurch Apps mit mehreren Fenstern vereinfacht werden.

Unter Windowingübersicht für WinUI und Windows App SDK finden Sie eine detailliertere Erläuterung zu Window und AppWindow.

AppWindowPresenter

Mit der AppWindowPresenter-API können Sie Fenster einfach in vordefinierte Konfigurationen wie FullScreen oder CompactOverlay umschalten. Weitere Informationen finden Sie unter Verwalten von App-Fenstern.

XamlRoot

Die XamlRoot-Klasse enthält eine XAML-Elementstruktur, verbindet sie mit dem Fensterhostobjekt und stellt Informationen wie Größe und Sichtbarkeit bereit. Sie erstellen kein XamlRoot-Objekt direkt. Stattdessen wird eines erstellt, wenn Sie ein XAML-Element an ein Window anfügen. Anschließend können Sie die UIElement.XamlRoot-Eigenschaft verwenden, um xamlRoot abzurufen.

WindowId

WindowId ist ein eindeutiger Bezeichner für ein App-Fenster. Es wird automatisch erstellt und identifiziert den AppWindow und das zugeordnete Win32-HWND der obersten Ebene.

Über ein visuelles Element können Sie auf UIElement.XamlRoot zugreifen; dann XamlRoot.ContentIslandEnvironment; dann enthält die ContentIslandEnvironment.AppWindowId-Eigenschaft die ID des Fensters, in dem sich das UIElement befindet.

Ein neues Fenster öffnen

Sie können ein neues Window in XAML oder im Code erstellen. Wenn Sie eine Window in XAML erstellen, erstellen Sie tatsächlich eine Unterklasse der Window Klasse. Siehe MainWindow.xaml, das beispielsweise von der Visual Studio-App-Vorlage erstellt wurde.

Sehen wir uns die Schritte zum Anzeigen von Inhalten in einem neuen Fenster an.

So erstellen Sie ein neues Fenster mit XAML

  1. Klicken Sie im Projektmappen-Explorer-Bereich mit der rechten Maustaste auf den Projektnamen, und wählen Sie " Neues Element hinzufügen > " aus...
  2. Wählen Sie im Dialogfeld " Neues Element hinzufügen " winUI in der Vorlagenliste auf der linken Seite des Fensters aus.
  3. Wählen Sie die leere Window Vorlage aus.
  4. Benennen Sie die Datei.
  5. Drücken Sie Hinzufügen.

So zeigen Sie ein neues Fenster an

  1. Instanziieren Sie eine neue Instanz von Window, oder eine Window Unterklasse, wenn Sie eine Window Unterklasse mit einer .xaml Datei erstellt haben.

    Window newWindow = new Window();

  2. Erstellen Sie den Fensterinhalt.

    Wenn Sie eine Window Unterklasse mit einer .xaml Datei erstellt haben, können Sie den Fensterinhalt direkt in XAML hinzufügen. Andernfalls fügen Sie den Inhalt wie hier gezeigt im Code hinzu.

    Es ist üblich, einen XAML-Frame zu erstellen und dann im Frame zu einem XAML [Page] (/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.page) zu navigieren, in dem der App-Inhalt definiert wurde. Weitere Informationen zu Frames und Seiten findest du unter Peer-zu-Peer-Navigation zwischen zwei Seiten.

    Frame contentFrame = new Frame();
contentFrame.Navigate(typeof(SecondaryPage));

    Sie können beliebige XAML-Inhalte im AppWindow anzeigen, nicht nur ein Frame und Page. Sie können z. B. nur ein einzelnes Steuerelement anzeigen, z. B. ColorPicker, wie später gezeigt.

  3. Legen Sie Ihren XAML-Inhalt auf die Content-Eigenschaft der Window.

    newWindow.Content = contentFrame;

  4. Rufen Sie die Window.Activate-Methode auf, um das neue Fenster anzuzeigen.

    newWindow.Activate();

Nachverfolgen von Window-Instanzen

Möglicherweise möchten Sie Zugriff auf die Window-Instanzen aus anderen Teilen Ihrer App haben, aber nachdem Sie eine Instanz eines Window erstellt haben, gibt es keine Möglichkeit, aus anderem Code darauf zuzugreifen, es sei denn, Sie behalten einen Verweis darauf. Sie könnten zum Beispiel das Window.SizeChanged-Ereignis in MainPage behandeln, um UI-Elemente neu anzuordnen, wenn die Größe des Fensters geändert wird, oder Sie könnten eine Schaltfläche "Alle schließen" haben, die alle nachverfolgten Instanzen von Window schließt.

In diesem Fall sollten Sie den WindowId eindeutigen Bezeichner verwenden, um die Fensterinstanzen in einem Dictionary zu verfolgen, wobei das WindowId als Key und die Window-Instanz als Value fungiert. (TabView-Ausreiß-APIs verwenden WindowId auch zur Nachverfolgung von Windows.)

Erstellen Sie in Ihrer App Klasse die Dictionary als statische Eigenschaft. Fügen Sie dann beim Erstellen jede Seite zum Dictionary hinzu und entfernen Sie sie, wenn die Seite geschlossen wird.

// App.xaml.cs
public partial class App : Application
{
    private Window? _window;
    public static Dictionary<WindowId, Window> ActiveWindows { get; set; } = new Dictionary<WindowId, Window>();

    // ...

    protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
    {
        _window = new MainWindow();
        _window.Activate();
        // Track the new window in the dictionary.
        ActiveWindows.Add(_window.AppWindow.Id, _window);
    }
}

Der folgende Code erstellt ein neues Fenster in MainPage, wenn auf eine Schaltfläche geklickt wird. Mit der Methode fügt das neue Fenster dem hinzu und behandelt das .Closed-Ereignis, damit es beim Schließen des Fensters von entfernt wird.

// MainPage.xaml.cs
private Window CreateWindow()
{
    Window newWindow = new Window();

    // Configure the window.
    newWindow.AppWindow.Resize(new SizeInt32(1200, 800));
    newWindow.Title = "Window " + newWindow.AppWindow.Id.Value.ToString();
    newWindow.SystemBackdrop = new MicaBackdrop();

    TrackWindow(newWindow);
    return newWindow;
}

private void TrackWindow(Window window)
{
    window.Closed += (sender, args) => {
        App.ActiveWindows.Remove(window.AppWindow.Id, out window);
    };
    App.ActiveWindows.Add(window.AppWindow.Id, window);
}

Abrufen eines nachverfolgten Fensters aus dem App-Code

Um im App-Code auf eine Window-Instanz zuzugreifen, benötigen Sie die WindowId des aktuellen Fensters, mit dem Sie es aus dem statischen Dictionary in der App-Klasse abrufen können. Sie sollten dies im Loaded-Ereignishandler der Seite statt im Konstruktor tun, damit XamlRoot nicht null.

public sealed partial class SecondaryPage : Page
{
    Window window;

    public SecondaryPage()
    {
        InitializeComponent();
        Loaded += AppWindowPage_Loaded;
    }

    private void AppWindowPage_Loaded(object sender, RoutedEventArgs e)
    {
        // Get the reference to this Window that was stored when it was created.
        // Do this in the Page Loaded handler rather than the constructor to
        // ensure that the XamlRoot is created and attached to the Window.
        WindowId windowId = this.XamlRoot.ContentIslandEnvironment.AppWindowId;

        if (App.ActiveWindows.ContainsKey(windowId))
        {
            window = App.ActiveWindows[windowId];
        }
    }
}
  • Last updated on