Post
Ask Question

Xamarin Community Toolkit - Behaviors

Introduction

In this post, we are going to learn the behaviors offered in the Xamarin Community Toolkit and how we use them. This post is a part of Xamarin Community Toolkit - Tutorial Series, visit the post to know about the Xamarin Community Toolkit. The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF, and Universal Windows Platform (UWP) apps using Xamarin.Forms. 

Coding Part
 

Steps

  1. Step 1: Creating new Xamarin.Forms Projects.
  2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
  3. Step 3: Implementation of Behaviors using Xamarin Community Toolikit.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New Project => Select Xamarin Cross Platform App and Click OK.

Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the scanner in Xamarin.Forms .Net Standard Project

In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right clicking the solution and select “Manage Nuget Packages”.
     
     
  • Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

Step 3: Implementation of Behaviors using Xamarin Community Toolikit.

In this step, we will see how to implement and use the behaviors offered in Xamarin Community Toolkit. Here, we have explained the implementation of Important behaviors with the registration form.

Open your XAML design file and add the following namespace to utilise the views in the screen.

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

Registration Form

Create a form like in the following screen, which contains entries to get username, email, phone number and age.

SetFocusOnEntryCompletedBehavior

The behavior gives focus to a specified visual element when an entry is completed. For example, a page might have several entries in sequence, and it would be convenient for the user if completing an entry automatically switched focus to the next entry.

Code Part

<Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_email}" 
	x:Name="ent_name" 
	Placeholder="Username"/>
<Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_phone}"
	x:Name="ent_email"
	Placeholder="Email"/>

EmailValidationBehavior

The behavior allows users to determine whether or not text input is a valid e-mail address. For example, an Entry control can be styled differently depending on whether a valid or an invalid e-mail address is provided. The validation is achieved through a regular expression that is used to verify whether or not the text input is a valid e-mail address. It offers 2 properties "InvalidStyle" and "ValidStyle" will be applied based on this behavior output.

Code Part

<Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_phone}"
	   x:Name="ent_email"
	   Placeholder="Email">
	<Entry.Behaviors>
		<xct:EmailValidationBehavior
			InvalidStyle="{StaticResource InvalidEntryStyle}"
			ValidStyle="{StaticResource ValidEntryStyle}"
			DecorationFlags="Trim"/>
	</Entry.Behaviors>
</Entry>

MaskedBehavior

The behavior allows the user to define an input mask for data entry. Adding this behavior to an Entry control will force the user to input only values that match a given mask. Examples of its usage include input of a credit card number or a phone number with country code.

Code Part

<Entry x:Name="ent_phone"
	   Placeholder="Mobile Number"
	   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_age}">
	<Entry.Behaviors>
		<xct:MaskedBehavior 
			Mask="+AA-AAAAA-AAAAA" 
			UnMaskedCharacter="A"/>
	</Entry.Behaviors>
</Entry>

NumericValidationBehavior

The behavior allows the user to determine if text input is a valid numeric value. For example, an Entry control can be styled differently depending on whether a valid or an invalid numeric input is provided

Code Part

<Entry x:Name="ent_age"
	   Placeholder="Age"
	   MaxLength="2"
	   Keyboard="Numeric"
	   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference btn_submit}">
	<Entry.Behaviors>
		<xct:NumericValidationBehavior 
			MaximumValue="35"
			InvalidStyle="{StaticResource InvalidEntryStyle}"/>
	</Entry.Behaviors>
</Entry>

MaxLengthReachedBehavior

The behavior allows the user to trigger an action when a user has reached the maximum length allowed on an Entry. It can either trigger a Command or an event depending on the user scenario.

Code Part

<Entry x:Name="ent_age"
	   Placeholder="Age"
	   MaxLength="2"
	   Keyboard="Numeric"
	   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference btn_submit}">
	<Entry.Behaviors>
		<xct:MaxLengthReachedBehavior 
			MaxLengthReached="MaxLengthReachedBehavior_MaxLengthReached"
			ShouldDismissKeyboardAutomatically="True"/>
	</Entry.Behaviors>
</Entry>

AnimationBehavior

The behavior allows the user to add an animation when an event is raised. It offers various built-in animations such as fade, flip and scale. These are exposed through an instance of the AnimationBase class.

Code Part

<Button Text="Submit"
		x:Name="btn_submit">
	<Button.Behaviors>
		<xct:AnimationBehavior EventName="Clicked">
			<xct:AnimationBehavior.AnimationType>
				<xct:FadeAnimation
		Easing="{x:Static Easing.SinInOut}"
		Duration="1000"/>
			</xct:AnimationBehavior.AnimationType>
		</xct:AnimationBehavior>
	</Button.Behaviors>
</Button>

Full Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinCommunityToolkit.BehavioursSample">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Entry" x:Key="InvalidEntryStyle">
                <Setter Property="TextColor" Value="Red"/>
            </Style>
            <Style TargetType="Entry" x:Key="ValidEntryStyle">
                <Setter Property="TextColor" Value="Green"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="20"
                     VerticalOptions="Center">

            <Label Text="Register Here..!"
                   TextColor="Orange"
                   FontSize="Title"
                   HorizontalOptions="Center"
                   Margin="0,0,0,10"/>

            <Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_email}"
                   x:Name="ent_name"
                   Placeholder="Username"/>
            <Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_phone}"
                   x:Name="ent_email"
                   Placeholder="Email">
                <Entry.Behaviors>
                    <xct:EmailValidationBehavior
                        InvalidStyle="{StaticResource InvalidEntryStyle}"
                        ValidStyle="{StaticResource ValidEntryStyle}"
                        DecorationFlags="Trim"/>
                </Entry.Behaviors>
            </Entry>
            <Entry x:Name="ent_phone"
                   Placeholder="Mobile Number"
                   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_age}">
                <Entry.Behaviors>
                    <xct:MaskedBehavior 
                        Mask="+AA-AAAAA-AAAAA" 
                        UnMaskedCharacter="A"/>
                </Entry.Behaviors>
            </Entry>
            <Entry x:Name="ent_age"
                   Placeholder="Age"
                   MaxLength="2"
                   Keyboard="Numeric"
                   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference btn_submit}">
                <Entry.Behaviors>
                    <xct:NumericValidationBehavior 
                        MaximumValue="35"
                        InvalidStyle="{StaticResource InvalidEntryStyle}"/>
                    <xct:MaxLengthReachedBehavior 
                        MaxLengthReached="MaxLengthReachedBehavior_MaxLengthReached"
                        ShouldDismissKeyboardAutomatically="True"/>
                </Entry.Behaviors>
            </Entry>
            <Button Text="Submit"
                    x:Name="btn_submit">
                <Button.Behaviors>
                    <xct:AnimationBehavior EventName="Clicked">
                        <xct:AnimationBehavior.AnimationType>
                            <xct:FadeAnimation
                    Easing="{x:Static Easing.SinInOut}"
                    Duration="1000"
                />
                        </xct:AnimationBehavior.AnimationType>
                    </xct:AnimationBehavior>
                </Button.Behaviors>
            </Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

The XCT offering multiple behaviors and please visit the below link for more samples.
https://github.com/xamarin/XamarinCommunityToolkit/tree/main/samples/XCT.Sample/Pages/Behaviors

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.


Similar Articles