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
  1. <Style x: Key="KeyName" TargetType="Control Type" BasedOn="{StaticResource StyleName}”>
  2. <Setter Property="PropertyName" Value="PropertyValue"/>
  3. < /Style>
BasedOn attribute is added in this syntax, if we assign the DynamicResource through a compile time execution

Example
  1. <ContentPage.Resources>
  2. <ResourceDictionary>
  3. <Style x:Key="BaseLabelStyle" TargetType="Label">
  4. <Setter Property="FontSize" Value="20" />
  5. </Style>
  7. <Style x:Key="LabelStyle" TargetType="Label" BasedOn="{StaticResource BaseLabelStyle}">
  8. <Setter Property="TextColor" Value="Red" />
  9. </Style>
  10. </ResourceDictionary>
  11. </ContentPage.Resources>
  13. <StackLayout>
  14. <Label Text="BasedOn Style" Style="{StaticResource LabelStyle}"/>
  15. </StackLayout>
output

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
  1. <Style x: Key="KeyName" TargetType="Control Type" BaseResourceKey="{StyleName}”>
  2. <Setter Property="PropertyName" Value="PropertyValue"/>
  3. < /Style>
BaseResourceKey: There is no need to specify the dynamic resource, directly assign the style name.

Example: Runtime change the values,
  1. <ContentPage.Resources>
  2. <ResourceDictionary>
  3. <Style x:Key="baseLabelResourceKey" TargetType="Label">
  4. <Setter Property="TextColor" Value="Green" />
  5. </Style>
  7. <Style x:Key="DynamicStyle" TargetType="Label" BaseResourceKey="baseLabelResourceKey">
  8. <Setter Property="FontSize" Value="50" />
  9. </Style>
  11. </ResourceDictionary>
  13. </ContentPage.Resources>
  14. <StackLayout>
  15. <Label Text="BaseResourceKey" Style="{StaticResource DynamicStyle}"/>
  16. <Button Text="Click to Change" Clicked="Button_OnClicked" />
  17. </StackLayout>
Code Behind Page
  1. private void Button_OnClicked(object sender, EventArgs e)
  2. {
  3. CreateDynamicStyle();
  4. }
  6. private void CreateDynamicStyle()
  7. {
  8. var labelStyle = new Style(typeof(Label))
  9. {
  10. Setters =
  11. {
  12. new Setter { Property = Label.TextColorProperty, Value = Color.Maroon }
  13. }
  14. };
  16. this.Resources["baseLabelResourceKey"] = labelStyle;
  17. }
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
  1. <StackLayout>
  2. <Label Text="TitleStyle" Style="{DynamicResource TitleStyle}"/>
  3. <Label Text="SubtitleStyle" Style="{DynamicResource SubtitleStyle}"/>
  4. <Label Text="CaptionStyle" Style="{DynamicResource CaptionStyle}"/>
  5. <Label Text="BodyStyle" Style="{DynamicResource BodyStyle}"/>
  6. </StackLayout>
output