Menampilkan beberapa jendela untuk aplikasi Anda

Berlaku untuk: ✅ WinUI 3, ✅ Windows App SDK

Di aplikasi WinUI 3, Anda dapat menampilkan konten aplikasi di jendela sekunder sambil tetap mengerjakan utas UI yang sama di setiap jendela.

API penting: Namespace, kelas, WindowMicrosoft.UI.Windowing

Buka aplikasi Galeri WinUI 3 dan lihat beberapa jendela beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Petunjuk / Saran

Alasan umum untuk menggunakan beberapa jendela adalah untuk memungkinkan tab TabView dicabik-cabik ke jendela baru. Untuk informasi dan contoh khusus untuk skenario ini, lihat Tab tear-out di artikel Tampilan tab.

Ringkasan API

Berikut adalah beberapa API penting yang Anda gunakan untuk menampilkan konten di beberapa jendela.

XAML Window dan AppWindow

Kelas Window dan AppWindow dapat digunakan untuk menampilkan sebagian aplikasi di jendela sekunder. Fitur penting jendela WinUI adalah setiap instans berbagi thread pemrosesan UI yang sama (termasuk dispatcher peristiwa) dari mana instans tersebut dibuat, yang menyederhanakan aplikasi multi-jendela.

Lihat Ringkasan windowing untuk WinUI dan Windows App SDK untuk penjelasan yang lebih rinci tentang Window dan AppWindow.

AppWindowPresenter

API AppWindowPresenter memungkinkan Anda dengan mudah mengalihkan jendela ke konfigurasi yang telah ditentukan sebelumnya seperti FullScreen atau CompactOverlay. Untuk informasi selengkapnya, lihat Mengelola jendela aplikasi.

XamlRoot

Kelas XamlRoot memegang pohon elemen XAML, menghubungkannya ke objek host jendela, dan memberikan info seperti ukuran dan visibilitas. Anda tidak membuat objek XamlRoot secara langsung. Sebagai gantinya, satu dibuat saat Anda melampirkan elemen XAML ke Window. Anda kemudian dapat menggunakan properti UIElement.XamlRoot untuk mengambil XamlRoot.

WindowId

WindowId adalah pengidentifikasi unik untuk jendela aplikasi. Ini dibuat secara otomatis, dan mengidentifikasi keduanya, yaitu AppWindow serta Win32 HWND tingkat atas yang terkait dengannya.

Dari elemen visual, Anda dapat mengakses UIElement.XamlRoot; kemudian XamlRoot.ContentIslandEnvironment; kemudian properti ContentIslandEnvironment.AppWindowId berisi ID jendela tempat UIElement berada.

Perlihatkan jendela baru

Anda dapat membuat yang baru Window di XAML atau dalam kode. Jika Anda membuat Window di XAML, Anda sebenarnya membuat kelas Window sub-kelas. Misalnya, lihat MainWindow.xaml yang dibuat oleh templat aplikasi Visual Studio.

Mari kita lihat langkah-langkah untuk menampilkan konten di jendela baru.

Untuk membuat jendela baru dengan XAML

Di panel Penjelajah Solusi , klik kanan pada nama proyek dan pilih Tambahkan > Item Baru...
Dalam dialog Tambahkan Item Baru , pilih WinUI di daftar templat di sisi kiri jendela.
Pilih templat Kosong Window .
Beri nama file .
Tekan Tambahkan.

Untuk menampilkan jendela yang baru

Buat instans Window baru, atau subkelas Window jika Anda membuat subkelas Window dengan file .xaml.
```
Window newWindow = new Window();
```
Buat konten jendela.

Jika Anda membuat Window subkelas dengan .xaml file, Anda dapat menambahkan konten jendela langsung di XAML. Jika tidak, Anda menambahkan konten dalam kode seperti yang ditunjukkan di sini.

Adalah umum untuk membuat XAML Frame, lalu menavigasi Frame ke XAML [Page](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.page tempat Anda menentukan konten aplikasi Anda. Untuk informasi selengkapnya tentang bingkai dan halaman, lihat navigasi antar-rekan antara dua halaman .
```
Frame contentFrame = new Frame();
contentFrame.Navigate(typeof(SecondaryPage));
```
Namun, Anda dapat menampilkan konten XAML apa pun di AppWindow, bukan hanya Frame dan Page. Misalnya, Anda hanya dapat menampilkan satu kontrol, seperti ColorPicker, seperti yang ditunjukkan nanti.
Atur konten XAML Anda ke properti Konten dari Window.
```
newWindow.Content = contentFrame;
```
WindowPanggil . Aktifkan metode untuk menampilkan jendela baru.
```
newWindow.Activate();
```

Melacak instance dari Window

Anda mungkin ingin memiliki akses ke Window instans dari bagian lain aplikasi Anda, tetapi setelah membuat instans Window, tidak ada cara untuk mengaksesnya dari kode lain kecuali Anda menyimpan referensi ke instans tersebut. Misalnya, Anda mungkin ingin menangani Window. Peristiwa SizeChanged di MainPage untuk mengatur ulang elemen UI ketika jendela diubah ukurannya, atau Anda dapat memiliki tombol 'tutup semua' yang menutup semua instans terlacak dari Window.

Dalam kasus ini, Anda harus menggunakan WindowId pengidentifikasi unik untuk melacak instans jendela di dalam Dictionary, dengan WindowId sebagai Key dan instans Window sebagai Value. (TAB TabView merobek-out API juga digunakan WindowId untuk melacak Windows.)

Di kelas Anda App , buat Dictionary sebagai properti statis. Kemudian, tambahkan setiap halaman ke Dictionary saat Anda membuatnya, dan hapus saat halaman ditutup.

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

Kode berikut membuat jendela baru saat tombol diklik di MainPage. Metode TrackWindow menambahkan jendela baru ke ActiveWindowsDictionary, dan menangani Window. Menutup peristiwa untuk menghapusnya dari ActiveWindows saat jendela ditutup.

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

Dapatkan jendela yang dilacak dari kode aplikasi Anda

Untuk mengakses instans Window dari kode aplikasi Anda, pertama, Anda perlu mendapatkan WindowId untuk jendela saat ini, kemudian mengambilnya dari Dictionary statis di App di kelas Anda. Anda harus melakukan ini di handler aktivitas Yang dimuat halaman daripada di konstruktor sehingga XamlRoot bukan 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];
        }
    }
}

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-11-25