When using Xamarin Forms sometimes there’s code that we do in the code behind because maybe we don’t know that can be done using XAML.

Here is the list of 10 things that maybe you didn’t know you can do in XAML:

1-Passing Constructor Arguments

Arguments can be passed to a non-default constructor by using the x:Argument attribute. This is really helpful when you add a custom view in your XAML and pass a parameter to it.

For example:

Let’s create a new view, that basically will receive a year and will display that year in a Label:

If we want to add this external view and pass the parameter by XAML you just have to do this:

As you can see here, I used  x:Arguments and then passed the parameter by specifying the type. In this case, the constructor is expecting an Integer, so I used x:Int32.

If you want to know how to pass different types, you can check the Xamarin Oficial Documentation in the Passing Arguments in XAML section.

2-Line break

Viewing other’s code, often I found that they use multiple labels to achieve multiple lines instead of just using one with line breaks

For example:

UI Expected:  

A better way to achieve that is by adding a line break ( 
).

3-Create color in XAML

As developers often we have the necessity to create custom colors for our application. For example, if you want to have a transparent dark effect over a view you cannot use predefined colors to achieve this, you have to create a new one instead.

To do that in the code we just have to create a new color on the code behind we can add this color to our view.

Each value in the “Color” constructor represents the hue, saturation, luminosity, and alpha values

But what if you want to do it all in XAML, we just have to add the color and pass the parameters using X:Arguments as we learned before, also specify the type of method to create the color (FromRGB, FromHex, FromHsla). 

Also if you want to create those colors globally, you can do it in your App.xaml file by specifying a key to use it:

      

  

4-The power of x:Reference

This is definitely one of my favorite things to do in XAML, using the x: Reference you can link properties of two views on the same page. There’s a lot of use cases in which we can use this.

For example:

1-If we are using a ListView, you know that the BindingContext inside the ViewCell, is the item of the List, but what happens if I want to change a specific property according to the ViewModel.

As you can see here in my ViewModel I have a property called “IsEnable”, if that property is true I’ll show a “Delete” icon in each element of the cell.

The BindingContext of my page is the ViewModel so, what I’m going to do is:

1-Add a x:Name  to the main layout of the page which is set to the ViewModel. (Because I want to use that BindingContext)

2-Add the icon in the ViewCell and using the property BindingContext set it to the BindingContext of the x:Name added previously.

As you can see the syntax for this is really easy, you use the property Source=”{x:Reference x:nameOfTheElemeent} to specify the property you want to be referenced. Use the property Path if you want to use a specific property of that element, not the whole element.

Also if you don’t want to use the BindingContext property you can use any property. For example, if you want to execute a command in the ViewModel from the ViewCell.

5-Add Emoticons

If you need to use Emoticons if we are creating a chat or just to add some fun to our app.

We just have to use the code of the emotions and add it to the Label.

For example:

If you want the Unicode of each emoticon you can get it here: http://www.charbase.com/block/emoticons.

6-Use Converters

You use a converter to modify the result of a property according to a value.

For example:

I want to modify the Height of a list according to the quantity of elements. In order to achieve this will create a new converter which will receive the list and the size per cell and will return me the new Height.

Let’s do it step by step:

1-Create the converter

2-Add the converter reference

Also if you want to use the converter globally so that you don’t have to add it on each page, you just have to add it in the App.xaml file:

3-Use it

As you can see here, to use it I just have to add Converter=”{StaticResource NameOfTheConverter} and to add an extra parameter ConvererParameter=”Parameter”.

If you want to learn more about converters you can check this great post by Gerald Versluis https://blog.verslu.is/xamarin/xamarin-forms-xamarin/implementing-value-converters-with-ivalueconverter-for-xamarin-forms/ and this video https://channel9.msdn.com/Blogs/MVP-VisualStudio-Dev/Using-value-converters-with-XamarinForms. 

7-Use DataTriggers

Sometimes we have the necessity of changing the appearance of a control according to a specific value. To achieve that we can use DataTriggers which by using DataBinding it allows you to update a property or multiple properties according to the binding value.

Let’s see this in code:

We have an IsReadOnly property in our ViewModel and according to its value, we want to change the TextColor of a Label.

XAML:

Also, there are more types of Triggers like PropertyTrigger, EventTrigger and MultiTrigger you can use. For more information check the Xamarin Documentation about Triggers. 

8-Use String Format

In XAML you can use StringFormat, which is really helpful when you want to change the display format of your binding value.

For example, I have a property in my ViewModel called Title and in my XAML I want to display that property + the text “Favorites”, instead of having 2 Labels with a horizontal orientation, I will do it by using StringFormat.

Also, you can use it to format any DateTime, Time or Number

If you want more information on the different types of format you can check it here: https://msdn.microsoft.com/en-us/library/system.string.format(v=vs.110).aspx

9-Add general styles to your controls

If you want to create general styles that can apply to all controls in your app. For example, if all your labels have a bold style, you don’t have to add the “Bold” property to each Label, you can use global styles.

You just need to add a new style for the control type and add the properties you want to modify in the App.xaml class.

For example:

If you want to know more on this, I wrote a full article here: https://xamgirl.com/universal-styling-in-xamarin-form-apps/

10-Use Attached Properties

The attached static properties that we use in code, can be used in XAML too. For example, if we want to hide the NavigationBar of a specific page, normally in code we will do something like this:

And in XAML:

 

References:

• https://developer.xamarin.com/guides/xamarin-forms/xaml/passing-arguments/
• http://www.charbase.com/block/emoticons
• https://xamgirl.com/universal-styling-in-xamarin-form-apps/
• https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/triggers/
• https://msdn.microsoft.com/en-us/library/system.string.format(v=vs.110).aspx
• https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_binding_basics/
• https://developer.xamarin.com/guides/xamarin-forms/xaml/attached-properties/

 

That’s all for now, you can find the source code used for this samples here: https://github.com/CrossGeeks/XamlTipsAndTricks.

Happy coding! 🙂