Kontrol untuk aplikasi Windows

Kontrol adalah elemen UI yang membentuk aplikasi Windows Anda—tombol, bidang teks, daftar, pemilih, dan lainnya. Kontrol menampilkan konten atau memungkinkan pengguna berinteraksi dengan aplikasi Anda. Pola menggabungkan beberapa kontrol ke dalam resep yang bisa digunakan berulang kali untuk skenario umum seperti formulir atau tata letak daftar-detail.

Windows menyediakan lebih dari 45 kontrol siap pakai, semuanya dibangun di Fluent Design System. Dari tombol sederhana hingga tampilan data yang kaya seperti kisi dan daftar, kontrol ini membantu Anda membangun antarmuka yang dipolihkan, dapat diakses, dan responsif secara visual di seluruh perangkat.

Telusuri artikel di bagian ini untuk panduan desain, contoh kode, dan praktik terbaik untuk setiap kontrol dan pola.

Memulai

Untuk mempelajari cara menambahkan kontrol ke aplikasi Anda dan menyambungkan penanganan aktivitas, lihat Menambahkan kontrol dan menangani peristiwa. Untuk menyesuaikan tampilan kontrol dengan gaya XAML yang dapat digunakan kembali, lihat Kontrol gaya.

Pengaturan

Tabel berikut mencantumkan kontrol aplikasi Windows yang tersedia di WinUI, dengan tautan ke dokumentasinya.

Input dasar

Gambar	Kontrol	Deskripsi
	Tombol	Elemen pengendali yang merespons input pengguna dan memicu peristiwa Klik. Termasuk tombol, tombol drop-down, tombol pisahkan, tombol alih, dan lainnya.
	kotak centang	Kontrol yang dapat dipilih atau dihapus pengguna.
	Kotak daftar pilihan	Daftar drop-down item yang dapat dipilih pengguna.
	Hyperlink	Tombol yang tampil sebagai teks hyperlink, dapat menavigasi ke URI atau menangani event Klik.
	Tombol radio	Kontrol yang memungkinkan pengguna memilih satu opsi dari sekelompok opsi.
	Kontrol peringkat	Nilai sesuatu 1 hingga 5 bintang.
	Slider	Kontrol yang memungkinkan pengguna memilih dari berbagai nilai dengan memindahkan kontrol Jempol di sepanjang trek.
	Alihkan sakelar	Sakelar yang dapat dialihkan antara 2 status.

Collections

Gambar	Kontrol	Deskripsi
	Tampilan Daftar Item	Kontrol yang menyajikan kumpulan item menggunakan berbagai tata letak.
	Tampilan daftar dan tampilan kisi	Kontrol yang menyajikan kumpulan item dalam daftar vertikal atau dalam baris dan kolom.
	Balikkan tampilan	Menyajikan kumpulan item yang dapat dilihat oleh pengguna, satu per satu.
	Pip pager	Kontrol untuk membiarkan pengguna menavigasi melalui koleksi yang dipaginasi ketika nomor halaman tidak perlu diketahui secara visual.
	Tampilan pohon	Pola daftar hierarkis dengan simpul yang dapat diperluas dan diciutkan yang berisi item bertingkat.
	Pengulang item	Kontrol primitif yang fleksibel untuk tata letak berbasis data.
	Geser	Gerakan sentuh untuk tindakan menu cepat pada item.
	Tarik-untuk-memperbarui	Menyediakan kemampuan untuk menarik koleksi item dalam daftar/kisi untuk menyegarkan konten koleksi.

Dialog dan Jendela Muncul

Gambar	Kontrol	Deskripsi
	Dialog	Kotak dialog yang dapat dikustomisasi untuk berisi konten XAML apa pun.
	Flyout	Menampilkan informasi kontekstual dan memungkinkan interaksi pengguna.
	Tips pengajaran	Flyout yang kaya konten untuk memandu pengguna dan memfasilitasi momen pembelajaran.

Formulir

Gambar	Kontrol	Deskripsi
	Formulir	Pola untuk mengumpulkan dan mengirimkan input pengguna menggunakan kombinasi kontrol input dan label.

Media, grafik, dan bentuk

Gambar	Kontrol	Deskripsi
	Ikon	Mewakili kontrol ikon yang menggunakan jenis gambar yang berbeda sebagai konten.
	Ikon animasi	Elemen yang menampilkan dan mengontrol ikon yang menganimasikan saat pengguna berinteraksi dengan kontrol.
	Gambar dan kuas gambar	Kontrol untuk menampilkan konten gambar.
	Tinta	Kontrol untuk penintaan digital, termasuk kanvas untuk tinta dan bilah alat tinta.
	Pemutaran Media	Kontrol untuk menampilkan konten video dan gambar.
	Bentuk	Gambar bentuk seperti elipsis, persegi panjang, dan poligon.

Menu dan bilah alat

Gambar	Kontrol	Deskripsi
	Menu dan menu konteks	Memperlihatkan daftar kontekstual perintah atau opsi sederhana.
	Bilah perintah	Toolbar untuk menampilkan perintah khusus aplikasi yang menangani tata letak dan mengubah ukuran kontennya.
	Menu pop-up bilah perintah	Toolbar mini menampilkan perintah proaktif, dan menu perintah opsional.
	Menu flyout dan bilah menu	Menu klasik, memungkinkan tampilan MenuItems yang berisi MenuFlyoutItems.

Navigation

Gambar	Kontrol	Deskripsi
	Bilah remah roti	Memperlihatkan jejak navigasi yang diambil ke lokasi saat ini.
	Daftar/detail	Pola yang menampilkan daftar item bersama dengan detail item yang saat ini dipilih.
	Tampilan navigasi	Tata letak vertikal umum untuk area tingkat atas aplikasi Anda melalui menu navigasi yang dapat diciutkan.
	Pivot	Menyajikan informasi dari sumber yang berbeda dalam tampilan bertab.
	Bilah pemilih	Menyajikan informasi dari sekumpulan kecil sumber yang berbeda. Pengguna dapat memilih salah satunya.
	Tampilan tab	Kontrol yang menampilkan kumpulan tab yang dapat digunakan untuk menampilkan beberapa dokumen.

Orang-orang

Gambar	Kontrol	Deskripsi
	Gambar orang	Menampilkan gambar orang/kontak.

Pickers

Gambar	Kontrol	Deskripsi
	Pemilih warna	Kontrol yang menampilkan spektrum warna yang dapat dipilih.
	Pemilih tanggal kalender	Kontrol yang memungkinkan pengguna memilih nilai tanggal menggunakan kalender.
	Tampilan kalender	Kontrol yang menyajikan kalender bagi pengguna untuk memilih tanggal.
	Pemilih tanggal	Kontrol yang memungkinkan pengguna memilih nilai tanggal.
	Pemilih waktu	Kontrol yang dapat dikonfigurasi yang memungkinkan pengguna memilih nilai waktu.

Pengguliran dan tata letak

Gambar	Kontrol	Deskripsi
	Expander	Wadah dengan header yang dapat diperluas untuk menampilkan bagian utama dengan lebih banyak konten.
	Kontrol pengguliran dan pengalihan	Kontrol kontainer yang memungkinkan pengguna menggeser dan memperbesar kontennya.
	Bilah gulir yang dianotasi	Kontrol yang memperluas fungsionalitas bilah gulir vertikal reguler untuk navigasi yang mudah melalui koleksi besar.
	Pembesaran semantik	Memungkinkan pengguna memperbesar antara dua tampilan koleksi yang berbeda, sehingga lebih mudah untuk menavigasi melalui koleksi item yang besar.
	Pisahkan tampilan	Kontainer yang memiliki 2 area konten, dengan beberapa opsi tampilan untuk panel.
	Tampilan dua panel	Kontrol dengan dua area konten yang memanfaatkan ruang yang tersedia, baik secara berdampingan maupun atas-bawah.

Status dan informasi

Gambar	Kontrol	Deskripsi
	Progress	Menampilkan kemajuan aplikasi pada tugas menggunakan bilah kemajuan atau cincin kemajuan.
	Keterangan	Menampilkan informasi untuk elemen di jendela pop-up.
	Bilah info	Pesan sebaris untuk menampilkan informasi perubahan status di seluruh aplikasi.
	Lencana Info	UI yang tidak mengganggu untuk menampilkan pemberitahuan atau membawa fokus ke area.

Teks

Gambar	Kontrol	Deskripsi
	Kotak saran otomatis	Kontrol untuk memberikan saran saat pengguna mengetik.
	Blok teks	Kontrol ringan untuk menampilkan teks dalam jumlah kecil.
	Blok teks kaya	Kontrol yang menampilkan teks yang diformat, hyperlink, gambar sebaris, dan konten kaya lainnya.
	Kotak teks	Bidang teks biasa satu baris atau multibaris.
	Kotak teks kaya	Kontrol pengeditan teks kaya yang mendukung teks yang diformat, hyperlink, dan konten kaya lainnya.
	Kotak kata sandi	Kontrol untuk memasukkan kata sandi.
	Kotak nomor	Kontrol teks yang digunakan untuk input numerik dan evaluasi persamaan aljabar.
	Label	Panduan untuk menambahkan label yang dapat diakses ke kontrol input.

Bilah judul

Gambar	Kontrol	Deskripsi
	Bilah judul	Sesuaikan bilah judul jendela aplikasi Anda.

Galeri WinUI 3

Aplikasi WinUI 3 Gallery adalah cara terbaik untuk menjelajahi kontrol ini secara langsung. Ini menyediakan demo interaktif dari sebagian besar kontrol WinUI, fitur, dan pola Desain Fluent—menjadikannya pendamping yang ideal untuk dokumentasi ini. Instal aplikasi tersebut untuk mencoba kontrol secara real time dan menautkan langsung dari halaman kontrol individual.

• Dapatkan Galeri WinUI 3 dari Microsoft Store.
• Dapatkan kode sumber dari GitHub.

Kontrol dan sumber daya tambahan

Windows Community Toolkit adalah kumpulan pembantu, ekstensi, dan kontrol UI tambahan yang melengkapi kontrol WinUI bawaan. Ini digerakkan oleh komunitas dan dikelola oleh Microsoft, mencakup skenario umum seperti tata letak, konverter, dan animasi tingkat lanjut.

Untuk akses awal ke kontrol dan fitur eksperimental, lihat Windows Community Toolkit Labs, tempat komponen baru dikembangkan dan diuji sebelum lulus ke toolkit utama.