Meerdere vensters voor uw app weergeven

Van toepassing op: ✅ WinUI 3, ✅ Windows App SDK

In uw WinUI 3-app kunt u uw app-inhoud in secundaire vensters weergeven terwijl u in elk venster nog steeds aan dezelfde UI-thread werkt.

Belangrijke API's: Microsoft.UI.Windowing-naamruimte, Window klasse, AppWindow klasse

Open de WinUI 3 Gallery-app en bekijk meerdere vensters in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Aanbeveling

Een veelvoorkomende reden om meerdere vensters te gebruiken, is om TabView-tabbladen los te maken in een nieuw venster. Zie Tab-scheuring in het artikel tabweergave voor informatie en voorbeelden die specifiek zijn voor dit scenario.

API-overzicht

Hier volgen enkele belangrijke API's die u gebruikt om inhoud in meerdere vensters weer te geven.

XAML Window en AppWindow

De Window en AppWindow klassen kunnen worden gebruikt om een deel van een app weer te geven in een secundair venster. Een belangrijke functie van WinUI-vensters is dat elk exemplaar dezelfde UI-verwerkingsthread (inclusief de gebeurtenisverzender) deelt waaruit ze zijn gemaakt, waardoor apps met meerdere vensters worden vereenvoudigd.

Zie het vensteroverzicht voor WinUI en Windows App SDK voor een meer gedetailleerde uitleg van Window en AppWindow.

AppWindowPresenter

Met de AppWindowPresenter-API kunt u eenvoudig overschakelen naar vooraf gedefinieerde configuraties zoals FullScreen of CompactOverlay. Zie App-vensters beheren voor meer informatie.

XamlRoot

De XamlRoot-klasse bevat een XAML-elementstructuur, verbindt deze met het vensterhostobject en biedt informatie zoals grootte en zichtbaarheid. U maakt geen XamlRoot-object rechtstreeks. In plaats daarvan wordt er een gemaakt wanneer u een XAML-element koppelt aan een Window. Vervolgens kunt u de eigenschap UIElement.XamlRoot gebruiken om de XamlRoot op te halen.

WindowId

WindowId is een unieke id voor een app-venster. Deze wordt automatisch gemaakt en identificeert zowel de AppWindow als de Win32 HWND op het hoogste niveau waarmee het is geassocieerd.

Vanuit een visueel element hebt u toegang tot UIElement.XamlRoot; dan XamlRoot.ContentIslandEnvironment; vervolgens bevat de eigenschap ContentIslandEnvironment.AppWindowId de id van het venster waarin het UIElement zich bevindt.

Een nieuw venster weergeven

U kunt een nieuwe Window maken in XAML of in code. Als u een Window in XAML maakt, maakt u eigenlijk een subklasse van de Window klasse. Zie bijvoorbeeld MainWindow.xaml dat is gemaakt door de Visual Studio-app-sjabloon.

Laten we eens kijken naar de stappen om inhoud in een nieuw venster weer te geven.

Een nieuw venster maken met XAML

Klik in het deelvenster Solution Explorer met de rechtermuisknop op de projectnaam en selecteer Nieuw item toevoegen > ...
Selecteer In het dialoogvenster Nieuw item toevoegenWinUI in de sjabloonlijst aan de linkerkant van het venster.
Selecteer de lege Window sjabloon.
Noem het bestand .
Druk op Toevoegen.

Een nieuw venster weergeven

Instantieer een nieuw exemplaar van Window, of een Window subklasse als u een Window subklasse met een .xaml bestand hebt gemaakt.
```
Window newWindow = new Window();
```
Maak de vensterinhoud.

Als u een Window subklasse met een .xaml bestand hebt gemaakt, kunt u de vensterinhoud rechtstreeks toevoegen in XAML. Anders voegt u de inhoud in code toe, zoals hier wordt weergegeven.

Het is gebruikelijk om een XAML Framete maken en navigeer Frame vervolgens naar een XAML [Page](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.page waar u de inhoud van uw app hebt gedefinieerd. Voor meer informatie over frames en pagina's, zie Peer-to-peernavigatie tussen twee pagina's.
```
Frame contentFrame = new Frame();
contentFrame.Navigate(typeof(SecondaryPage));
```
U kunt echter elke XAML-inhoud weergeven in de AppWindow, niet alleen een Frame en Page. U kunt bijvoorbeeld slechts één besturingselement, zoals ColorPicker, weergeven, zoals later wordt weergegeven.
Stel uw XAML-inhoud in op de eigenschap Inhoud van de Window.
```
newWindow.Content = contentFrame;
```
Roep de Window.Activate methode aan om het nieuwe venster weer te geven.
```
newWindow.Activate();
```

Volg exemplaren van Window

Mogelijk wilt u toegang hebben tot de Window exemplaren van andere onderdelen van uw app, maar nadat u een exemplaar van een Windowapp hebt gemaakt, kunt u deze niet openen vanuit andere code, tenzij u een verwijzing naar de app bewaart. U kunt bijvoorbeeld de gebeurtenis .SizeChanged afhandelen in om UI-elementen opnieuw te rangschikken wanneer het formaat van het venster wordt gewijzigd, of u kunt een knop 'Alles sluiten' hebben waarmee alle bijgehouden instanties van worden gesloten.

In dit geval moet u de WindowId unieke identificatie gebruiken om de vensterexemplaren in een Dictionary bij te houden, waarbij de WindowId fungeert als Key en het Window exemplaar als Value. (TabView tear-out API's gebruiken ook WindowId om Windows bij te houden.)

Maak in uw App klas de Dictionary eigenschap als een statische eigenschap. Voeg vervolgens elke pagina toe aan de Dictionary pagina wanneer u deze maakt en verwijder deze wanneer de pagina wordt gesloten.

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

Met de volgende code wordt een nieuw venster gemaakt wanneer op een knop wordt geklikt MainPage. nl-NL: De TrackWindow methode voegt het nieuwe venster toe aan de ActiveWindowsDictionary, en verwerkt de Window.Closed gebeurtenis om het te verwijderen uit ActiveWindows wanneer het venster wordt gesloten.

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

Haal een getraceerd venster op uit de code van uw app

Als u toegang wilt krijgen tot een Window exemplaar vanuit uw app-code, moet u het WindowId voor het huidige venster ophalen om het van de statische Dictionary in uw App klasse te verkrijgen. U moet dit doen in de loaded gebeurtenis-handler van de pagina in plaats van in de constructor, zodat XamlRoot niet nullis.

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

Feedback

Is deze pagina nuttig?

Last updated on 2025-11-25