Gambaran umum XAML

XAML (Extensible Application Markup Language) adalah bahasa markup deklaratif yang digunakan untuk menentukan UI di aplikasi WinUI. Anda menjelaskan struktur dan properti UI Anda dalam .xaml file, dan menangani logika dan peristiwa dalam file code-behind yang dipasangkan.

Nota

C# dan C++/WinRT didukung untuk aplikasi WinUI 3 / SDK Aplikasi Windows dan UWP. C++/CX hanya berlaku untuk UWP, dan tidak didukung untuk WinUI 3.

Apa itu XAML?

XAML adalah bahasa berbasis XML untuk membuat objek dan mengatur propertinya. Anda mendeklarasikan elemen UI—tombol, kotak teks, tata letak—dalam markup, dan menggunakan file code-behind untuk merespons peristiwa dan memanipulasi elemen tersebut saat runtime.

Karena XAML adalah format pertukaran berbasis teks, perancang dan pengembang dapat bekerja secara independen: desainer menulis struktur visual di XAML, pengembang menghubungkan logika di belakang kode, dan keduanya dapat melakukan iterasi tanpa memblokir satu sama lain.

Sintaks XAML Dasar

Semua XAML yang valid juga XML yang valid, tetapi XAML menambahkan konsepnya sendiri di atasnya. Misalnya, sintaks elemen properti memungkinkan Anda mengatur properti sebagai elemen XML berlapis daripada string atribut — XML yang valid, tetapi dengan arti tambahan dalam XAML.

Untuk detail sintaks lengkap, lihat panduan sintaks XAML.

XAML dan Visual Studio

editor XAML Visual Studio menyediakan IntelliSense, penyelesaian otomatis, dan permukaan desain visual. Kesalahan ditampilkan langsung pada baris kode sebagai garis bergelombang sebelum Anda mengompilasi. Anda tidak perlu menghafal setiap aturan sintaksis — biarkan IDE memandu Anda.

Namespace XAML

Setiap file XAML mendeklarasikan namespace dalam elemen akarnya. Halaman WinUI umum dimulai dengan dua:

<Page
    x:Class="Application1.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
  • Namespace default (xmlns=): Berisi semua kontrol WinUI bawaan, teks, grafik, pengikatan data, dan jenis gaya. Sebagian besar XAML Anda menggunakan namespace ini tanpa awalan.
  • Namespace bahasa XAML (xmlns:x=): Dipetakan ke awalan x: , menyediakan fitur bahasa inti.

Namespace x: tersebut

Attribute Kegunaan
x:Key Kunci unik untuk sumber daya dalam ResourceDictionary
x:Class Menautkan file XAML ke kelas code-behind-nya
x:Nama Menetapkan nama runtime sehingga code-behind dapat mereferensikan elemen
x:Uid Menandai elemen untuk substitusi sumber daya yang dilokalkan
Tipe intrinsik XAML Mengekspresikan nilai sederhana (seperti x:Boolean) sebagai elemen objek

Memetakan jenis kustom

Untuk menggunakan tipe Anda sendiri atau tipe pustaka pihak ketiga di XAML, deklarasikan prefiks namespace yang dipetakan ke namespace dalam kode:

xmlns:myTypes="using:myCompany.myTypes"

Kemudian referensikan jenis tersebut dengan awalan:

<myTypes:CustomButton/>

Untuk detail selengkapnya, termasuk pertimbangan C++/CX, lihat namespace XAML dan pemetaan namespace.

Namespace desainer dan kompatibilitas

Anda akan sering melihat awalan d: (desainer) dan mc: (kompatibilitas markup) dalam XAML yang dihasilkan oleh alat. Ini mendukung perkakas design-time dan dapat diabaikan dengan aman saat runtime. Untuk detailnya, lihat Namespace XAML lainnya.

Ekstensi markup

Ekstensi markup memungkinkan Anda mengatur properti ke sesuatu yang tidak dapat dinyatakan sebagai string biasa — seperti referensi ke sumber daya bersama atau pengikatan data. Mereka menggunakan sintaks kurung kurawal:

<Button Style="{StaticResource SearchButtonStyle}"/>

Tanpa {StaticResource}, Anda memerlukan sintaks elemen properti verbose untuk menetapkan Style. Ekstensi markup menjaga XAML tetap ringkas.

Windows Runtime XAML mendukung ekstensi markup ini:

Extension Kegunaan
{x:Bind} Pengikatan data waktu kompilasi (performa terbaik)
{Binding} Pengikatan data saat proses berjalan
{StaticResource} Merujuk ke entri ResourceDictionary berdasarkan kunci
{ThemeResource} Seperti {StaticResource}, tetapi pembaruan saat tema aplikasi berubah
{TemplateBinding} Mengikat ke properti induk templat kontrol
{RelativeSource} Ikatan relatif terhadap induk yang di-template
{CustomResource} Pencarian sumber daya kustom tingkat lanjut
{x:Null} Secara eksplisit mengatur nilai nullable ke null

Ekstensi markup dapat ditumpuk; yang paling dalam dievaluasi terlebih dahulu.

Events

Lampirkan penanganan aktivitas di XAML dengan menentukan peristiwa sebagai atribut dan nama metode handler sebagai nilainya:

<Button Click="showUpdatesButton_Click">Show updates</Button>

Pengkompilasi mengharapkan metode yang cocok di code-behind dengan tanda tangan delegasi yang benar:

private void showUpdatesButton_Click(object sender, RoutedEventArgs e)
{
    // your code
}

void showUpdatesButton_Click(Windows::Foundation::IInspectable const&, Microsoft::UI::Xaml::RoutedEventArgs const&);

Nota

Di C++/CX, setiap halaman XAML memiliki dua file code-behind: header (.xaml.h) dan implementasi (.xaml.cpp).

Untuk informasi lebih lanjut, lihat Gambaran umum kejadian dan kejadian yang dirutekan.

Kamus sumber daya

Sebuah ResourceDictionary menyimpan objek yang dapat digunakan kembali — kuas, gaya, templat — yang diidentifikasi oleh x:Key. Sumber daya dapat berada di bagian sumber daya halaman atau dalam file terpisah .xaml . Untuk penjelasan lengkapnya, lihat Referensi sumber daya ResourceDictionary dan XAML.

XAML dan XML

XAML adalah superset XML dengan beberapa hal yang perlu diketahui:

  • Peka terhadap huruf besar/kecil: Nama elemen dan atribut harus sama persis.
  • xml:lang: Valid dalam XAML, tetapi mengacu pada perilaku waktu proses pada tingkat kerangka kerja, bukan perilaku penguraian.
  • Pengodean: Hanya UTF-8 dan UTF-16 yang didukung.

Lingkup Nama di XAML

Nama yang ditetapkan dengan x:Name harus unik dalam namescope. Namescope sangat penting dalam templat kontrol, di mana cakupan nama dibatasi ke templat tersebut, bukan ke halaman. Untuk detailnya, lihat Namescope XAML.

Tips kinerja

  • Tentukan kuas yang sering digunakan sebagai SolidColorBrush sumber daya alih-alih mengulangi literal warna.
  • Tempatkan sumber daya yang digunakan bersama di beberapa halaman di Application.Resources; simpan sumber daya khusus untuk halaman tertentu di halaman tersebut.
  • Hapus sumber daya yang tidak digunakan (kunci tanpa {StaticResource} referensi) sebelum pengiriman.
  • Hindari mengganti templat kontrol — default sudah dioptimalkan untuk performa beban.
  • Gunakan Border dan kontainer tata letak alih-alih menggambar piksel yang sama beberapa kali (overdraw).
  • Gunakan templat item bawaan untuk ListView dan GridView; logika Presenter keduanya dioptimalkan untuk daftar berukuran besar.

Untuk panduan selengkapnya, lihat Mengoptimalkan markup XAML Anda.

Debug XAML

Anda tidak dapat mengatur titik henti dalam .xaml file, tetapi Visual Studio menyediakan bantuan lain:

  • Mode desain: Garis bergelombang dan penanda kesalahan muncul langsung di baris saat Anda mengetik.
  • Runtime: Mengurai kegagalan melempar XamlParseException (atau pengecualian terstruktur serupa di C++/CX) dengan konteks nomor baris file XAML.

Untuk penanganan kesalahan runtime, lihat Penanganan pengecualian untuk aplikasi WinUI di C#. Untuk memulai sesi debug, lihat Memulai sesi debug.

  • Last updated on