Aracılığıyla paylaş

XAML stilleri

XAML çerçevesini kullanarak uygulamalarınızın görünümünü birçok şekilde özelleştirebilirsiniz. Stil, denetim özelliklerini ayarlamanıza ve bu ayarları birden fazla denetimde tutarlı bir görünüm için yeniden kullanmanıza olanak tanır.

WinUI ve stiller

WinUI 2.2'den başlayarak, kullanıcı arabirimi bileşenlerimiz genelinde yeni görsel stil güncelleştirmeleri sunmak için WinUI'yi kullandık. Kullanıcı arabiriminizin en son stillere güncelleştirilmediğini fark ederseniz en son WinUI NuGet paketine güncelleştirdiğinizden emin olun.

WinUI 2.6'dan başlayarak, denetimlerin çoğu için yeni stiller ve gerekirse önceki denetim stillerine geri dönmenizi sağlayan yeni bir sürüm oluşturma sistemi sunuyoruz. Windows'un tasarım yönüne daha uygun olduğundan yeni stilleri kullanmanızı öneririz. Ancak, senaryonuz yeni stilleri destekleyemezse, önceki sürümler hala kullanılabilir durumdadır.

WinUI sürüm 2'yi kullanırken, ControlsResourcesVersion'nize eklediğiniz XamlControlsResources'in Application.Resources özelliğini ayarlayarak stil sürümünü değiştirebilirsiniz. ControlsResourcesVersion varsayılan olarak Version2sabit listesi değerini kullanır.

Bu değerin olarak Version1 ayarlanması, en son WinUI sürümü tarafından kullanılan yeni stiller yerine önceki stil sürümlerinin yüklenmesine neden olur XamlControlsResources . Bu özelliğin çalışma zamanında değiştirilmesi desteklenmez ve VisualStudio'nun sık erişimli yeniden yükleme işlevi çalışmaz; ancak uygulamanızı yeniden derledikten sonra denetim stillerinin değiştiğini görürsünüz.

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" 
                           ControlsResourcesVersion="Version1"/>
</Application.Resources>

Stil temelleri

Görsel özellik ayarlarını yeniden kullanılabilir kaynaklara ayıklamak için stilleri kullanın. BorderBrushBorderThickness ve Foreground özelliklerini ayarlayan stile sahip 3 düğme gösteren bir örnek aşağıda verilmiştir. Stil uygulayarak, her denetimde bu özellikleri ayrı ayrı ayarlamak zorunda kalmadan denetimlerin aynı görünmesini sağlayabilirsiniz.

Yan yana yerleştirilmiş üç stil düğmesinin ekran görüntüsü.

Bir denetim için XAML'de satır içi stil tanımlayabilir veya yeniden kullanılabilir bir kaynak olarak tanımlayabilirsiniz. Tek bir sayfanın XAML dosyasında, App.xaml dosyasında veya ayrı bir kaynak sözlüğü XAML dosyasında kaynakları tanımlayın. Bir kaynak sözlüğü XAML dosyası uygulamalar arasında paylaşılabilir ve tek bir uygulamada birden fazla kaynak sözlüğü birleştirilebilir. Kaynağın tanımlandığı yer, hangi kapsamda kullanılabileceğini belirler. Sayfa düzeyi kaynaklar yalnızca tanımlandığı sayfada kullanılabilir. Aynı anahtara sahip kaynaklar hem App.xaml'de hem de bir sayfada tanımlanmışsa, sayfadaki kaynak App.xaml'deki kaynağı geçersiz kılar. Bir kaynak ayrı bir kaynak sözlüğü dosyasında tanımlanmışsa, kapsamı kaynak sözlüğüne nerede başvurulduğuna göre belirlenir.

Stil tanımında bir TargetType özniteliğine ve bir veya daha fazla Setter öğesi koleksiyonuna ihtiyacınız vardır. TargetType özniteliği, stilin uygulanacağı FrameworkElement türünü belirten bir dizedir. TargetType değeri, Windows Çalışma Zamanı tarafından tanımlanan FrameworkElement türetilmiş bir tür veya başvuruda bulunulmuş bir derlemede kullanılabilen özel bir tür belirtmelidir. Bir denetime stil uygulamayı denerseniz ve denetimin türü uygulamaya çalıştığınız stilin TargetType özniteliğiyle eşleşmiyorsa, bir özel durum oluşur.

Her Setter öğesi bir Özellik ve bir Değer gerektirir. Bu özellik ayarları ayarın hangi denetim özelliği için geçerli olduğunu ve bu özellik için ayarlanacağı değeri gösterir. Setter.Value değerini öznitelik veya özellik öğesi söz dizimi ile ayarlayabilirsiniz. Buradaki XAML, daha önce gösterilen düğmelere uygulanan stili gösterir. Bu XAML'de, ilk iki Ayarlayıcı öğesi öznitelik söz dizimini kullanır, ancak BorderBrush özelliği için son Ayarlayıcı özellik öğesi söz dizimini kullanır. Örnekte x:Key öznitelik özniteliği kullanılmadığından stil düğmelere örtük olarak uygulanır. Stillerin örtük veya açık bir şekilde uygulanması sonraki bölümde açıklanmıştır.

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<StackPanel Orientation="Horizontal">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</StackPanel>

Örtük veya açık stil uygula

Bir stili kaynak olarak tanımlarsanız, bunu denetimlerinize uygulamanın iki yolu vardır:

Bir stil x:Key özniteliğini içeriyorsa, bunu yalnızca denetimin Style özelliğini anahtarlı stile ayarlayarak bir denetime uygulayabilirsiniz. Buna karşılık, x:Key özniteliği olmayan bir stil, hedef türündeki her denetime otomatik olarak uygulanır ve bunun dışında açık bir stil ayarı yoktur.

İşte örtük ve açık stilleri gösteren iki düğme.

gizli ve açık stillenmiş düğmeler.

Bu örnekte, ilk stilin bir x:Key özniteliği vardır ve hedef türü Button'dır. İlk düğmenin Style özelliği bu tuşa ayarlanır, bu nedenle bu stil açıkça uygulanır. İkinci stil, hedef türü Button olduğundan ve stilin x:Key özniteliği olmadığından ikinci düğmeye örtük olarak uygulanır.

<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="Purple"/>
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25"/>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Green"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Foreground" Value="Green"/>
    </Style>
</Page.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="Button" Style="{StaticResource PurpleStyle}"/>
    <Button Content="Button"/>
</Grid>

Tabanlı stiller kullanma

Stillerin bakımını kolaylaştırmak ve stili yeniden kullanımı iyileştirmek için, diğer stillerden devralan stiller oluşturabilirsiniz. Devralınan stiller oluşturmak için BasedOn özelliğini kullanırsınız. Diğer stillerden devralan stiller, aynı denetim türünü veya temel stil tarafından hedeflenen türden türetilen bir denetimi hedeflemelidir. Örneğin, bir temel stil ContentControl'i hedeflerse, bu stili temel alan stiller ContentControl'i veya Button ve ScrollViewer gibi ContentControl'den türetilen türleri hedefleyebilir. Bir değer temel stilde ayarlanmamışsa, temel stilden devralınır. Temel stilden bir değeri değiştirmek için, temel stil bu değeri geçersiz kılar. Sonraki örnekte, aynı temel stilden devralan stillerin bulunduğu bir Düğme ve CheckBox gösterilmektedir.

stile dayalı stiller kullanarak stilli düğmeler.

Temel stil ContentControl'i hedefler ve Height ve Width özelliklerini ayarlar. Bu stili temel alan stiller, ContentControl'den türetilen CheckBox ve Button'ı hedefler. Temel stiller BorderBrush ve Foreground özellikleri için farklı renkler ayarlar. (Normalde CheckBox'ın çevresine kenarlık koymazsınız. Burada stilin etkilerini göstermek için yaparız.)

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="130" />
        <Setter Property="Height" Value="30" />
    </Style>

    <Style x:Key="ButtonStyle" TargetType="Button"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <Style x:Key="CheckBoxStyle" TargetType="CheckBox"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Blue" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<StackPanel>
    <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="0,10"/>
    <CheckBox Content="CheckBox" Style="{StaticResource CheckBoxStyle}"/>
</StackPanel>

Stiller ile kolayca çalışmanızı sağlayan araçları kullanın

Denetimlerinize stil uygulamanın hızlı bir yolu, Microsoft Visual Studio XAML tasarım yüzeyindeki bir denetime sağ tıklayıp Stili Düzenle veya Şablonu Düzenle'yi seçmektir (sağ tıkladığınız denetime bağlı olarak). Ardından , Kaynağı Uygula'yı seçerek var olan bir stili uygulayabilir veya Boş Oluştur'u seçerek yeni bir stil tanımlayabilirsiniz. Boş bir stil oluşturursanız, bunu sayfada, App.xaml dosyasında veya ayrı bir kaynak sözlüğünde tanımlama seçeneği sağlanır.

Hafif stil

Sistem fırçalarını geçersiz kılmak genellikle Uygulama veya Sayfa düzeyinde yapılır ve her iki durumda da renk geçersiz kılma işlemi bu fırçaya başvuran tüm denetimleri etkiler ve XAML'de birçok denetim aynı sistem fırçasına başvurabilir.

İki düğmenin ekran görüntüsü: biri varsayılan durumunda ve diğeri hafif stil uygulanmış. 

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                 <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                 <SolidColorBrush x:Key="ButtonForeground" Color="MediumSlateBlue"/>
                 <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

PointerOver (fare düğmenin üzerine gelir), PointerPressed (düğme çağrıldı) veya Devre Dışı (düğme etkileşimli değildir) gibi durumlar için. Bu eklemeler, özgün Hafif stil adlarına eklenir: ButtonBackgroundPointerOver, ButtonForegroundPressed, ButtonBorderBrushDisabled vb. Bu fırçaları da değiştirerek, denetimlerinizin uygulamanızın tema rengiyle tutarlı bir şekilde renklendirildiğinden emin olabilirsiniz.

Bu fırça geçersiz kılmalarını App.Resources düzeyinde yerleştirmek, tek bir sayfa yerine uygulamanın tamamında yer alan tüm düğmeleri değiştirir.

Denetim başına stil oluşturma

Diğer durumlarda, tek bir sayfadaki tek bir denetimi, denetimin diğer sürümlerini değiştirmeden yalnızca belirli bir şekilde görünecek şekilde değiştirmek istenir:

Biri diğerinin üzerine yığılmış üç stil düğmesinin ekran görüntüsü. 

<CheckBox Content="Normal CheckBox" Margin="5"/>
<CheckBox Content="Special CheckBox" Margin="5">
    <CheckBox.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="CheckBoxForegroundUnchecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxForegroundChecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundChecked"
                        Color="White"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked"  
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked"
                        Color="Purple"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </CheckBox.Resources>
</CheckBox>
<CheckBox Content="Normal CheckBox" Margin="5"/>

Bu, denetimin bulunduğu sayfada yalnızca bir "Özel Onay Kutusu"nu etkiler.

Özel denetimler

Yerleşik denetimlerimizle görsel ve/veya işlevsel olarak uyumlu olabilecek kendi özel denetimlerinizi oluştururken, özel içeriğinizi tanımlamak için örtük stil ve Basit stil kaynaklarını kullanmayı göz önünde bulundurun. Kaynakları doğrudan kullanabilir veya kaynak için yeni bir diğer ad oluşturabilirsiniz.

Denetim kaynaklarını doğrudan kullanma

Örneğin, Düğme gibi görünen bir denetim yazıyorsanız, denetiminizin düğme kaynaklarına doğrudan başvurmasını sağlayabilirsiniz, örneğin:

<Style TargetType="local:MyCustomControl">
  <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
  <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
</Style>

Denetim kaynaklarını yeni adlara diğer adla ekleme

Alternatif olarak, kendi kaynaklarınızı yapmayı tercih ediyorsanız, bu özel adları varsayılan Basit stil kaynaklarımıza takma ad olarak eklemelisiniz.

Örneğin, özel denetiminizin stilinde özel kaynak tanımları olabilir:

<Style TargetType="local:MyCustomControl">
  <Setter Property="Background" Value="{ThemeResource MyCustomControlBackground}" />
  <Setter Property="BorderBrush" Value="{ThemeResource MyCustomControlBorderBrush}"/>
</Style>

Kaynak Sözlüğünüzde veya ana tanımınızda, Basit stil kaynaklarını özel kaynaklarınıza bağlarsınız:

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>        
    <ResourceDictionary x:Key="Light">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Üç farklı tema değişikliğini düzgün bir şekilde işlemek için üç kez tekrarlanan bir ThemeDictionary kullanmanız şarttır (Default, Light, HighContrast).

Dikkat

Basit stil kaynağını yeni bir diğer adla atar ve basit stil kaynağını yeniden tanımlarsanız, kaynak arama doğru sırada değilse özelleştirmeniz uygulanmayabilir. Örneğin, ButtonBackground bulunmadan önce kontrol edilen bir yerde MyCustomControlBackground'ı geçersiz kılarsanız, bu geçersiz kılma gözden kaçabilir.

Kontrollerin yeniden biçimlendirilmesinden kaçının

WinUI 2.2 veya üzeri hem WinUI hem de sistem denetimleri için yeni stiller ve şablonlar içerir.

En son görsel stillerimizle güncel kalmanın en iyi yolu, en son WinUI 2 paketini kullanmak ve özel stil ve şablonlardan (yeniden şablon oluşturma olarak da bilinir) kaçınmaktır. Stiller, uygulamanızda kontroller arasında tutarlı bir şekilde bir dizi değeri uygulamak için hâlâ kullanışlı bir yoldur. Bunu yaparken en son stilleri temel aldığınızdan emin olun.

WinUI stilleri (Windows.UI.Xaml.Controls ad alanı) kullanan sistem denetimleri için, BasedOn="{StaticResource Default<ControlName>Style}" değerini ayarlayın, burada <ControlName> denetimin adıdır. Örneğin:

<Style TargetType="TextBox" BasedOn="{StaticResource DefaultTextBoxStyle}">
    <Setter Property="Foreground" Value="Blue"/>
</Style>

WinUI 2 denetimleri (Microsoft.UI.Xaml.Controls ad alanı) için varsayılan stil meta verilerde tanımlandığı için BasedOn'i çıkartın.

Türetilmiş denetimler

Mevcut bir XAML denetiminden özel bir denetim türetirseniz, winUI 2 stilleri varsayılan olarak alınmaz. WinUI 2 stillerini uygulamak için:

  • Yeni bir Stil oluşturun ve TargetType'ı özel denetiminize ayarlayın.
  • Stil'i, türetdiğiniz denetimin varsayılan stiline göre temel alın.

Bunun yaygın senaryolarından biri , ContentDialog'dan yeni bir denetim türetmektir. Bu örnek, özel iletişim kutunuza DefaultContentDialogStyle uygulayan yeni bir stilin nasıl oluşturulacağını göstermektedir.

<ContentDialog
    x:Class="ExampleApp.SignInContentDialog"
    ... >

    <ContentDialog.Resources>
        <Style TargetType="local:SignInContentDialog" BasedOn="{StaticResource DefaultContentDialogStyle}"/>
        ...
    </ContentDialog.Resources> 
    <!-- CONTENT -->
</ContentDialog>

Şablon özelliği

Bir stil ayarlayıcısı bir DenetiminTemplate özelliği için kullanılabilir ve aslında bu, tipik bir XAML stilinin ve bir uygulamanın XAML kaynaklarının çoğunu oluşturur. Bu, Denetim şablonları konusunda daha ayrıntılı olarak ele alınmıştır.

  • Last updated on