Xamarin.Forms - Working With Behaviors In Xamarin.forms

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

Behaviors

Behaviors let you add functionality to user interface controls without having to subclass them. Behaviors are written in code and added to controls in XAML or code.

Behaviors are the best way to validate the user inputs such as email, phone number, etc.

Prerequisites

• Visual Studio 2017 or later (Windows or Mac)

Let's Start,

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You will learn more by going through the steps yourself.

Create a new or existing Xamarin forms(.Net standard) Project. With Android and iOS Platform. 

Setup UI

Now, create a UI for your requirement. I just created a simple entry for validation purposes.

MainPage.xaml

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:TitleView="clr-namespace:XamarinApp.CustomView"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             mc:Ignorable="d" x:Class="XamarinApp.MainPage">

    <NavigationPage.TitleView>
      <TitleView:TitleView/>
    </NavigationPage.TitleView>

    <StackLayout Margin="0,50,0,0" VerticalOptions="StartAndExpand">
        <Image VerticalOptions="Center" Source="xamarinmonkeysbanner.png"/>
        
        <Entry AutomationId="EntryPhoneNumber" Placeholder="Enter Phone Number" x:Name="entryPhoneNumber">
        </Entry>
        
    </StackLayout>
</ContentPage>

Add Behaviors

Create a new class and inherit from Behavior<T> into the class. Now I'm going to write Behavior to Entry for simple mobile number validation.

Need to implement OnAttachedTo and OnDetachingFrom from Behavior<T>.

protected override void OnAttachedTo(Entry bindable)
        {
            base.OnAttachedTo(bindable);
            
        }

 protected override void OnDetachingFrom(Entry bindable)
        {
            base.OnDetachingFrom(bindable);
        }

Below code for simple mobile number validation to Entry. You can customize your validation here.

EntryBehaviour.cs

using System;
using System.Text.RegularExpressions;
using Xamarin.Forms;

namespace XamarinApp
{
    public class EntryBehaviour: Behavior<Entry>
    {
        protected override void OnAttachedTo(Entry bindable)
        {
            base.OnAttachedTo(bindable);

            bindable.TextChanged += Bindable_TextChanged;
            
        }

        private void Bindable_TextChanged(object sender, TextChangedEventArgs e)
        {
            string phoneNumberRegax = "^[0-9]{10}$";
            var entry = sender as Entry;
            if (!string.IsNullOrWhiteSpace(entry.Text))
            {
                if (Regex.IsMatch(entry.Text, phoneNumberRegax,
                     RegexOptions.IgnoreCase))
                {
                    entry.TextColor = Color.Green;
                }
                else
                    entry.TextColor = Color.Red;
            }
            else
                entry.TextColor = Color.Red;
        }

        protected override void OnDetachingFrom(Entry bindable)
        {
            base.OnDetachingFrom(bindable);
            bindable.TextChanged -= Bindable_TextChanged;
        }

    }
}

Consuming Behaviors

Now, consume your behavior in XAML UI Element. See the below sample.

Ex: xmlns:behaviors="clr-namespace:XamarinApp"

Add Namespace

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:TitleView="clr-namespace:XamarinApp.CustomView"
             xmlns:behaviors="clr-namespace:XamarinApp"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             mc:Ignorable="d" x:Class="XamarinApp.MainPage">

Add Attach property of Behavior in your XAML Control like below.

<Entry AutomationId="EntryPhoneNumber" Placeholder="Enter Phone Number" x:Name="entryPhoneNumber">
            <Entry.Behaviors>
                <behaviors:EntryBehaviour/>
            </Entry.Behaviors>
        </Entry>

Full Code

You can get the full UI code below.

MainPage.Xaml

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:TitleView="clr-namespace:XamarinApp.CustomView"
             xmlns:behaviors="clr-namespace:XamarinApp"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             mc:Ignorable="d" x:Class="XamarinApp.MainPage">

    <NavigationPage.TitleView>
      <TitleView:TitleView/>
    </NavigationPage.TitleView>

    <StackLayout Margin="0,50,0,0" VerticalOptions="StartAndExpand">
        <Image VerticalOptions="Center" Source="xamarinmonkeysbanner.png"/>
        
        <Entry AutomationId="EntryPhoneNumber" Placeholder="Enter Phone Number" x:Name="entryPhoneNumber">
            <Entry.Behaviors>
                <behaviors:EntryBehaviour/>
            </Entry.Behaviors>
        </Entry>
        
    </StackLayout>
</ContentPage>

Result

Conclusion

I hope you have understood how to use Behaviors in Xamarin.Forms App.

Thanks for reading. Please share your comments and feedback. Happy Coding :)