Xamarin Markup extension enhances the power of XAML code. The markup extensions are used to set element properties indirectly from different sources. A markup extension is a class that implements IMarkupExtension interface.
In Xamarin Forms several markup extensions are pre-created, i.e.:
  • * x:Static
  • * x:Reference
  • * x:Type
  • * x:Array
  • * x:Null
  • * OnPlatform
  • * OnIdiom
  • * DataTemplate
  • * FontImage
  • * AppThemeBinding
Here we will go through a few of the pre-created markup extension usages in xaml code.

x:Static markup extension

Static markup extensions are used for assigning the outside static property values to the xaml element properties.
Sample code
  1. namespace MarkupExtensionPoc.Helpers {
  2. public static class AppConstants {
  3. public static readonly Color FrameBackgroundColor = Color.Accent;
  4. }
  5. }
Here we are creating 'FrameBackgroundColor' static variable by assigning the value. By using static markup extension we are using this outside color property in xaml code.
  1. <ContentPage
  2. xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. x:Class="MarkupExtensionPoc.MainPage"
  5. xmlns:local="clr-namespace:MarkupExtensionPoc"
  6. xmlns:const="clr-namespace:MarkupExtensionPoc.Helpers"
  7. >
  8. <StackLayout >
  9. <Frame BackgroundColor="{x:Static const:AppConstants.FrameBackgroundColor}" Padding="24" CornerRadius="0">
  10. <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
  11. </Frame>
  12. <Label x:Name="Label1" Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
  13. <Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0"/>
  14. </StackLayout>
  15. </ContentPage>
In the above code we are using 'FrameBackgroundColor' static property to assign xaml code inside 'Frame' background color with the help of 'x:Static' markup extension.

x:Reference markup extension

Reference markup extension is used for data binding to the element by referencing another element.
  1. <StackLayout BackgroundColor="{x:Static local:App.BackgroundColor}">
  2. <Frame BackgroundColor="{x:Static const:AppConstants.FrameBackgroundColor}" Padding="24" CornerRadius="0">
  3. <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
  4. </Frame>
  5. <Label x:Name="Label1" Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
  6. <Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0"/>
  7. <Label FontSize="16" Padding="30,24,30,0">
  8. <Label.FormattedText>
  9. <FormattedString>
  10. <FormattedString.Spans>
  11. <Span Text="Learn more at "/>
  12. <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/>
  13. <Span Text="{Binding Source={x:Reference Label1}, Path=Text}"></Span>
  14. </FormattedString.Spans>
  15. </FormattedString>
  16. </Label.FormattedText>
  17. </Label>
  18. </StackLayout>
In the above code we are assigning the 'Lable1' element text value to another label text by using reference markup extension.