Quick Start Tutorial: Creating Universal Apps Via Xamarin: Style In XAML (Cont.) - Part 12

Vinoth Rajendran

10y11.2k11100Article

Xamarin XAML Universal AppsXAML StyleBasedOnBaseResoruceKey

11 Comments

Join the conversation! Your thoughts help the community grow.

Davronbek Umirov10y ago
Nice..
Debasis Saha10y ago
Nice one..
kalu singh rao10y ago
Nice...
Thiruppathi R10y ago
Nice
Anu V10y ago
Nice
Raja10y ago
Good One...
Vignesh Mani10y ago
Ncie
Debasis Saha10y ago
Nice one..
Santhakumar Munuswamy10y ago
Nice share
Prasanna Murali10y ago
Nice one..
Bhuvanesh Mohankumar10y ago
Good one

Read the previous parts of the series here,

This article explains about style in the inheritance concept in XAML.

Style in Inheritance

Style can be derived from another style; BasedOn and BaseResoruceKey can be used to implement the inheritance concept.

BasedOn

BasedOn style supports the StaticResource (value can’t be changed at runtime) and the inheritance of both types are Base Style and Derive type, and should be of the same target type.

Syntax of Inheritance Style

<Style x: Key="KeyName" TargetType="Control Type" BasedOn="{StaticResource StyleName}”>
<Setter Property="PropertyName" Value="PropertyValue"/>
< /Style>

BasedOn attribute is added in this syntax, if we assign the DynamicResource through a compile time execution

Example

<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="BaseLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="20" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label" BasedOn="{StaticResource BaseLabelStyle}">
<Setter Property="TextColor" Value="Red" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Label Text="BasedOn Style" Style="{StaticResource LabelStyle}"/>
</StackLayout>

BaseResourceKey

BaseResourceKey is used at runtime to change the base type value and assign it to the control. If key is not present in the ResourceDictionary, it won’t throw an exception.

Syntax

<Style x: Key="KeyName" TargetType="Control Type" BaseResourceKey="{StyleName}”>
<Setter Property="PropertyName" Value="PropertyValue"/>
< /Style>

BaseResourceKey: There is no need to specify the dynamic resource, directly assign the style name.

Example: Runtime change the values,

<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseLabelResourceKey" TargetType="Label">
<Setter Property="TextColor" Value="Green" />
</Style>
<Style x:Key="DynamicStyle" TargetType="Label" BaseResourceKey="baseLabelResourceKey">
<Setter Property="FontSize" Value="50" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Label Text="BaseResourceKey" Style="{StaticResource DynamicStyle}"/>
<Button Text="Click to Change" Clicked="Button_OnClicked" />
</StackLayout>

Code Behind Page

private void Button_OnClicked(object sender, EventArgs e)
{
CreateDynamicStyle();
}
private void CreateDynamicStyle()
{
var labelStyle = new Style(typeof(Label))
{
Setters =
{
new Setter { Property = Label.TextColorProperty, Value = Color.Maroon }
}
};
this.Resources["baseLabelResourceKey"] = labelStyle;
}

In Xaml BaseResourceKey is “baseLabelResourceKey”, initialize it, assign the Text Color as Green and at runtime, change the text color to maroon.

output

Xamarin Supports Pre-Defined Styles

Xamarin supports some of the predefined styles by default; it includes OnPlatform functionality, and based on the platform, style will change and the predefined style should be defined as the DynamicResource.

Styles

We can inherit the system style into the user defined styles.

Example

<StackLayout>
<Label Text="TitleStyle" Style="{DynamicResource TitleStyle}"/>
<Label Text="SubtitleStyle" Style="{DynamicResource SubtitleStyle}"/>
<Label Text="CaptionStyle" Style="{DynamicResource CaptionStyle}"/>
<Label Text="BodyStyle" Style="{DynamicResource BodyStyle}"/>
</StackLayout>