XAML kullanan stil uygulamaları

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) uygulamaları genellikle aynı görünüme sahip birden çok denetim içerir. Örneğin, bir uygulamanın aynı yazı tipi seçeneklerine ve düzen seçeneklerine sahip birden çok Label örneği olabilir:

<Label Text="These labels"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       FontSize="18" />
<Label Text="are not"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       FontSize="18" />
<Label Text="using styles"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       FontSize="18" />

Bu örnekte, her Label nesne tarafından görüntülenen metnin görünümünü denetlemek için aynı özellik değerlerine Labelsahiptir. Ancak, her denetimin görünümünü ayarlamak tekrarlanabilir ve hataya eğilimli olabilir. Bunun yerine, görünümü tanımlayan bir stil oluşturulabilir ve ardından gerekli denetimlere uygulanabilir.

Stillere giriş

Bir uygulama, bir özellik değerleri koleksiyonunu birden çok görsel öğeye uygulanabilecek tek bir nesnede gruplandırmak için sınıfı kullanılarak Style stillendirilebilir. Bu, yinelenen işaretlemeleri azaltmaya yardımcı olur ve uygulamaların görünümünün daha kolay değiştirilmesini sağlar.

Stiller öncelikli olarak XAML tabanlı uygulamalar için tasarlanmış olsa da, C# dilinde de oluşturulabilir:

• StyleXAML'de oluşturulan nesneler genellikle bir ResourceDictionary denetim, sayfa veya uygulama koleksiyonu koleksiyonuna Resources atanan Resources bir içinde tanımlanır.
• Style C# dilinde oluşturulan nesneler genellikle sayfanın sınıfında veya genel olarak erişilebilen bir sınıfta tanımlanır.

Kullanılabilmesi için Style etkinin tanımlanacağı yeri seçme:

• Style denetim düzeyinde tanımlanan örnekler yalnızca denetime ve alt öğelerine uygulanabilir.
• Style sayfa düzeyinde tanımlanan örnekler yalnızca sayfaya ve alt öğelerine uygulanabilir.
• Style uygulama düzeyinde tanımlanan örnekler uygulama genelinde uygulanabilir.

Her Style nesne, bir veya daha fazla Setter nesneden oluşan bir koleksiyon içerir ve her Setter biri ve Property öğesine sahip olur Value. Property, stilin uygulandığı öğenin bağlanabilir özelliğinin adıdır ve Value özelliğine uygulanan değerdir.

Her Style nesne açık veya örtük olabilir:

• Açık Style bir nesne, bir TargetType ve x:Key değeri belirterek ve hedef öğenin Style özelliğini başvuruya x:Key ayarlayarak tanımlanır. Daha fazla bilgi için bkz . Açık stiller.
• Örtük Style bir nesne, yalnızca bir TargetTypebelirtilerek tanımlanır. Nesne Style daha sonra otomatik olarak bu türdeki tüm öğelere uygulanır. Ancak, alt sınıflarına TargetType otomatik Style olarak uygulanmaz. Daha fazla bilgi için bkz . Örtük stiller.

oluştururken StyleTargetType özelliği her zaman gereklidir. Aşağıdaki örnekte açık bir stil gösterilmektedir:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="FontSize" Value="18" />
</Style>

uygulamak Styleiçin, hedef nesnenin özelliğinin değeriyle TargetType Styleeşleşen bir VisualElement olması gerekir:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

Görünüm hiyerarşisindeki daha düşük stiller, yukarıda tanımlananlara göre önceliklidir. Örneğin, uygulama düzeyinde olarak ayarlanacak Label.TextColor Red bir Style ayarı, olarak ayarlayan GreenLabel.TextColor sayfa düzeyinde bir stil tarafından geçersiz kılınacaktır. Benzer şekilde, sayfa düzeyi stili denetim düzeyi stili tarafından geçersiz kılınacaktır. Buna ek olarak, doğrudan bir denetim özelliğinde ayarlanırsa Label.TextColor , bu herhangi bir stilden önceliklidir.

Stiller özellik değişikliklerine yanıt vermez ve uygulama süresi boyunca değişmeden kalır. Ancak uygulamalar, çalışma zamanında dinamik kaynakları kullanarak stil değişikliklerine dinamik olarak yanıt verebilir. Daha fazla bilgi için bkz . Dinamik stiller.

Açık stiller

Sayfa düzeyinde bir Style oluşturmak için, sayfaya bir ResourceDictionary eklenmelidir ve ardından bir veya daha fazla Style bildirim öğesine ResourceDictionaryeklenebilir. , Style bildirimine içinde açıklayıcı bir anahtar veren bir x:Key öznitelik vererek açık hale getirilirResourceDictionary. Daha sonra, özellikleri ayarlanarak Style belirli görsel öğelere açık stiller uygulanmalıdır.

Aşağıdaki örnekte, bir sayfanın içindeki açık stiller gösterilir ve sayfanın ResourceDictionaryLabel nesnelerine uygulanır:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="labelRedStyle"
               TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="TextColor" Value="Red" />
        </Style>
        <Style x:Key="labelGreenStyle"
               TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="TextColor" Value="Green" />
        </Style>
        <Style x:Key="labelBlueStyle"
               TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <Label Text="These labels"
               Style="{StaticResource labelRedStyle}" />
        <Label Text="are demonstrating"
               Style="{StaticResource labelGreenStyle}" />
        <Label Text="explicit styles,"
               Style="{StaticResource labelBlueStyle}" />
        <Label Text="and an explicit style override"
               Style="{StaticResource labelBlueStyle}"
               TextColor="Teal" />
    </StackLayout>
</ContentPage>

Bu örnekte , ResourceDictionary sayfanın Label nesnelerinde açıkça ayarlanan üç stili tanımlar. Her Style biri, yazı tipi boyutunu ve yatay ve dikey düzen seçeneklerini ayarlarken metni farklı bir renkte görüntülemek için kullanılır. Her Style biri, işaretleme uzantısı kullanılarak özellikleri ayarlanarak Style farklı Label bir değere StaticResource uygulanır. Buna ek olarak, finalde Label bir Style küme olsa da, özelliği farklı Color bir değerle geçersiz kılarTextColor.

Örtük stiller

Sayfa düzeyinde bir Style oluşturmak için, sayfaya bir ResourceDictionary eklenmelidir ve ardından bir veya daha fazla Style bildirim öğesine ResourceDictionaryeklenebilir. bir Style özniteliği belirtilmeyerek örtük hale x:Key getirilir. Stil daha sonra tam olarak ile eşleşen kapsam görsel öğelerine TargetType uygulanır, ancak değerden TargetType türetilen öğelere uygulanmaz.

Aşağıdaki kod örneği, bir sayfanın içindeki örtük stili gösterir ve sayfanın ResourceDictionaryEntry nesnelerine uygulanır:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="Entry">
            <Setter Property="HorizontalOptions" Value="Fill" />
            <Setter Property="VerticalOptions" Value="Center" />
            <Setter Property="BackgroundColor" Value="Yellow" />
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <Entry Text="These entries" />
        <Entry Text="are demonstrating" />
        <Entry Text="implicit styles," />
        <Entry Text="and an implicit style override"
               BackgroundColor="Lime"
               TextColor="Red" />
        <local:CustomEntry Text="Subclassed Entry is not receiving the style" />
    </StackLayout>
</ContentPage>

Bu örnekte , ResourceDictionary sayfanın Entry nesnelerinde örtük olarak ayarlanmış tek bir örtük stil tanımlar. , Style mavi metni sarı arka planda görüntülerken diğer görünüm seçeneklerini de ayarlamak için kullanılır. Style, bir x:Key öznitelik belirtilmeden sayfalara ResourceDictionary eklenir. Bu nedenle, Style tam olarak özelliğiyle eşleştiklerindenTargetType, örtük olarak tüm Entry nesnelere Style uygulanır. Ancak, Style alt sınıf olan nesnesine CustomEntry uygulanmaz Entry. Buna ek olarak, dördüncü Entry stil ve TextColor özelliklerini farklı Color değerlerle geçersiz kılarBackgroundColor.

Türetilmiş türlere stil uygulama

özelliği, Style.ApplyToDerivedTypes özelliği tarafından başvuruda bulunılan temel türden türetilen denetimlere bir stilin TargetType uygulanmasını sağlar. Bu nedenle, bu özelliğin olarak true ayarlanması, türlerin özelliğinde TargetType belirtilen temel türden türetilmiş olması koşuluyla, birden çok türü hedeflemek için tek bir stili etkinleştirir.

Aşağıdaki örnekte örneklerin arka plan rengini Button kırmızıya ayarlayan örtük bir stil gösterilmektedir:

<Style TargetType="Button"
       ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor"
            Value="Red" />
</Style>

Bu stilin sayfa düzeyine ResourceDictionary yerleştirilmesi, hem sayfadaki tüm Button nesnelere hem de 'den Buttontüretilen tüm denetimlere uygulanmasına neden olur. Ancak, özellik ayarlanmazsa ApplyToDerivedTypes , stil yalnızca nesnelere Button uygulanır.

Genel stiller

Stiller, uygulamanın kaynak sözlüğüne eklenerek genel olarak tanımlanabilir. Bu stiller daha sonra uygulama genelinde kullanılabilir ve sayfalar ve denetimler arasında stil yinelemesini önlemeye yardımcı olur.

Aşağıdaki örnek, uygulama düzeyinde tanımlanmış bir Style örneği gösterir:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Styles"
             x:Class="Styles.App">
    <Application.Resources>        
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="HorizontalOptions"
                        Value="Center" />
            <Setter Property="VerticalOptions"
                        Value="CenterAndExpand" />
            <Setter Property="BorderColor"
                        Value="Lime" />
            <Setter Property="CornerRadius"
                        Value="5" />
            <Setter Property="BorderWidth"
                        Value="5" />
            <Setter Property="WidthRequest"
                        Value="200" />
            <Setter Property="TextColor"
                        Value="Teal" />
        </Style>
    </Application.Resources>
</Application>

Bu örnekte , ResourceDictionary nesnelerin görünümünü Button ayarlamak için kullanılacak tek bir açık stil buttonStyletanımlar.

Aşağıdaki örnekte, sayfanın nesnelerinde kullanan buttonStyle bir sayfa gösterilmektedir Button :

<ContentPage ...>
    <StackLayout>
        <Button Text="These buttons"
                Style="{StaticResource buttonStyle}" />
        <Button Text="are demonstrating"
                Style="{StaticResource buttonStyle}" />
        <Button Text="application styles"
                Style="{StaticResource buttonStyle}" />
    </StackLayout>
</ContentPage>

Stil devralma

Stiller, yinelemeyi azaltmak ve yeniden kullanımı etkinleştirmek için diğer stillerden devralabilir. Bu, özelliği mevcut Stylebir olarak ayarlanarak Style.BasedOn elde edilir. XAML'de bu, özelliği daha önce oluşturulmuş Stylebir öğesine başvuran bir StaticResource işaretleme uzantısına ayarlanarak BasedOn elde edilebilir.

Temel stilden devralan stiller, yeni özelliklerin örneklerini içerebilir Setter veya bunları temel stildeki ayarlayıcıları geçersiz kılmak için kullanabilir. Ayrıca, temel stilden devralan stillerin aynı türü veya temel stil tarafından hedeflenen türden türetilen bir türü hedeflemesi gerekir. Örneğin, bir temel stil nesneleri hedeflerseView, temel stili temel alan stiller ve Button gibi Label sınıftan View türetilen nesneleri veya türleri hedefleyebilirView.

Stil, görünüm hiyerarşisindeki stillerden yalnızca aynı düzeyde veya daha üst düzeydeki stillerden devralabilir. Bu şu anlama gelir:

• Uygulama düzeyi stili yalnızca diğer uygulama düzeyindeki stillerden devralabilir.
• Sayfa düzeyi stili, uygulama düzeyindeki stillerden ve diğer sayfa düzeyindeki stillerden devralabilir.
• Denetim düzeyi stili, uygulama düzeyi stillerinden, sayfa düzeyi stillerinden ve diğer denetim düzeyi stillerinden devralabilir.

Aşağıdaki örnekte açık stil devralma gösterilmektedir:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="baseStyle"
               TargetType="View">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <StackLayout.Resources>
            <Style x:Key="labelStyle"
                   TargetType="Label"
                   BasedOn="{StaticResource baseStyle}">
                <Setter Property="FontSize" Value="18" />
                <Setter Property="FontAttributes" Value="Italic" />
                <Setter Property="TextColor" Value="Teal" />
            </Style>
            <Style x:Key="buttonStyle"
                   TargetType="Button"
                   BasedOn="{StaticResource baseStyle}">
                <Setter Property="BorderColor" Value="Lime" />
                <Setter Property="CornerRadius" Value="5" />
                <Setter Property="BorderWidth" Value="5" />
                <Setter Property="WidthRequest" Value="200" />
                <Setter Property="TextColor" Value="Teal" />
            </Style>
        </StackLayout.Resources>
        <Label Text="This label uses style inheritance"
               Style="{StaticResource labelStyle}" />
        <Button Text="This button uses style inheritance"
                Style="{StaticResource buttonStyle}" />
    </StackLayout>
</ContentPage>

Bu örnekte, baseStyle nesneleri hedefler View ve ve VerticalOptions özelliklerini ayarlarHorizontalOptions. baseStyle doğrudan hiçbir denetimde ayarlanmaz. Bunun yerine, labelStyle buttonStyle ek bağlanabilir özellik değerleri ayarlayarak bu değerden devralın. Ve labelStyle buttonStyle nesneleri daha sonra ve Label Buttonüzerinde ayarlanır.

Dinamik stiller

Stiller özellik değişikliklerine yanıt vermez ve uygulama süresi boyunca değişmeden kalır. Örneğin, bir görsel öğesine bir atadıktan Style sonra, nesnelerden biri Setter değiştirilirse, kaldırılırsa veya yeni Setter bir öğe eklenirse, değişiklikler görsel öğesine uygulanmaz. Ancak uygulamalar, çalışma zamanında dinamik kaynakları kullanarak stil değişikliklerine dinamik olarak yanıt verebilir.

biçimlendirme DynamicResource uzantısı, içindeki işaretleme uzantısına StaticResource benzer ve her ikisi de bir sözlük anahtarı kullanarak bir değerinden ResourceDictionarybir değer getirir. Ancak, tek bir sözlük araması gerçekleştirirken StaticResource , DynamicResource sözlük anahtarına bir bağlantı tutar. Bu nedenle, anahtarla ilişkili sözlük girdisi değiştirilirse, değişiklik görsel öğesine uygulanır. Bu, bir uygulamada çalışma zamanı stili değişiklikleri yapılmasını sağlar.

Aşağıdaki örnekte dinamik stiller gösterilmektedir:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="baseStyle"
               TargetType="View">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style x:Key="blueSearchBarStyle"
               TargetType="SearchBar"
               BasedOn="{StaticResource baseStyle}">
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue" />
        </Style>
        <Style x:Key="greenSearchBarStyle"
               TargetType="SearchBar">
            <Setter Property="FontAttributes" Value="None" />
            <Setter Property="PlaceholderColor" Value="Green" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <SearchBar Placeholder="SearchBar demonstrating dynamic styles"
                   Style="{DynamicResource blueSearchBarStyle}" />
    </StackLayout>
</ContentPage>

Bu örnekte, SearchBar nesnesi adlandırılmış blueSearchBarStylebir Style ayarlamak için işaretleme uzantısını kullanırDynamicResource. ardından öğesinin SearchBar Style tanımı kodda güncelleştirilebilir:

Resources["blueSearchBarStyle"] = Resources["greenSearchBarStyle"];

Bu örnekte tanım, blueSearchBarStyle tanımdaki greenSearchBarStyle değerleri kullanacak şekilde güncelleştirilir. Bu kod yürütürken , SearchBar içinde greenSearchBarStyletanımlanan nesneleri kullanacak Setter şekilde güncelleştirilir.

Dinamik stil devralma

Dinamik bir stilden stil türetme özelliği kullanılarak Style.BasedOn elde edilemiyor. Bunun yerine sınıfı, Style değeri dinamik olarak değişebilen bir sözlük anahtarına ayarlanabilen özelliğini içerir BaseResourceKey .

Aşağıdaki örnekte dinamik stil devralma gösterilmektedir:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="baseStyle"
               TargetType="View">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style x:Key="blueSearchBarStyle"
               TargetType="SearchBar"
               BasedOn="{StaticResource baseStyle}">
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>
        <Style x:Key="greenSearchBarStyle"
               TargetType="SearchBar">
            <Setter Property="FontAttributes" Value="None" />
            <Setter Property="TextColor" Value="Green" />
        </Style>
        <Style x:Key="tealSearchBarStyle"
               TargetType="SearchBar"
               BaseResourceKey="blueSearchBarStyle">
            <Setter Property="BackgroundColor" Value="Teal" />
            <Setter Property="CancelButtonColor" Value="White" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <SearchBar Text="SearchBar demonstrating dynamic style inheritance"
                   Style="{StaticResource tealSearchBarStyle}" />
    </StackLayout>
</ContentPage>

Bu örnekte, SearchBar nesnesi adlandırılmış tealSearchBarStylebir Style öğesine başvurmak için işaretleme uzantısını kullanırStaticResource. Bu Style , bazı ek özellikleri ayarlar ve başvurmak BaseResourceKey blueSearchBarStyleiçin özelliğini kullanır. Biçimlendirme DynamicResource uzantısı gerekli değildir, çünkü tealSearchBarStyle bu uzantıdan türetildiği durumlar Style dışında değişmez. Bu nedenle, tealSearchBarStyle bir bağlantı blueSearchBarStyle tutar ve temel stil değiştiğinde güncelleştirilir.

Tanım blueSearchBarStyle kodda güncelleştirilebilir:

Resources["blueSearchBarStyle"] = Resources["greenSearchBarStyle"];

Bu örnekte tanım, blueSearchBarStyle tanımdaki greenSearchBarStyle değerleri kullanacak şekilde güncelleştirilir. Bu kod yürütürken , SearchBar içinde greenSearchBarStyletanımlanan nesneleri kullanacak Setter şekilde güncelleştirilir.

Stil sınıfları

Stil sınıfları, stil devralmaya başvurmadan bir denetime birden çok stilin uygulanmasını sağlar.

Bir stil sınıfı, üzerindeki Style özelliği sınıf adını temsil eden bir string olarak ayarlanarak Class oluşturulabilir. Bunun sağladığı avantaj, özniteliğini kullanarak x:Key açık bir stil tanımlamak yerine, bir öğesine VisualElementbirden çok stil sınıfı uygulanabilmesidir.

Aşağıdaki örnekte üç BoxView stil sınıfı ve bir VisualElement stil sınıfı gösterilmektedir:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="BoxView"
               Class="Separator">
            <Setter Property="BackgroundColor"
                    Value="#CCCCCC" />
            <Setter Property="HeightRequest"
                    Value="1" />
        </Style>

        <Style TargetType="BoxView"
               Class="Rounded">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="10" />
        </Style>    

        <Style TargetType="BoxView"
               Class="Circle">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="WidthRequest"
                    Value="100" />
            <Setter Property="HeightRequest"
                    Value="100" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="50" />
        </Style>

        <Style TargetType="VisualElement"
               Class="Rotated"
               ApplyToDerivedTypes="true">
            <Setter Property="Rotation"
                    Value="45" />
        </Style>        
    </ContentPage.Resources>
</ContentPage>

Bu örnekte, , ve stil sınıflarının Separatorher biri özellikleri belirli değerlere ayarlarBoxView.Circle Rounded Stil Rotated sınıfının bir TargetType değeri VisualElementvardır, yani yalnızca örneklere VisualElement uygulanabilir. Ancak, ApplyToDerivedTypes özelliği olarak ayarlanır trueve bu, gibi BoxView' den VisualElementtüretilen tüm denetimlere uygulanabilmesini sağlar. Türetilmiş türe stil uygulama hakkında daha fazla bilgi için bkz . Türetilmiş türlere stil uygulama.

Stil sınıfları, türündeki StyleClass IList<string>denetimin özelliği stil sınıfı adları listesine ayarlanarak kullanılabilir. Denetim türünün stil sınıflarının türüyle eşleşmesi TargetType koşuluyla stil sınıfları uygulanır.

Aşağıdaki örnekte her biri farklı stil sınıflarına ayarlanmış üç BoxView örnek gösterilmektedir:

<ContentPage ...>
    <ContentPage.Resources>
        ...
    </ContentPage.Resources>
    <StackLayout>
        <BoxView StyleClass="Separator" />       
        <BoxView WidthRequest="100"
                 HeightRequest="100"
                 HorizontalOptions="Center"
                 StyleClass="Rounded, Rotated" />
        <BoxView HorizontalOptions="Center"
                 StyleClass="Circle" />
    </StackLayout>
</ContentPage>    

Bu örnekte ilki BoxView çizgi ayırıcı olacak şekilde stillendirilirken, üçüncüsü BoxView döngüseldir. İkincisinde BoxView , yuvarlatılmış köşeler veren ve 45 derece döndüren iki stil sınıfı uygulanır: