Ukuran dan kepadatan kontrol
Gunakan kombinasi ukuran kontrol dan kepadatan untuk mengoptimalkan aplikasi Windows Anda dan memberikan pengalaman pengguna yang paling sesuai untuk fungsionalitas dan persyaratan interaksi aplikasi Anda.
Secara default, aplikasi XAML dirender dengan tata letak kepadatan rendah (atau Standard
) . Namun, dimulai dengan WinUI 2.1, opsi tata letak kepadatan tinggi (atau Compact
) , untuk UI kaya informasi dan skenario khusus serupa, juga didukung. Ini dapat ditentukan melalui sumber daya gaya dasar (lihat contoh di bawah).
Meskipun fungsionalitas dan perilaku tidak berubah dan tetap konsisten di dua opsi ukuran dan kepadatan, ukuran font isi default telah diperbarui menjadi 14px untuk semua kontrol untuk mendukung dua opsi kepadatan ini. Ukuran font ini berfungsi di seluruh wilayah dan perangkat dan memastikan aplikasi Anda tetap seimbang dan nyaman bagi pengguna.
Contoh
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
Ukuran Standar Fasih
Ukuran Standar Fasih dibuat untuk memberikan keseimbangan antara kepadatan informasi dan kenyamanan pengguna. Secara efektif, semua item di layar selaras dengan target piksel efektif (epx) 40x40, yang memungkinkan elemen UI selaras dengan kisi dan menskalakan dengan tepat berdasarkan penskalaan tingkat sistem.
Ukuran standar dirancang untuk mengakomodasi input sentuhan dan pointer.
Catatan
Untuk informasi selengkapnya tentang piksel dan penskalaan yang efektif, lihat Ukuran dan titik henti layar
Untuk informasi selengkapnya tentang penskalaan tingkat sistem, lihat Perataan, margin, padding.
Ukuran Ringkas Fasih
Ukuran ringkas memungkinkan grup kontrol yang padat dan kaya informasi dan dapat membantu hal berikut:
- Menelusuri konten dalam jumlah besar.
- Memaksimalkan konten yang terlihat di halaman.
- Menavigasi dan berinteraksi dengan kontrol dan konten
Ukuran ringkas dirancang terutama untuk mengakomodasi input pointer.
Contoh ukuran ringkas
Ukuran ringkas diimplementasikan melalui kamus sumber daya khusus yang dapat ditentukan dalam aplikasi Anda di tingkat halaman atau pada tata letak tertentu. Kamus sumber daya tersedia dalam paket WinUI Nuget.
Contoh berikut menunjukkan bagaimana Compact
gaya dapat diterapkan untuk halaman dan kontrol Kisi individual.
Tingkat halaman
<Page.Resources>
<ResourceDictionary
Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml"/>
</Page.Resources>
Tingkat kisi
<Grid>
<Grid.Resources>
<ResourceDictionary
Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml"/>
</Grid.Resources>
</Grid>
Ukuran di Windows 10
Untuk Pembaruan Windows 10 Oktober 2018 (versi 1809), ukuran default standar untuk semua kontrol Windows XAML dikurangi untuk meningkatkan kegunaan di semua skenario penggunaan.
Gambar berikut menunjukkan beberapa perubahan tata letak kontrol yang diperkenalkan dengan Pembaruan Windows 10 Oktober 2018. Secara khusus, margin antara header dan bagian atas kontrol berkurang dari 8epx menjadi 4epx, dan kisi 44epx diubah menjadi kisi 40epx.
Gambar berikutnya menunjukkan perubahan yang dilakukan pada ukuran kontrol untuk Pembaruan Windows 10 Oktober 2018. Secara khusus, penyelarasan ke kisi 40epx.
Artikel terkait
Windows developer