Menampilkan beberapa tampilan untuk aplikasi

Wireframe menampilkan aplikasi dengan beberapa jendela

Bantu pengguna Anda menjadi lebih produktif dengan memungkinkan mereka melihat bagian independen aplikasi Anda di jendela terpisah. Saat Anda membuat beberapa jendela untuk aplikasi, taskbar menampilkan setiap jendela secara terpisah. Pengguna dapat memindahkan, mengubah ukuran, menampilkan, dan menyembunyikan jendela aplikasi secara independen dan dapat beralih antar jendela aplikasi seolah-olah mereka adalah aplikasi terpisah.

API penting: Namespace Layanan Windows.UI.ViewManagement, namespace Windows.UI.WindowManagement

Kapan aplikasi harus menggunakan beberapa tampilan?

Ada berbagai skenario yang dapat memperoleh manfaat dari beberapa tampilan. Berikut beberapa contohnya:

  • Aplikasi email yang memungkinkan pengguna melihat daftar pesan yang diterima saat membuat email baru
  • Aplikasi buku alamat yang memungkinkan pengguna membandingkan info kontak untuk beberapa orang secara berdampingan
  • Aplikasi pemutar musik yang memungkinkan pengguna melihat apa yang diputar saat menelusuri daftar musik lain yang tersedia
  • Aplikasi pencatatan yang memungkinkan pengguna menyalin informasi dari satu halaman catatan ke halaman lainnya
  • Aplikasi bacaan yang memungkinkan pengguna membuka beberapa artikel untuk dibaca nanti, setelah kesempatan untuk menggunakan semua judul tingkat tinggi

Meskipun setiap tata letak aplikasi unik, sebaiknya sertakan tombol "jendela baru" di lokasi yang dapat diprediksi, seperti sudut kanan atas konten yang dapat dibuka di jendela baru. Pertimbangkan juga untuk menyertakan opsi menu konteks untuk "Buka di jendela baru".

Untuk membuat instans terpisah aplikasi Anda (bukan jendela terpisah untuk instans yang sama), lihat Membuat aplikasi Windows multi-instans.

Host windowing

Ada berbagai cara agar konten Windows dapat dihosting di dalam aplikasi.

  • CoreWindow/ApplicationView

    Tampilan aplikasi adalah pemasangan utas 1:1 dan jendela yang digunakan aplikasi untuk menampilkan konten. Tampilan pertama yang dibuat saat aplikasi Anda dimulai disebut tampilan utama. Setiap CoreWindow/ApplicationView beroperasi di utasnya sendiri. Harus bekerja pada utas UI yang berbeda dapat mempersulit aplikasi multi-jendela.

    Tampilan utama untuk aplikasi Anda selalu dihosting di ApplicationView. Konten di jendela sekunder dapat dihosting di ApplicationView atau di AppWindow.

    Untuk mempelajari cara menggunakan ApplicationView untuk menampilkan jendela sekunder di aplikasi Anda, lihat Menggunakan ApplicationView.

  • AppWindow

    AppWindow menyederhanakan pembuatan aplikasi Windows multi-jendela karena beroperasi pada utas UI yang sama dengan yang dibuat.

    Kelas AppWindow dan API lainnya di namespace WindowManagement tersedia mulai dari Windows 10, versi 1903 (SDK 18362). Jika aplikasi Anda menargetkan versi Windows 10 yang lebih lama, Anda harus menggunakan ApplicationView untuk membuat jendela sekunder.

    Untuk mempelajari cara menggunakan AppWindow untuk menampilkan jendela sekunder di aplikasi Anda, lihat Menggunakan AppWindow.

    Catatan

    AppWindow saat ini dalam pratinjau. Ini berarti Anda dapat mengirimkan aplikasi yang menggunakan AppWindow ke Store, tetapi beberapa platform dan komponen kerangka kerja diketahui tidak berfungsi dengan AppWindow (lihat Batasan).

  • DesktopWindowXamlSource (Kepulauan XAML)

    Konten UWP XAML dalam aplikasi Win32 (menggunakan HWND), juga dikenal sebagai Kepulauan XAML, dihosting di DesktopWindowXamlSource.

    Untuk informasi selengkapnya tentang Kepulauan XAML, lihat Menggunakan API hosting XAML UWP di aplikasi desktop

Membuat kode portabel di seluruh host windowing

Ketika konten XAML ditampilkan di CoreWindow, selalu ada ApplicationView dan Jendela XAML terkait. Anda dapat menggunakan API pada kelas ini untuk mendapatkan informasi seperti batas jendela. Untuk mengambil instans kelas ini, Anda menggunakan metode CoreWindow.GetForCurrentThread statis, metode ApplicationView.GetForCurrentView , atau properti Window.Current . Selain itu, ada banyak kelas yang menggunakan GetForCurrentView pola untuk mengambil instans kelas, seperti DisplayInformation.GetForCurrentView.

API ini berfungsi karena hanya ada satu pohon konten XAML untuk CoreWindow/ApplicationView, sehingga XAML mengetahui konteks yang dihosting adalah CoreWindow/ApplicationView.

Saat konten XAML berjalan di dalam AppWindow atau DesktopWindowXamlSource, Anda dapat memiliki beberapa pohon konten XAML yang berjalan pada utas yang sama secara bersamaan. Dalam hal ini, API ini tidak memberikan informasi yang tepat, karena konten tidak lagi berjalan di dalam CoreWindow/ApplicationView saat ini (dan Jendela XAML).

Untuk memastikan bahwa kode Anda berfungsi dengan benar di semua host windowing, Anda harus mengganti API yang mengandalkan CoreWindow, ApplicationView, dan Window dengan API baru yang mendapatkan konteksnya dari kelas XamlRoot . Kelas XamlRoot mewakili pohon konten XAML dan informasi tentang konteks dihosting, apakah itu CoreWindow, AppWindow, atau DesktopWindowXamlSource. Lapisan abstraksi ini memungkinkan Anda menulis kode yang sama terlepas dari host windowing mana yang dijalankan XAML.

Tabel ini memperlihatkan kode yang tidak berfungsi dengan benar di seluruh host windowing, dan kode portabel baru yang dapat Anda ganti, serta beberapa API yang tidak perlu Anda ubah.

Jika Anda menggunakan... Ganti dengan...
CoreWindow.GetForCurrentThread(). Batas uiElement. XamlRoot. Ukuran
CoreWindow.GetForCurrentThread(). Ukuran Berubah uiElement. XamlRoot. Berubah
CoreWindow. Terlihat uiElement. XamlRoot. IsHostVisible
CoreWindow. VisibilityChanged uiElement. XamlRoot. Berubah
CoreWindow.GetForCurrentThread(). GetKeyState Berubah. Ini didukung di AppWindow dan DesktopWindowXamlSource.
CoreWindow.GetForCurrentThread(). GetAsyncKeyState Berubah. Ini didukung di AppWindow dan DesktopWindowXamlSource.
Jendela. Saat ini Mengembalikan objek Jendela XAML utama yang terikat erat ke CoreWindow saat ini. Lihat Catatan setelah tabel ini.
Window.Current. Batas uiElement. XamlRoot. Ukuran
Window.Current. Konten Akar UIElement = uiElement. XamlRoot. Konten
Window.Current. Komposit Berubah. Ini didukung di AppWindow dan DesktopWindowXamlSource.
VisualTreeHelper. FindElementsInHostCoordinates
Meskipun param UIElement bersifat opsional, metode ini menimbulkan pengecualian jika UIElement tidak disediakan saat dihosting di Pulau.
Tentukan uiElement. XamlRoot sebagai UIElement alih-alih membiarkannya kosong.
VisualTreeHelper. GetOpenPopups
Di aplikasi Kepulauan XAML, ini akan menghasilkan kesalahan. Di aplikasi AppWindow, ini akan mengembalikan popup terbuka di jendela utama.
VisualTreeHelper. GetOpenPopupsForXamlRoot(uiElement. XamlRoot)
FocusManager. GetFocusedElement FocusManager. GetFocusedElement(uiElement. XamlRoot)
contentDialog.ShowAsync() contentDialog. XamlRoot = uiElement. XamlRoot;
contentDialog.ShowAsync();
menuFlyout.ShowAt(null, new Point(10, 10)); menuFlyout. XamlRoot = uiElement. XamlRoot;
menuFlyout.ShowAt(null, new Point(10, 10));

Catatan

Untuk konten XAML di DesktopWindowXamlSource, memang ada CoreWindow/Window pada utas, tetapi selalu tidak terlihat dan memiliki ukuran 1x1. Ini masih dapat diakses oleh aplikasi tetapi tidak akan mengembalikan batas atau visibilitas yang bermakna.

Untuk konten XAML dalam AppWindow, akan selalu ada tepat satu CoreWindow pada utas yang sama. Jika Anda memanggil GetForCurrentView API atau GetForCurrentThread , API tersebut akan mengembalikan objek yang mencerminkan status CoreWindow pada utas, bukan AppWindows apa pun yang mungkin berjalan pada utas tersebut.

Lakukan dan jangan lakukan

  • Berikan titik masuk yang jelas ke tampilan sekunder dengan menggunakan glyph "buka jendela baru".
  • Lakukan komunikasikan tujuan tampilan sekunder kepada pengguna.
  • Pastikan aplikasi Anda berfungsi penuh dalam satu tampilan dan pengguna akan membuka tampilan sekunder hanya untuk kenyamanan.
  • Jangan mengandalkan tampilan sekunder untuk memberikan pemberitahuan atau visual sementara lainnya.