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

namespace MarkupExtensionPoc.Helpers {
public static class AppConstants {
public static readonly Color FrameBackgroundColor = Color.Accent;
}
}

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.

<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MarkupExtensionPoc.MainPage"
xmlns:local="clr-namespace:MarkupExtensionPoc"
xmlns:const="clr-namespace:MarkupExtensionPoc.Helpers"
>
<StackLayout >
<Frame BackgroundColor="{x:Static const:AppConstants.FrameBackgroundColor}" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<Label x:Name="Label1" Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
<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"/>
</StackLayout>
</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.

<StackLayout BackgroundColor="{x:Static local:App.BackgroundColor}">
<Frame BackgroundColor="{x:Static const:AppConstants.FrameBackgroundColor}" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<Label x:Name="Label1" Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
<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"/>
<Label FontSize="16" Padding="30,24,30,0">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Learn more at "/>
<Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/>
<Span Text="{Binding Source={x:Reference Label1}, Path=Text}"></Span>
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>

In the above code we are assigning the 'Lable1' element text value to another label text by using reference markup extension.