Radius sudut

Dimulai dengan WinUI versi 2.2, gaya default untuk banyak kontrol telah diperbarui untuk menggunakan sudut bulat. Gaya baru ini dimaksudkan untuk memunculkan kehangatan dan kepercayaan, dan membuat antarmuka pengguna lebih mudah diproses secara visual.

Berikut adalah dua kontrol Tombol, yang pertama tanpa sudut bulat dan yang kedua menggunakan gaya sudut bulat.

WinUI memberi Anda gaya yang diperbarui untuk WinUI dan kontrol platform. Lihat Opsi kustomisasi, untuk detail tentang cara menyesuaikan sudut bulat.

Penting

Beberapa kontrol tersedia baik di platform (Windows.UI.Xaml.Controls) dan di WinUI (Microsoft.UI.Xaml.Controls); misalnya, TreeView atau ColorPicker. Saat menggunakan WinUI di aplikasi, Anda harus menggunakan versi kontrol WinUI. Pembulatan sudut mungkin diterapkan secara tidak konsisten dalam versi platform saat digunakan dengan WinUI.

API Penting: properti Control.CornerRadius

Desain kontrol default

Ada tiga area kontrol tempat gaya sudut bulat digunakan: elemen persegi panjang, elemen flyout, dan elemen batang.

Sudut elemen UI persegi panjang

• Elemen UI ini mencakup kontrol dasar seperti tombol yang dilihat pengguna di layar setiap saat.
• Nilai radius default yang kami gunakan untuk elemen UI ini adalah 4px.

Kontrol

• AutoSuggestBox
• Tombol
  • Tombol ContentDialog
• CalendarDatePicker
• Kotak Centang
  • Kotak centang TreeView, GridView, dan ListView multi-pilih
• Pemilih warna
• CommandBar
• ComboBox
• DatePicker
• DropDownButton
• Expander
• FlipView
• GridView dan ListView
  • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView list
• Bilah Info
• Kontrol penintaan
• Pemutaran media
• MenuBar
• NumberBox
• PasswordBox
• RichEditBox
• SplitButton
• TextBox
• TimePicker
• ToggleButton
• ToggleSplitButton

Sudut elemen UI flyout dan overlay

• Ini bisa menjadi elemen UI sementara yang muncul di layar sementara, seperti MenuFlyout, atau elemen yang melapisi UI lain, seperti tab TabView.
• Nilai radius default yang kami gunakan untuk elemen UI ini adalah 8px.

Kontrol

• CommandBarFlyout
• ContentDialog
• Flyout
• MenuFlyout
• Tab TabView
• Tip Pengajaran
• TipsAlat (menggunakan radius 4px karena ukuran kecil)
• Bagian flyout (saat terbuka)
  • AutoSuggestBox
  • CalendarDatePicker
  • ComboBox
  • DatePicker
  • DropDownButton
  • Kontrol penintaan
  • MenuBar
  • NumberBox
  • SplitButton
  • TimePicker
  • ToggleSplitButton

Elemen batang

• Elemen UI ini dibentuk seperti bilah atau garis; misalnya, ProgressBar.
• Nilai radius default yang kami gunakan di sini adalah 4px.

Kontrol

• Indikator pilihan NavigationView
• ProgressBar
• ScrollBar
• Slider
  • Penggoser warna ColorPicker
  • Slider bilah pencarian MediaTransportControls

Opsi penyesuaian

Nilai radii sudut default yang kami berikan tidak diatur dalam batu dan ada beberapa cara Anda dapat dengan mudah memodifikasi jumlah pembulatan di sudut. Ini dapat dilakukan melalui dua sumber daya global, atau melalui properti CornerRadius langsung pada kontrol, tergantung pada tingkat granularitas kustomisasi yang Anda inginkan.

Kapan tidak dibulatkan

Ada instans di mana sudut kontrol tidak boleh dibulatkan, dan kami tidak membulatkan ini secara default.

• Ketika beberapa elemen UI yang ditempatkan di dalam kontainer saling menyentuh, seperti dua bagian SplitButton. Seharusnya tidak ada ruang ketika mereka menghubungi.

• Saat elemen UI flyout terhubung ke UI yang memanggil flyout di satu sisi.

Perubahan CornerRadius di seluruh halaman atau aplikasi

Ada 2 sumber daya aplikasi yang mengontrol radii sudut semua kontrol:

• ControlCornerRadius - defaultnya adalah 4px.
• OverlayCornerRadius - defaultnya adalah 8px.

Jika Anda mengambil alih nilai sumber daya ini pada cakupan apa pun, itu akan memengaruhi semua kontrol dalam cakupan tersebut.

Ini berarti jika Anda ingin mengubah kebulatan semua kontrol di mana kebulatan dapat diterapkan, Anda dapat menentukan kedua sumber daya di tingkat aplikasi dengan nilai CornerRadius baru seperti ini:

<Application
    xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
    xmlns:x=”http://schemas.micosoft.com/winfx/2006/xaml”
    xmlns:control=”using:Microsoft.UI.Xaml.Controls”>
    <Application.Resources>
      <controls:XamlControlsResources>
        <controls:XamlControlsResources.MergedDictionaries>
          <ResourceDictionary>
            <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
          </ResourceDictionary>
        </controls:XamlControlsResources.MergedDictionaries>
      </controls:XamlControlsResources>
    </Application.Resources>
</Application>

Atau, jika Anda ingin mengubah kebulatan semua kontrol dalam cakupan tertentu, seperti pada tingkat halaman atau kontainer, Anda dapat mengikuti pola serupa:

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

Catatan

Sumber OverlayCornerRadius daya harus didefinisikan pada tingkat aplikasi agar berlaku.

Ini karena popup dan flyout tidak berada di pohon visual halaman, mereka ditambahkan ke Akar Popup. Sistem resolusi sumber daya tidak melintasi pohon visual Akar Popup dengan benar ke pohon visual Halaman.

Perubahan CornerRadius per kontrol

Anda dapat mengubah properti CornerRadius pada kontrol secara langsung jika Anda ingin mengubah kebulatan hanya sejumlah kontrol tertentu.

Default	Properti dimodifikasi
<CheckBox Content="Checkbox"/>	<CheckBox Content="Checkbox" CornerRadius="5"/>

Tidak semua sudut kontrol akan merespons properti mereka CornerRadius yang dimodifikasi. Untuk memastikan bahwa kontrol yang sudutnya ingin Anda bulatkan memang akan merespons properti mereka CornerRadius seperti yang Anda harapkan, pertama-tama periksa apakah ControlCornerRadius sumber daya global atau OverlayCornerRadius memengaruhi kontrol yang dimaksud. Jika tidak, periksa apakah kontrol yang ingin Anda bulatkan memiliki sudut sama sekali. Banyak kontrol kami tidak merender tepi aktual dan karenanya tidak dapat menggunakan properti dengan CornerRadius benar.

Gaya kustom basing pada WinUI

Anda dapat mendasarkan gaya kustom Anda pada gaya sudut bulat WinUI dengan menentukan atribut yang benar BasedOn dalam gaya Anda. Misalnya untuk membuat gaya tombol kustom berdasarkan gaya tombol WinUI, lakukan hal berikut:

<Style x:Key="MyCustomButtonStyle" BasedOn="{StaticResource DefaultButtonStyle}">
   ...
</Style>

Secara umum, gaya kontrol WinUI mengikuti konvensi penamaan yang konsisten: "DefaultXYZStyle" di mana "XYZ" adalah nama kontrol. Untuk referensi lengkap, Anda dapat menelusuri file XAML di repositori WinUI.