Xaml Markup Extension

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.