Visa flera fönster för din app

I WinUI 3-appen kan du visa appinnehållet i sekundära fönster medan du fortfarande arbetar med samma gränssnittstråd i varje fönster.

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

API-översikt

Här är några av de viktiga API:er som du använder för att visa innehåll i flera fönster.

XAML Window och AppWindow

Klasserna Window och AppWindow kan användas för att visa en del av en app i ett sekundärt fönster. En viktig funktion i WinUI-fönster är att varje instans delar samma användargränssnittsbearbetningstråd (inklusive händelseutskickaren) som de skapades från, vilket förenklar appar med flera fönster.

Se Översikt över fönster för WinUI och Windows App SDK för en mer detaljerad förklaring av Window och AppWindow.

AppWindowPresenter

Med Api:et AppWindowPresenter kan du enkelt växla windows till fördefinierade konfigurationer som FullScreen eller CompactOverlay. Mer information finns i Hantera appfönster.

XamlRoot

Klassen XamlRoot innehåller ett XAML-elementträd, ansluter det till fönstrets värdobjekt och innehåller information som storlek och synlighet. Du skapar inte ett XamlRoot-objekt direkt. I stället skapas en när du kopplar ett XAML-element till en Window. Du kan sedan använda egenskapen UIElement.XamlRoot för att hämta XamlRoot.

WindowId

WindowId är en unik identifierare för ett appfönster. Den skapas automatiskt och identifierar både AppWindow och det översta Win32 HWND det är associerat med.

Från ett visuellt element kan du komma åt UIElement.XamlRoot. sedan XamlRoot.ContentIslandEnvironment; sedan innehåller egenskapen ContentIslandEnvironment.AppWindowId det ID för fönstret som UIElement finns i.

Visa ett nytt fönster

Du kan skapa en ny Window i XAML eller i kod. Om du skapar en Window i XAML skapar du faktiskt en underklass av Window klassen. Se till exempel MainWindow.xaml som skapats av Visual Studio-appmallen.

Nu ska vi ta en titt på stegen för att visa innehåll i ett nytt fönster.

Skapa ett nytt fönster med XAML

1. I fönstret Solution Explorer högerklickar du på projektnamnet och väljer Lägg till > nytt objekt...
2. I dialogrutan Lägg till nytt objekt väljer du WinUI i malllistan till vänster i fönstret.
3. Välj mallen Tom Window .
4. Ge filen namnet .
5. Tryck på Lägg till.

Så här visar du ett nytt fönster

1. Instansiera en ny instans av Window, eller en Window underklass om du har skapat en Window underklass med en .xaml fil.

   Window newWindow = new Window();
   

2. Skapa fönstrets innehåll.

   Om du har skapat en Window underklass med en .xaml fil kan du lägga till fönsterinnehållet direkt i XAML. Annars lägger du till innehållet i koden som visas här.

   Det är vanligt att skapa en XAML Frameoch sedan navigera Frame till en XAML [Page](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.page där du har definierat appinnehållet. Mer information om ramar och sidor finns i Peer-to-peer-navigering mellan två sidor.

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

   Du kan dock visa valfritt XAML-innehåll i AppWindow, inte bara en Frame och Page. Du kan till exempel bara visa en enda kontroll, till exempel ColorPicker, som du ser senare.

3. Ange XAML-innehållet till egenskapen Content för Window.

   newWindow.Content = contentFrame;
   

4. WindowAnropa . Aktivera metoden för att visa det nya fönstret.

   newWindow.Activate();
   

Spåra instanser av Window

Du kanske vill ha åtkomst till Window instanserna från andra delar av appen, men när du har skapat en instans av en Windowkan du inte komma åt den från annan kod om du inte har en referens till den. Du kanske till exempel vill hantera Window. SizeChanged-händelse i MainPage för att ordna om gränssnittselement när fönstret har ändrat storlek, eller så kan du ha en "stäng alla"-knapp som stänger alla spårade instanser av Window.

I det här fallet bör du använda den unika identifieraren WindowId för att spåra fönsterinstanserna i en Dictionary, med WindowId som Key och Window-instansen som Value. (TabView-flikens uttrivna API:er används WindowId också för att spåra Windows.)

Skapa App som en statisk egenskap i Dictionary-klassen. Lägg sedan till varje sida i Dictionary när du skapar den och ta bort den när sidan stängs.

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

Följande kod skapar ett nytt fönster när en knapp klickas i MainPage. Metoden TrackWindow lägger till det nya fönstret i ActiveWindowsDictionaryoch hanterar Window. Stängd händelse för att ta bort den från ActiveWindows när fönstret är stängt.

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

Hämta ett spårat fönster från din appkod

För att få åtkomst till en Window instans från din appkod måste du hämta WindowId för det aktuella fönstret för att hämta den från statiska Dictionary i din App klass. Du bör göra detta i sidans inlästa händelsehanterare i stället för i konstruktorn så att XamlRoot inte nullär .

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

Relaterade ämnen

• Översikt över fönster
• Hantera appfönster
• Flikvy
• Visa flera vyer (UWP)