Freigeben über

Anzeigen mehrerer Fenster für Ihre App

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

  • Wichtige APIs: Microsoft.UI.Windowing-Namespace, Klasse, Klasse

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

WinUI 3-Galeriesymbol Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie 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 und

Die Klassen und 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.

Im Windowing overview for WinUI and Windows App SDK finden Sie eine ausführlichere Erläuterung zu Window und AppWindow.

AppWindowPresenter

Mit der AppWindowPresenter-API können Sie Fenster einfach in vordefinierte Konfigurationen wie oder 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 anfügen. Anschließend können Sie die UIElement.XamlRoot-Eigenschaft verwenden, um xamlRoot abzurufen.

WindowId

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

Aus einem visuellen Element können Sie auf UIElement.XamlRoot zugreifen; dann auf XamlRoot.ContentIslandEnvironment; dann enthält die Eigenschaft ContentIslandEnvironment.AppWindowId die ID des Fensters, in dem sich das UIElement befindet.

Ein neues Fenster öffnen

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

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 Bereich Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen und wählen Sie Zu > Neues Element hinzufügen...
  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 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 , oder eine Unterklasse, wenn Sie eine Unterklasse mit einer Datei erstellt haben.

    Window newWindow = new Window();

  2. Erstellen Sie den Fensterinhalt.

    Wenn Sie eine Unterklasse mit einer 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- zu erstellen und dann im zu einem XAML [] (/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 anzeigen, nicht nur ein und . 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 .

    newWindow.Content = contentFrame;

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

    newWindow.Activate();

Nachverfolgen von -Instanzen

Möglicherweise möchten Sie auf die -Instanzen aus anderen Teilen Ihrer App zugreifen. Nachdem Sie jedoch eine Instanz eines erstellt haben, gibt es keine Möglichkeit, aus einem anderen Code darauf zuzugreifen, es sei denn, Sie behalten einen Verweis darauf. Sie könnten zum Beispiel das .SizeChanged-Ereignis in 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 schließt.

In diesem Fall sollten Sie den eindeutigen Bezeichner verwenden, um die Fensterinstanzen in einem zu verfolgen, wobei das als und die -Instanz als fungiert. (TabView-APIs zum Herauslösen von Tabs verwenden auch WindowId, um Windows nachzuverfolgen.)

Erstellen Sie in Ihrer Klasse die als statische Eigenschaft. Fügen Sie dann beim Erstellen jede Seite zum 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 , 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 auf eine -Instanz aus Ihrem App-Code zuzugreifen, müssen Sie die für das aktuelle Fenster abrufen, damit Sie sie aus der statischen in Ihrer -Klasse abrufen können. Sie sollten dies im Loaded-Ereignishandler der Seite statt im Konstruktor tun, damit XamlRoot nicht .

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];
        }
    }
}
  • Fensterverwaltung Übersicht
  • Verwalten von App-Fenstern
  • Registerkartenansicht
  • Anzeigen mehrerer Ansichten (UWP)
  • Last updated on