Alat desain runtime XAML untuk WinUI 3

Visual Studio menyertakan serangkaian alat runtime yang memungkinkan Anda merancang, melakukan iterasi, dan memeriksa WinUI 3 XAML saat aplikasi Anda berjalan. Jika digunakan bersama, keduanya memberi Anda siklus edit-muat ulang-inspeksi yang cepat dan menampilkan UI Anda yang sebenarnya — gaya yang sebenarnya, templat data yang sebenarnya, animasi yang sebenarnya — bukan sekadar perkiraan statis.

Catatan

Visual Studio XAML Designer (tab Desain seret dan lepas) saat ini tidak mendukung proyek WinUI 3. Jika Anda telah membuka .xaml file dan hanya melihat editor XML, penginstalan Anda tidak rusak — perancang tidak tersedia untuk WinUI 3. Permintaan fitur dilacak pada Developer Community: Tambahkan dukungan XAML Designer untuk aplikasi desktop WinUI 3. Untuk latar belakang tentang upaya rekayasa, lihat diskusi WindowsAppSDK #4710.

Alat runtime yang dijelaskan dalam artikel ini sangat berharga apakah perancang tersedia atau tidak. Artikel ini menjelaskan alur kerja.

Apa yang akan Anda gunakan

Alat	Apa fungsinya	Cara membukanya
XAML Hot Reload	Mendorong perubahan XAML ke aplikasi anda yang sedang berjalan tanpa memulai ulang	Otomatis — edit file `.xaml` apa pun saat debugging
Hierarki Visual Langsung	Menampilkan pohon elemen runtime lengkap dan memungkinkan Anda memilih elemen di aplikasi	Debug>Windows>Pohon Visual Langsung
Penjelajah Properti Langsung	Menampilkan dan memungkinkan Anda mengedit setiap properti pada elemen yang dipilih saat runtime	Debug>Windows>Live Property Explorer
Pratinjau Langsung XAML	Merender aplikasi yang sedang berjalan di dalam Visual Studio sehingga Anda dapat memeriksa tanpa beralih jendela	Debug>Windows>Pratinjau Langsung XAML

Tip

Dock Live Visual Tree dan Live Property Explorer berdampingan. Bersama-sama mereka memberi Anda tampilan inspeksi terperinci yang menunjukkan nilai runtime aktual.

Prerequisites

Visual Studio 2022 versi 17.0 atau yang lebih baru (XAML Hot Reload dan Live Visual Tree disertakan).
Proyek WinUI 3 menggunakan SDK Aplikasi Windows. Lihat Membuat dan menjalankan proyek WinUI 3 untuk membuat proyek tersebut.
Proyek Anda harus menargetkan .NET 6 atau yang lebih baru (C#) atau menggunakan C++/WinRT.

Langkah 1: Mulai aplikasi Anda di bawah debugger

Tekan F5 (atau Debug>Mulai Debugging). XAML Hot Reload akan aktif secara otomatis saat debugger terpasang.

Toolbar Hot Reload XAML muncul di overlay dalam aplikasi. Jika Anda tidak melihatnya, verifikasi bahwa pengaturan diaktifkan:

Buka Alat>Opsi>Penelusuran Kesalahan>XAML Hot Reload.
Pastikan bahwa Aktifkan Hot Reload XAML dicentang.

Important

XAML Hot Reload memerlukan debugger. Menjalankan tanpa penelusuran kesalahan (Ctrl+F5) menonaktifkan Hot Reload, Live Visual Tree, dan Live Property Explorer.

Langkah 2: Edit XAML dan lihat perubahan secara instan

Dengan aplikasi Anda berjalan, beralihlah ke file apa pun .xaml di editor dan buat perubahan — misalnya, ubah Background warna atau tambahkan baru Button. Aplikasi yang sedang berjalan diperbarui dalam satu atau dua detik, tanpa memulai ulang.

Apa yang Hot Reload bisa dan tidak bisa lakukan

Hot Reload menangani pengeditan yang paling umum:

Menambahkan, menghapus, atau menyusun ulang elemen
Mengubah nilai properti (warna, margin, teks, ukuran)
Menambahkan atau memodifikasi gaya dan kamus sumber daya
Mengubah konten templat data

Beberapa perubahan memerlukan mulai ulang:

Menambahkan atau mengubah kelas baru, penanganan peristiwa code-behind, atau x:Class
Memodifikasi App.xaml kamus gabungan (terkadang)
Mengubah ekspresi x:Bind yang merujuk ke properti baru

Saat Hot Reload tidak dapat menerapkan perubahan, toolbar akan menampilkan pemberitahuan. Cukup hidupkan ulang aplikasi untuk mengambil perubahan tersebut.

Untuk informasi selengkapnya, lihat Hot Reload XAML.

Langkah 3: Periksa pohon visual dan properti

Buka jendela Live Visual Tree (Debug>Windows>Live Visual Tree). Jendela ini menampilkan setiap elemen dalam hierarki UI aplikasi yang sedang berjalan, yang disusun berdasarkan hubungan induk-anak.

Pilih elemen secara visual

Di toolbar Pohon Visual Langsung , aktifkan Pilih Elemen di Aplikasi yang Sedang Berjalan (tombol crosshair).
Klik elemen apa pun di aplikasi yang sedang berjalan — pohon menavigasi ke elemen tersebut dan Penjelajah Properti Langsung memperlihatkan propertinya.

Ini adalah runtime yang setara dengan mengklik elemen pada permukaan desain, kecuali mencerminkan persis apa yang dirender aplikasi Anda, termasuk elemen yang dibuat secara dinamis dalam kode.

Edit properti saat dijalankan

Di Penjelajah Properti Langsung, Anda dapat mengubah nilai properti secara real time. Contohnya:

Ubah Margin untuk menyesuaikan spasi dan segera melihat hasilnya.
Atur Visibility ke Collapsed untuk menguji apa yang terjadi saat elemen disembunyikan.
Sesuaikan Width atau Height untuk menguji tata letak responsif.

Pengeditan runtime ini tidak disimpan kembali ke file XAML Anda — pengeditan tersebut untuk eksperimen. Setelah Anda menemukan nilai yang Anda suka, ketik nilai tersebut ke dalam file Anda .xaml (di mana Hot Reload mengambilnya dan membuatnya permanen).

Langkah 4: Gunakan Pratinjau Langsung XAML

Pratinjau Langsung XAML merender aplikasi yang sedang berjalan di dalam tab Visual Studio, sehingga Anda dapat melihat aplikasi dan sumber XAML secara berdampingan tanpa beralih jendela.

Untuk membukanya: Debug>Windows>XAML Live Preview.

Ini sangat berguna pada pengaturan monitor tunggal di mana Alt-Tabbing antara aplikasi dan Visual Studio tidak nyaman.

Untuk informasi selengkapnya, lihat Pratinjau Langsung XAML.

Disarankan: Buat halaman playground UI

Buat halaman taman bermain khusus di proyek Anda — halaman yang satu-satunya tujuannya adalah untuk memungkinkan Anda bereksperimen dengan kontrol, gaya, dan tata letak. Ini menyediakan area catatan yang selalu siap untuk iterasi visual, dan sangat cocok dipadukan dengan alat runtime di atas.

Menyiapkan taman bermain

Klik kanan proyek Anda di Penjelajah Solusi dan pilih Tambah>Item Baru>Halaman Kosong (WinUI 3). Beri nama UIPlayground.xaml.

Di UIPlayground.xaml, tambahkan ScrollViewer dengan bagian untuk setiap kontrol atau pola yang ingin Anda coba:

<Page
    x:Class="MyApp.UIPlayground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer Padding="24">
        <StackPanel Spacing="24">

            <!-- Section: Buttons -->
            <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Standard"/>
                <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                <ToggleButton Content="Toggle"/>
                <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
            </StackPanel>

            <!-- Section: Text input -->
            <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
            <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>

            <!-- Add more sections as needed -->

        </StackPanel>
    </ScrollViewer>
</Page>

Jadikan taman bermain mudah dijangkau. Selama pengembangan, tetapkan sebagai halaman startup di App.xaml.cs:

// In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));

Atau, jika aplikasi Anda menggunakan NavigationView, tambahkan item menu yang hanya muncul di build debug. Misalnya, di kode jendela utama Anda di belakang:

// In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif

di mana NavView adalah x:Name dari kontrol NavigationView Anda.

Cara menggunakan taman bermain

Tekan F5 untuk memulai aplikasi dan menavigasi ke halaman playground.
Buka .xaml file berdampingan dengan aplikasi yang sedang berjalan (atau gunakan XAML Live Preview).
Menambahkan atau memodifikasi kontrol di editor XAML — Hot Reload mendorong perubahan secara instan.
Gunakan Live Visual Tree untuk mengklik kontrol yang dirender dan memeriksa nilai tata letak aktualnya di Penjelajah Properti Langsung.
Ketika Anda senang dengan tampilan kontrol, salin XAML ke halaman nyata Anda.

Pola ini memberi Anda siklus "type-reload-inspect" - dan karena menjalankan kode nyata, Anda melihat templat data nyata, gaya nyata, dan animasi nyata.

Membandingkan pendekatan waktu desain dan waktu proses

Berikut adalah peta tugas desain UI umum ke alat runtime:

Tugas	Alat runtime
Menambahkan kontrol ke halaman	Ketik elemen XAML — IntelliSense menyelesaikan tag dan properti yang diperlukan
Tampilkan pratinjau kontrol	Melihatnya langsung di aplikasi yang sedang berjalan melalui Hot Reload
Pilih elemen yang akan diperiksa	Gunakan Live Visual Tree>Select Element (crosshair)
Menampilkan atau mengedit properti	Menggunakan Penjelajah Properti Langsung
Menyesuaikan ukuran atau posisi	Edit `Width`, `Height`, `Margin` di XAML atau di Penjelajah Properti Langsung

Tips untuk alur kerja yang efisien

Gunakan aplikasi Galeri WinUI 3. Instal dari Microsoft Store atau buat dari GitHub. Menampilkan semua kontrol WinUI 3 dengan contoh interaktif dan XAML yang siap disalin. Anggap saja sebagai katalog visual yang dapat Anda telusuri sebelum menulis XAML.
Biarkan halaman playground Anda tetap terbuka. Perlakukan seperti panduan gaya hidup untuk aplikasi Anda.
Gunakan d:DesignHeight dan d:DesignWidth. Bahkan tanpa desainer, atribut ini membantu IntelliSense dan menjaga ukuran halaman Anda tetap konsisten saat dibuka di editor.
Gabungkan dengan jendela Kegagalan Pengikatan XAML. Buka dari Debug>Windows>XAML Binding Failures untuk menangkap kesalahan pengikatan yang tidak akan pernah ditampilkan perancang kepada Anda.
Gunakan toolkit komunitas. Windows Community Toolkit menyediakan kontrol dan alat bantu yang mengurangi jumlah tata letak yang perlu Anda kodekan secara manual.

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-09-19