Xaml Markup Extension

Described how markup extensions enhance power and flexibility of XAML code

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.