Stilleri kullanarak tutarlı bir kullanıcı arabirimi oluşturma
- 8 dakika
.NET Çok Platformlu Uygulama Kullanıcı Arabirimi'nde (MAUI), kaynaklar Genişletilebilir Uygulama İşaretleme Dili (XAML) işaretlemenizde sabit kodlanmış, yinelenen değerlerden kaçınmak için idealdir, ancak uygulama zahmetli olabilir. Her özellik değerini tek tek atarsınız ve bu da karmaşık ve ayrıntılı XAML'ye neden olabilir. Bu ünitede birden çok ayarın bir stilde nasıl gruplandırıldığı gösterilmektedir. Bu, kodunuzun dağınıklığını ortadan kaldırmaya ve daha sürdürülebilir hale getirmenize yardımcı olabilir.
Kaynaklar XAML'nizi nasıl karmaşık hale gelebilir?
Kaynak, tek bir özellik için bir değer sağlar. Ancak, çok fazla kaynak kullanmak ayrıntılı XAML'ye yol açabilir. Düğmeleriniz için özelleştirilmiş bir görünüm istediğinizi varsayalım. İlk olarak ihtiyacınız olan değerler için kaynaklar oluşturursunuz. Ardından, her kaynağı tüm düğmelerinize uygularsınız. Aşağıdaki kod, XAML işaretlemesinin iki düğmeyi nasıl arayabileceğini gösterir.
<Button
Text = "OK"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
<Button
Text = "Cancel"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
Düğmelerin her birinde aynı beş özelliğin nasıl ayarlandığına dikkat edin. Kaynakların kullanılması, dört tanesinde yinelenen, sabit kodlanmış değerler gereksinimini ortadan kaldırır. Ancak, bu tür XAML işaretlemesinin hızla okunma zorlaşır. Ayrıca, her denetim için çok sayıda özellik ayarlıysanız, bunlardan birini yanlışlıkla atlayarak denetimlerin görünümünde tutarsızlıklara yol açar. Çözüm, dört özelliğin tümünü aynı anda atayan bir stil oluşturmaktır.
Ayarlayıcı nedir?
Ayarlayıcılar , stil oluşturmak için kullandığınız temel bileşenlerdir.
Ayarlayıcı, özellik/değer çifti için bir kapsayıcıdır. Bir ayarlayıcının atama deyimini temsil ettiğini düşünebilirsiniz. Atanacak özelliği ve uygulanacak değeri belirtirsiniz. Genellikle XAML işaretlemenizde Setter nesneleri oluşturursunuz. Aşağıdaki örnek, TextColor özelliği için bir Setter nesnesi oluşturur.
<Setter Property="TextColor" Value="White" />
Aşağıdaki kodda gösterildiği gibi, bir ayarlayıcıdaki değer için bir kaynak kullanabilirsiniz. Bu teknik, birden çok ayarlayıcıda aynı değeri kullanmak istediğinizde harikadır.
<Setter Property="TextColor" Value="{StaticResource textColor}" />
Not
Bir ayarlayıcıda belirttiğiniz özellik değeri, bağlanabilir özellik olarak uygulanmalıdır. .NET MAUI'de sonek Özelliği ile biten denetimlerdeki tüm özellikler bağlanabilir özelliklerdir. Bir ayarlayıcıda TextColor gibi bir özellik kullanmaya çalışıyorsanız, bu denetim için TextColorProperty adlı karşılık gelen bir bağlanabilir özellik olduğundan emin olun. Uygulamada, ayarlayıcılarınızda kullanmak istediğiniz neredeyse tüm özellikler bu şekilde uygulanır.
Stil nedir?
Stil, belirli bir denetim türünü hedefleyen ayarlayıcılardan oluşan bir koleksiyondur. .NET MAUI, ayarlayıcılarınızdaki özelliklerin bu tür üzerinde bulunduğundan emin olmak için bir hedef tür gerektirir.
Aşağıdaki kod, önceki örnekteki dört değeri birleştiren bir stil gösterir. TargetType'ınButton olarak ayarlandığına ve ayarlayıcılardaki tüm özelliklerin Button sınıfının üyeleri olduğuna dikkat edin. Label sınıfı BorderColor veya BorderWidth özelliğini içermediğinden, etiket için bu stili kullanamazsınız.
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#2A84D3" />
<Setter Property="BorderColor" Value="#1C5F9B" />
<Setter Property="BorderWidth" Value="3" />
<Setter Property="TextColor" Value="White" />
</Style>
Stil tanımlama
Stilleri genellikle resourceDictionary nesnesinin içinde kaynak olarak tanımlarsınız. Kaynak sözlüğü, stili aynı sayfadaki birden çok denetimde, hatta uygulamanızın tamamında kullanmayı kolaylaştırır. Aşağıdaki kodda, bir stilin sözlüğün içinde kaynak olarak nasıl tanımlanacağı gösterilmektedir. Stile x:Key özelliği kullanılarak bir ad verildiğine dikkat edin. Bir stili adlandırmak, XAML sayfalarınızın içinden stile başvurmanızı sağlar.
<ContentPage.Resources>
<Style x:Key="MyButtonStyle" TargetType="Button">
...
</Style>
</ContentPage.Resources>
Stil uygulama
Adı Style özelliğine atayarak bir denetime stil eklersiniz. Atama, stildeki Setter nesnelerinin her birinin hedef denetime uygulanmasına neden olur. Aşağıdaki kod, iki düğmeye düğme stilinin nasıl uygulanacağını gösterir.
<Button Text="OK" Style="{StaticResource MyButtonStyle}" />
<Button Text="Cancel" Style="{StaticResource MyButtonStyle}" />
Önceki örnekte, stili denetimlere eklemek için StaticResource işaretleme uzantısını kullandınız. Çalışma zamanında stilin değişmesi gerekmeyen bu teknik harikadır. Peki ya kullanıcı arabiriminin değişmesi gereken dinamik temalar gibi bir şey uygulamak istiyorsanız? Bu durumda, stili yüklemek için DynamicResource işaretleme uzantısını kullanabilirsiniz.
<Button Text="Cancel" Style="{DynamicResource MyButtonStyle}" />
DynamicResource , kaynak sözlüğündeki x:Key özelliğinin değiştirilmesini dinler. ResourceDictionary'e aynı x:Key değeriyle yeni bir stil yükleyen kod yazarsanız, yeni stil kullanıcı arabiriminize otomatik olarak uygulanır.
Birden çok denetim için örtük stil kullanma
Kullanıcı arabiriminizde 50 düğme olduğunu ve bunların tümüne aynı stili uygulamak istediğinizi varsayalım. Bildiklerimize göre, her düğmedeki Style özelliğine manüel olarak atamanız gerekir. Bunu yapmak o kadar zor değil, ama yine de sıkıcı.
Örtük stil, bir kaynak sözlüğüne x:Key tanımlayıcısı vermeden eklediğiniz stildir. Örtük stiller, belirtilen TargetType nesnesinin tüm denetimlerine otomatik olarak uygulanır.
Aşağıdaki kod, örtük stil olarak bildirilen önceki örneği gösterir. Bu stil sayfadaki her düğmeye uygulanır.
<ContentPage.Resources>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
...
</Style>
</ContentPage.Resources>
Önemli
Örtük stillerin denetimlerle eşleşmesi, belirtilen TargetType ile tam eşleşme gerektirir. Hedef türden devralan denetimler stilleri almaz. Devralınan denetimleri etkilemek için, stili tanımlarken Style.ApplyToDerivedTypes özniteliğini True olarak ayarlayabilirsiniz. Örneğin, Düğme türüne bir stil uygulamak ve Düğmeden devralan düğmelerinizden herhangi birini etkilemesini sağlamak için ( ImageButton, RadioButton veya oluşturduğunuz özel bir tür gibi), bunun gibi bir stil kullanabilirsiniz.
<ContentPage.Resources>
<Style TargetType="Button"
ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Black" />
</Style>
</ContentPage.Resources>
Stili geçersiz kılma
Bir stili, denetimler için bir dizi varsayılan değer sağlamak olarak düşünebilirsiniz. Mevcut stil gereksinimlerinize yakın olabilir, ancak istemediğiniz bir veya iki ayarlayıcı içerebilir. Bu durumda, stili uygulayabilir ve ardından özellikleri doğrudan ayarlayarak değeri geçersiz kılabilirsiniz. Açık ayar stilden sonra uygulanır, bu nedenle stildeki değeri geçersiz kılar.
Sayfanızdaki birkaç düğme için aşağıdaki stili kullanmak istediğinizi varsayalım.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderRadius" Value="10" />
<Setter Property="BorderWidth" Value="3" />
</Style>
Bu stil, kırmızı arka plan gereken İptal dışındaki tüm düğmelerinizde çalışır. BackgroundColor özelliğini doğrudan ayarladığınız sürece İptal düğmesi için aynı stili kullanabilirsiniz. Aşağıdaki kod, renk ayarının nasıl geçersiz kılınacaklarını gösterir.
<Button
Text="Cancel"
Style="{StaticResource MyButtonStyle}"
BackgroundColor="Red"
... />
Bir ata türünü hedefleme
Düğmeleriniz ve etiketleriniz için özel bir arka plan rengi istediğinizi varsayalım. Her tür için ayrı stiller oluşturabilir veya TargetType değeri VisualElement olarak ayarlanmış bir stil oluşturabilirsiniz. VisualElement hem Button hem de Label için bir temel sınıf olduğundan bu teknik çalışır.
Aşağıdaki kodda, türetilmiş iki farklı türe uygulanan bir temel sınıfı hedefleyen bir stil gösterilmektedir.
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="#2A84D3" />
</Style>
...
<Button Style="{StaticResource MyVisualElementStyle}" ... />
<Label Style="{StaticResource MyVisualElementStyle}" ... />
Bu örnek , x:Key kullanarak stili tanımlar ve denetimler bunu açıkça uygular. Örtük stil için TargetType , denetim türüyle tam olarak eşleşmesi gerektiğinden örtük stil burada çalışmaz.
Bir stilden devralmak için BasedOn kullanma
Kullanıcı arabiriminiz için uyumlu bir görünüm oluşturmak istediğinizi varsayalım. Tüm denetimlerin tutarlı bir arka plan rengi kullanması gerektiğine karar verirsiniz. Arka plan rengi ayarı, stillerinizden birden fazlasında görünebilir. Aşağıdaki kodda yinelenen ayarlayıcıya sahip iki stil gösterilmektedir.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="TextColor" Value="White" />
</Style>
Yinelenen ayarlayıcıyı temel stil olarak hesaba katmak için stil devralmayı kullanabilirsiniz. Türetilmiş stil oluşturmak için BasedOn özelliğini temel stile başvuracak şekilde ayarlayın. Yeni stil, tüm ayarlayıcıları temel stilinden devralır. Türetilmiş stil ayrıca yeni ayarlayıcılar ekleyebilir veya devralınan bir ayarlayıcıyı farklı bir değer içeren bir değerle değiştirebilir.
Aşağıdaki kod, bir hiyerarşiye yeniden düzenlenmiş önceki örnekteki stilleri gösterir. Ortak ayarlayıcı yinelenmek yerine yalnızca temel stilde görünür. Temel stili aramak için StaticResource işaretleme uzantısını kullandığınıza dikkat edin. Bu durumda DynamicResource kullanamazsınız.
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="Blue" />
</Style>
<Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="TextColor" Value="White" />
</Style>
Temel ve türetilmiş stillerin TargetType değeri uyumlu olmalıdır. Stillerin uyumlu olması için, aynı TargetType özelliğine sahip olmaları gerekir veya türetilen stilin TargetType değeri temel stilin TargetType'ının alt türüdür.