Mostrar várias janelas para seu aplicativo

Em seu aplicativo WinUI 3, você pode mostrar o conteúdo do aplicativo em janelas secundárias enquanto ainda trabalha no mesmo thread de UI em todas as janelas.

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou obtenha o código-fonte no GitHub

Visão geral da API

Aqui estão algumas das APIs importantes que você usa para mostrar conteúdo em várias janelas.

XAML Window e AppWindow

O Window e AppWindow as classes podem ser usados para exibir uma parte de um aplicativo em uma janela secundária. Um recurso importante de janelas WinUI é que cada instância compartilha o mesmo thread de processamento da interface do usuário (incluindo o dispatcher de eventos) do qual foram criadas, o que simplifica os aplicativos de várias janelas.

Consulte Visão geral de janelas do WinUI e do SDK de Aplicativos do Windows para obter uma explicação mais detalhada de Window e AppWindow.

AppWindowPresenter

A API AppWindowPresenter permite alternar facilmente janelas para configurações predefinidas como FullScreen ou CompactOverlay. Para obter mais informações, consulte Gerenciar janelas do aplicativo.

XamlRoot

A classe XamlRoot contém uma árvore de elementos XAML, conecta-a ao objeto host da janela e fornece informações como tamanho e visibilidade. Você não cria um objeto XamlRoot diretamente. Em vez disso, um é criado quando você anexa um elemento XAML a um Window. Em seguida, você pode usar a propriedade UIElement.XamlRoot para recuperar o XamlRoot.

WindowId

WindowId é um identificador exclusivo para uma janela do aplicativo. Ele é criado automaticamente e identifica tanto o AppWindow quanto o HWND Win32 de nível superior ao qual está associado.

Em um elemento visual, você pode acessar UIElement.XamlRoot; em seguida , XamlRoot.ContentIslandEnvironment; em seguida, a propriedade ContentIslandEnvironment.AppWindowId contém a ID da janela em que o UIElement está.

Mostrar uma nova janela

Você pode criar um novo Window em XAML ou em código. Se você criar um Window em XAML, você está realmente criando uma sub-classe da Window classe. Por exemplo, veja MainWindow.xaml que foi criado pelo modelo de aplicativo do Visual Studio.

Vamos dar uma olhada nas etapas para mostrar o conteúdo em uma nova janela.

Para criar uma nova janela com XAML

1. No painel Gerenciador de Soluções , clique com o botão direito do mouse no nome do projeto e selecione Adicionar > Novo Item...
2. Na caixa de diálogo Adicionar Novo Item , selecione WinUI na lista de modelos no lado esquerdo da janela.
3. Selecione o modelo em branco Window .
4. Dê um nome ao arquivo.
5. Pressione Adicionar.

Mostrar uma nova janela

1. Instancie uma nova instância de Window ou de uma subclasse Window se você criou uma subclasse Window com um arquivo .xaml.

   Window newWindow = new Window();
   

2. Crie o conteúdo da janela.

   Se você criou uma Window subclasse com um .xaml arquivo, poderá adicionar o conteúdo da janela diretamente no XAML. Caso contrário, você adicionará o conteúdo no código, conforme mostrado aqui.

   É comum criar um XAML Framee, em seguida, navegar Frame até um XAML [Page](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.page em que você definiu o conteúdo do aplicativo. Para obter mais informações sobre quadros e páginas, confira Navegação ponto a ponto entre duas páginas.

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

   No entanto, você pode mostrar qualquer conteúdo XAML no AppWindow, não apenas um Frame e Page. Por exemplo, você pode mostrar apenas um único controle, como ColorPicker, conforme mostrado posteriormente.

3. Defina o conteúdo XAML como a propriedade Content do Window.

   newWindow.Content = contentFrame;
   

4. Chame o método Window.Activate para mostrar a nova janela.

   newWindow.Activate();
   

Acompanhar instâncias de Window

Talvez seja necessário ter acesso às Window instâncias de outras partes do aplicativo, mas, após criar uma instância de Window, não é possível acessá-la a partir de outro código, a menos que se mantenha uma referência a ela. Por exemplo, talvez você queira lidar com o evento Window.SizeChanged em MainPage para reorganizar elementos da interface do usuário quando a janela for redimensionada, ou você pode ter um botão "fechar tudo" que fecha todas as instâncias rastreadas de Window.

Nesse caso, você deve usar o WindowId identificador exclusivo para monitorar as instâncias de janela em um Dictionary, com a WindowId como Key, e a instância de Window como Value. (As APIs de tear-out da guia TabView também são usadas WindowId para rastrear o Windows.)

Em sua App classe, crie a Dictionary como uma propriedade estática. Em seguida, adicione cada página a Dictionary ao criá-la e remova-a quando a página for fechada.

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

O código a seguir cria uma nova janela quando um botão é clicado em MainPage. O método adiciona a nova janela ao , e manipula o evento .Closed para removê-la de quando a janela for fechada.

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

Obter uma janela monitorada do código do aplicativo

Para acessar uma instância de Window do código do aplicativo, você precisa obter o WindowId da janela atual para recuperá-la do Dictionary estático na classe App. Você deve fazer isso no manipulador de eventos Loaded da página em vez de no construtor para que XamlRoot não nullseja .

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

Tópicos relacionados

• Visão geral de janelas
• Gerenciar janelas do aplicativo
• Exibição em abas
• Mostrar várias exibições (UWP)