XamGirl

A XAML markup extension is a class that implements the IMarkupExtension or IMarkupExtension<T>. Basically, it allows you to set element properties referenced indirectly from a different source.

In Xamarin Forms there are many markup extensions pre-created (x:Static, x:Reference, x:Null, x:Type, etc). In this article, I will focus on two very popular markup extensions which are: OnPlatform and OnIdiom. Also will show you how to create your own markup extension.

OnPlatform Markup Extension

The OnPlatform Markup extension has the same functionality as the OnPlatform class but is easier to use it.

Let’s see it with an example:

Imagine we want to change the background color of a button according to the platform (for Android show it black, on iOS show it red, etc). To achieve this with XAML we will normally do something like this:

By using the OnPlatformExtension the code can be simplified to this:

As you can see in the XAML above we only have to use the OnPlatform text, then specify a default color and finally the color per platform (if we don’t specify a platform then it will use the default color).

OnIdiom Markup Extension

The OnIdiom Markup extension has the same functionality as the OnIdiom class but is easier to use it.

By using this extension we can show a value different according to the device type (Phone, tablet, desktop, TV, Watch).

Let’s do a similar sample to the one we did before but now using the OnIdiom class.

Now using OnIdiomExtension:

Create your own Markup extension

Creating your own Markup extension is pretty simple, you just have to create a class that extends from IMarkupExtension, do your code implementation there and then you can use it in XAML.

For example, let’s think of a simple use case in which we have a design with the Height of a button and we need to calculate the FontSize proportionally to it.

We are going to create a new Markup extension which will basically take the height of the button and then calculate the font size according to the 50% of button height.

Let’s do it step by step

1-Create a new class and extend from IMarkupExtension

FontSize type is double so we will specify this as the type for the markup extension.

2-Add your code

When adding the interface IMarkupExtension, you will have to implement 2 methods (ProvideValue returning the object type expected, and IMarkupExtension.ProvideValue returning an object).

In the first one, we will add our code. Also, define a new property so that the user can set the actual button height.

3-Use the new Markup extension

Here the result:

Improvements

If we don’t want to specify the button height twice, another approach we can do is to pass the button itself by using the markup extension x:Reference which basically allows passing any element reference in the XAML.

So the XAML will look like this:

And the extension class:

Check the full source code here.

Reference

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/markup-extensions/consuming

Happy coding!