Zobrazení více oken pro vaši aplikaci

V aplikaci WinUI 3 můžete obsah aplikace zobrazit v sekundárních oknech a současně pracovat na stejném vlákně uživatelského rozhraní v každém okně.

• Důležitá rozhraní API: Microsoft.UI.Windowing namespace, Window třída, AppWindow třída

Otevření aplikace Galerie WinUI 3 a zobrazení více oken v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Návod

Běžným důvodem pro použití více oken je umožnit, aby se karty TabView odtrhly do nového okna. Informace a příklady specifické pro tento scénář najdete v článku o odtrhnutí záložky v zobrazení záložek.

Přehled rozhraní API

Tady jsou některá důležitá rozhraní API, která používáte k zobrazení obsahu ve více oknech.

XAML Window a AppWindow

Třídy Window a AppWindow lze použít k zobrazení části aplikace ve vedlejším okně. Důležitou funkcí oken WinUI je, že každá instance sdílí stejné vlákno zpracování uživatelského rozhraní (včetně dispečeru událostí), ze kterého byly vytvořeny, což zjednodušuje aplikace s více okny.

Podrobnější vysvětlení a Window naleznete v AppWindow.

AppWindowPresenter

Rozhraní API AppWindowPresenter umožňuje snadno přepínat okna do předdefinovaných konfigurací, jako je FullScreen nebo CompactOverlay. Další informace najdete v tématu Správa oken aplikací.

XamlRoot

Třída XamlRoot obsahuje strom elementů XAML, připojí ho k objektu hostitele okna a poskytuje informace, jako je velikost a viditelnost. Objekt XamlRoot nevytvoříte přímo. Místo toho se vytvoří při připojení elementu XAML k objektu Window. Pak můžete použít UIElement.XamlRoot vlastnost načíst XamlRoot.

WindowId

WindowId je jedinečný identifikátor okna aplikace. Vytvoří se automaticky a identifikuje jak AppWindow, tak i nejvyšší úrovni HWND pro Win32, se kterou je spojen.

Z vizuálního prvku můžete získat přístup k UIElement.XamlRoot; pak XamlRoot.ContentIslandEnvironment; Vlastnost ContentIslandEnvironment.AppWindowId obsahuje ID okna, ve které je UIElement.

Zobrazit nové okno

Můžete vytvořit nový Window v XAML nebo v kódu. Pokud vytvoříte Window v JAZYCE XAML, ve skutečnosti vytváříte podtřídu Window třídy. Podívejte se například na MainWindow.xaml, které bylo vytvořeno pomocí šablony aplikace Visual Studio.

Pojďme se podívat na postup, jak zobrazit obsah v novém okně.

Vytvoření nového okna pomocí XAML

1. V podokně Průzkumník řešení klikněte pravým tlačítkem na název projektu a vyberte Přidat > novou položku...
2. V dialogovém okně Přidat novou položku vyberte WinUI v seznamu šablon na levé straně okna.
3. Vyberte prázdnou Window šablonu.
4. Pojmenujte soubor .
5. Stiskněte Přidat.

Zobrazení nového okna

1. Vytvořte novou instanci Window, nebo podtřídu Window, pokud jste vytvořili podtřídu Window se souborem .xaml.

   Window newWindow = new Window();
   

2. Vytvořte obsah okna.

   Pokud jste vytvořili podtřídu Window se souborem .xaml , můžete obsah okna přidat přímo v XAML. V opačném případě přidáte obsah v kódu, jak je znázorněno zde.

   Je běžné vytvořit XAML Framea pak přejít Frame na XAML [Page](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.page, kde jste definovali obsah aplikace. Více informací o rámcích a stránkách viz téma Peer-to-peer navigace mezi dvěma stránkami.

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

   Můžete ale zobrazit jakýkoli obsah XAML v souboru AppWindow, nejen Frame a Page. Můžete například zobrazit jenom jeden ovládací prvek, například ColorPicker, jak je znázorněno později.

3. Nastavte obsah XAML na vlastnost Content objektu Window.

   newWindow.Content = contentFrame;
   

4. Zavolejte Window.Activate metodu pro zobrazení nového okna.

   newWindow.Activate();
   

Sledujte instance Window

Možná budete chtít mít přístup k Window instancím z jiných částí aplikace, ale po vytvoření instance instance Windowneexistuje způsob, jak k ní přistupovat z jiného kódu, pokud na ně nebudete odkazovat. Můžete například chtít zpracovat událost Window.SizeChanged pro změnu uspořádání prvků uživatelského rozhraní při změně velikosti okna nebo můžete mít tlačítko "Zavřít vše", které zavře všechny sledované instance MainPage.

V tomto případě byste měli použít WindowId jedinečný identifikátor ke sledování instancí okna v objektu Dictionary, s WindowId jako Key a instancí Window jako Value. (TabView tab tear-out API také používají WindowId ke sledování Windows.)

Ve třídě App vytvořte Dictionary jako statickou vlastnost. Potom při vytváření přidejte každou stránku do Dictionary a po zavření stránky ji odeberte.

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

Následující kód vytvoří nové okno při kliknutí na MainPagetlačítko . Metoda TrackWindow přidá nové okno do ActiveWindowsDictionary a zpracovává událost Window.Closed, aby ho odebrala z ActiveWindows při zavření okna.

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

Získejte sledované okno z kódu vaší aplikace

Pokud chcete získat přístup k Window instanci z kódu aplikace, musíte získat WindowId pro aktuální okno, abyste ho mohli načíst ze statického Dictionary objektu ve třídě App. Měli byste to provést v obslužné metodě události Loaded stránky místo v konstruktoru, aby XamlRoot nebyl 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];
        }
    }
}

Související témata

• Přehled oken
• Správa oken aplikací
• Zobrazení panelu
• Zobrazit více pohledů (UWP)