Köşe yarıçapı

WinUI'nin 2.2 sürümünden başlayarak, birçok denetim için varsayılan stil yuvarlatılmış köşeleri kullanacak şekilde güncelleştirildi. Bu yeni stiller, sıcaklık ve güveni çağrıştırmak ve kullanıcıların kullanıcı arabirimini görsel olarak işlemesini kolaylaştırmak için tasarlanmıştır.

Aşağıda, ilki yuvarlatılmış köşeleri olmayan, ikincisi yuvarlatılmış köşe stili kullanan iki Düğme denetimi bulunur.

WinUI, hem WinUI hem de platform denetimleri için güncelleştirilmiş stiller sağlar. Yuvarlatılmış köşeleri özelleştirme hakkında ayrıntılı bilgi için bkz. Özelleştirme seçenekleri.

Önemli

Bazı denetimler hem platformda (Windows.UI.Xaml.Controls) hem de WinUI'de (Microsoft.UI.Xaml.Controls) kullanılabilir; örneğin, TreeView veya ColorPicker. Uygulamanızda WinUI kullanırken denetimin WinUI sürümünü kullanmanız gerekir. WinUI ile kullanıldığında köşe yuvarlama, platform sürümünde tutarsız bir şekilde uygulanabilir.

Önemli API'ler: Control.CornerRadius özelliği

Varsayılan denetim tasarımları

Denetimlerin yuvarlatılmış köşe stillerinin kullanıldığı üç alan vardır: dikdörtgen öğeler, açılır öğeler ve çubuk öğeleri.

Dikdörtgen kullanıcı arabirimi öğelerinin köşeleri

• Bu kullanıcı arabirimi öğeleri, kullanıcıların her zaman ekranda gördüğü düğmeler gibi temel denetimleri içerir.
• Bu kullanıcı arabirimi öğeleri için kullandığımız varsayılan yarıçap değeri 4px'tir.

vurgulanmış düğme

Kontroller

• Otomatik Öneri Kutusu
• Düğme
  • ContentDialog düğmeleri
• Takvim Tarih Seçici
• Onay Kutusu
  • TreeView, GridView ve ListView çoklu seçim onay kutuları
• Renk seçici
• Komut Çubuğu
• ComboBox
• DatePicker (Tarih Seçici)
• Açılır Düğme
• Genişletici
• Çevirme Görünümü
• GridView ve ListView
  • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView Liste
• Bilgi Çubuğu
• Mürekkep denetimleri
• Medya oynatma
• Menü Çubuğu
• Sayı Kutusu
• Şifre Kutusu
• Rich Düzenleme Kutusu
• SplitButton
• Metin Kutusu
• Zaman Seçici
• Geçiş Düğmesi
• Aç/Kapat Bölünmüş Düğme

Açılır ve katmanlı kullanıcı arabirimi öğelerinin köşeleri

• Bunlar, MenuFlyout gibi geçici olarak ekranda görünen geçici kullanıcı arabirimi öğeleri veya TabView sekmeleri gibi diğer kullanıcı arabirimini katmanlayan öğeler olabilir.
• Bu kullanıcı arabirimi öğeleri için kullandığımız varsayılan yarıçap değeri 8 pikseldir.

Kontroller

• CommandBarFlyout (Komut ÇubuğuAçılır Penceresi)
• İçerik İletişim Kutusu
• Uçan Menü
• MenuFlyout (Menü Açılır Penceresi)
• TabView sekmeleri
• Öğretim İpucu
• Araç İpucu (küçük boyutu nedeniyle 4 piksel yarıçapını kullanır)
• Açılır öğe bölümü (açıkken)
  • Otomatik Öneri Kutusu
  • Takvim Tarih Seçici
  • ComboBox
  • DatePicker (Tarih Seçici)
  • Açılır Düğme
  • Mürekkep denetimi
  • Menü Çubuğu
  • Sayı Kutusu
  • SplitButton
  • Zaman Seçici
  • Aç/Kapat Bölünmüş Düğme

Çubuk öğeleri

• Bu kullanıcı arabirimi öğeleri çubuk veya çizgi şeklindedir; örneğin, ProgressBar.
• Burada kullandığımız varsayılan yarıçap değerleri 4px'tir.

Kontroller

• NavigationView seçim göstergesi
• İlerleme Çubuğu
• Kaydırma Çubuğu
• Kaydırıcı
  • ColorPicker renk kaydırıcısı
  • MediaTransportControls arama çubuğu kaydırıcısı

Özelleştirme seçenekleri

Sağladığımız varsayılan köşe yarıçapı değerleri kesin değildir ve köşelerdeki yuvarlama miktarını kolayca değiştirebileceğiniz birkaç yol vardır. Bu işlem, istediğiniz özelleştirme ayrıntı düzeyine bağlı olarak iki genel kaynak aracılığıyla veya doğrudan denetimin CornerRadius özelliği aracılığıyla yapılabilir.

Yuvarlamanın uygulanmadığı durumlar

Kontrolün köşesinin yuvarlanmaması gereken durumlar vardır ve bu durumlarda varsayılan olarak yuvarlama yapmayız.

• Bir kapsayıcının içinde yer alan birden çok kullanıcı arabirimi öğesi, SplitButton'ın iki parçası gibi birbirine dokunduğunda. Temas ettiklerinde arada boşluk olmamalıdır.

• Bir açılır kullanıcı arabirimi öğesi, bir tarafta açılır öğeyi çağıran bir kullanıcı arabirimine bağlandığında.

Sayfa veya uygulama genelinde CornerRadius değişiklikleri

Tüm denetimlerin köşe yarıçapını denetleyan 2 uygulama kaynağı vardır:

• ControlCornerRadius - varsayılan değer 4px'tir.
• OverlayCornerRadius - varsayılan değer 8 pikseldir.

Bu kaynakların değerini herhangi bir kapsamda geçersiz kılarsanız, bu kapsamdaki tüm denetimler buna göre etkilenir.

Başka bir deyişle, yuvarlamanın uygulanabileceği tüm denetimlerin yuvarlaklığını değiştirmek isterseniz, aşağıdaki gibi yeni CornerRadius değerleriyle her iki kaynağı da uygulama düzeyinde tanımlayabilirsiniz:

<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>

Alternatif olarak, sayfa veya kapsayıcı düzeyinde olduğu gibi belirli bir kapsamdaki tüm denetimlerin yuvarlaklığını değiştirmek istiyorsanız, benzer bir desen izleyebilirsiniz:

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

Uyarı

Etkili OverlayCornerRadius olması için kaynağın uygulama düzeyinde tanımlanması gerekir.

Bunun nedeni, açılır menüler ve açılır pencerelerin sayfanın görsel ağacında olmaması ve Popup Kök'e eklenmesidir. Kaynak çözümleme sistemi Açılan Kök görsel ağacını Sayfanın görsel ağacına düzgün bir şekilde geçirmiyor.

Denetim bazında Köşe Radyusu değişiklikleri

Yalnızca belirli sayıda denetimin yuvarlaklığını değiştirmek istiyorsanız, doğrudan denetimlerde CornerRadius özelliğini değiştirebilirsiniz.

Varsayılan	Özellik değiştirildi
<CheckBox Content="Checkbox"/>	<CheckBox Content="Checkbox" CornerRadius="5"/>

Tüm denetimlerin köşeleri, değiştirilen CornerRadius özelliğine yanıt vermez. Köşelerini yuvarlamayı istediğiniz denetimin gerçekten CornerRadius özelliğine beklediğiniz gibi yanıt verdiğinden emin olmak için, önce ControlCornerRadius veya OverlayCornerRadius genel kaynaklarının söz konusu denetim üzerinde etkili olup olmadığını kontrol edin. Yuvarlamazlarsa yuvarlama yapmak istediğiniz denetimin köşeleri olup olmadığını denetleyin. Kontrollerimizin çoğu gerçek kenarları çizmez, bu yüzden bu CornerRadius özelliğini düzgün şekilde kullanamaz.

WinUI'de özel stilleri temel alma

Stilinizde doğru BasedOn özniteliği belirterek özel stillerinizi WinUI yuvarlatılmış köşe stillerine dayandırabilirsiniz. Örneğin, WinUI düğme stilini temel alan bir özel düğme stili oluşturmak için aşağıdakileri yapın:

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

Genel olarak, WinUI denetim stilleri tutarlı bir adlandırma kuralına uyar: "DefaultXYZStyle" burada "XYZ" denetimin adıdır. Tam başvuru için WinUI deposundaki XAML dosyalarına göz atabilirsiniz.