Creating a User Control in Xamarin Forms

In Mobile Development by Christian HissibiniLeave a Comment

Xamarin Forms doesn’t have a control called a User Control, similar to what you might be familar with in WPF. However we can make any VisualElement, or combination of VisualElement’s into a reusable control, to use on different pages, just like a User Control.

Create Control

Create a new ContentView.

Going into the XAML, while you can keep the ContentView as your root element, I prefer to remove it and have a different layout control at the root, e.g. a Grid.

<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="Mobile.UserControl">

      <Label Text="Hello, I'm a UserControl" />
 
</Grid>

In your code behind, make sure you change the inheritance from a ContentView to a Grid.

public namespace Mobile
{
    public partial class UserControl : Grid
    {
        public UserControl()
        {
            InitializeComponent();
        }
    }
}

Using The Control

Using the control is easy, you first need to create an xmlns prefix, referencing the namespace the control is in. Then using that to place the control, where ever you want on your page.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:control="clr-namespace:Mobile"

             x:Class="Mobile.MainPage"
             Title="Main Page">

     <control:UserControl />

</ContentPage>

Bindable Properties

Next, you might want to make your control, have a bindable property to pass data through to it, on each page it is used. First, create a Bindable Property in your UserControl. It doesn’t have to be bindable if you just want to pass a static value through, however if you want to bind to it, you must make it bindable.

public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(UserControl));

public string Text
{
    get
    {
        return (string)GetValue(TextProperty);
    }
    set
    {
        SetValue(TextProperty, value);
}

Now, in the XAML of your user control, you will want to change the label text to bind from this property. Notice, that you also set the name of the page and mark the source of the binding to the page. If you remember about BindingContexts, the user control will take the binding context of the page it is placed on. Hence you need to tell it to look in the UserControl, not the page it is placed on for the value of the property.

<Grid xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="Mobile.UserControl"
      x:Name="this">
    <Label Text="{Binding Text, Source={x:Reference this}}" />
</Grid>

Going to your MainPage, you can now assign a value to the Text property. You can also use {Binding PropertyName} if you want, as this is a bindable property.

<control:UserControl Text="Hello from MainPage!" />

Ref
https://docs.microsoft.com – https://xamarinhelp.com – https://blog.xamarin.com/

Leave a Comment