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
atananResources
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
vex:Key
değeri belirterek ve hedef öğenin Style özelliğini başvuruyax:Key
ayarlayarak tanımlanır. Daha fazla bilgi için bkz . Açık stiller. - Örtük Style bir nesne, yalnızca bir
TargetType
belirtilerek tanımlanır. Nesne Style daha sonra otomatik olarak bu türdeki tüm öğelere uygulanır. Ancak, alt sınıflarınaTargetType
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 Green
Label.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 buttonStyle
tanımlar.
Not
Genel stiller açık veya örtük olabilir.
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.
Önemli
Örtük stil, açık bir stilden türetilebilir, ancak açık stil örtük bir stilden türetilmez.
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ış blueSearchBarStyle
bir 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 greenSearchBarStyle
tanı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ış tealSearchBarStyle
bir Style öğesine başvurmak için işaretleme uzantısını kullanırStaticResource
. Bu Style , bazı ek özellikleri ayarlar ve başvurmak BaseResourceKey
blueSearchBarStyle
iç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 greenSearchBarStyle
tanı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.
Önemli
Farklı türleri hedeflemeleri koşuluyla, birden çok stil aynı sınıf adını paylaşabilir. Bu, aynı adlı birden çok stil sınıfının farklı türleri hedeflemesini sağlar.
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 Separator
her 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 true
ve 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:
Önemli
Özelliği türünde IList<string>
olduğundan StyleClass
bir denetime birden çok stil sınıfı uygulanabilir. Bu durumda, stil sınıfları artan liste sırasına uygulanır. Bu nedenle, birden çok stil sınıfı aynı özellikleri ayarladığında, en yüksek liste konumundaki stil sınıfındaki özellik öncelikli olur.