Xamarin.Forms - EventToCommand Behavior in MVVM ViewModel

In this blog post, you will learn how to use Appearing and Disappearing in MVVM ViewModel using EventToCommand Behaviour 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.

EventToCommand Behaviour

EventToCommandBehavior class is a reusable Xamarin.Forms custom behavior that executes a command in response to any event firing.

Following behavior properties must be set to use the EventToCommand behavior:

1. EventName – the name of the event the behavior listens to(Ex: Apperaing).
2. Command – the ICommand to be executed. The behavior expects to find the ICommand instance on the BindingContext of the attached control, which may be inherited from a parent element.

Prerequisites

• Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

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

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

Create BehaviourBase Class 

Now, Create a Behaviour Base class Derived from Behavior and BindableObject

BehavourBase.cs

	public class BehaviorBase<T>: Behavior<T> where T : BindableObject
	{
	public T AssociatedObject { get; private set; }
	protected override void OnAttachedTo(T bindable)
	{
	base.OnAttachedTo(bindable);
	AssociatedObject = bindable;
	if (bindable.BindingContext != null)
	BindingContext = bindable.BindingContext;
	bindable.BindingContextChanged += OnBindingContextChanged;
	}
	protected override void OnDetachingFrom(T bindable)
	{
	base.OnDetachingFrom(bindable);
	bindable.BindingContextChanged -= OnBindingContextChanged;
	AssociatedObject = null;
	}
	void OnBindingContextChanged(object sender, EventArgs e)
	{
	OnBindingContextChanged();
	}
	protected override void OnBindingContextChanged()
	{
	base.OnBindingContextChanged();
	BindingContext = AssociatedObject.BindingContext;
	}
	}

view raw BehavourBase.cs hosted with ❤ by GitHub

Create EventToCommand Behaviour

Here, Create a EventToCommand Behaviour Class to convert your events to Commad and also implement bindable properties.

1. EventName
2. Command

EventToCommandBehaviour.cs

	public class EventToCommandBehavior: BehaviorBase<VisualElement>
	{
	Delegate eventHandler;
	public static readonly BindableProperty EventNameProperty = BindableProperty.Create("EventName", typeof(string), typeof(EventToCommandBehavior), null, propertyChanged: OnEventNameChanged);
	public static readonly BindableProperty CommandProperty = BindableProperty.Create("Command", typeof(ICommand), typeof(EventToCommandBehavior), null);
	public string EventName
	{
	get { return (string)GetValue(EventNameProperty); }
	set { SetValue(EventNameProperty, value); }
	}
	public ICommand Command
	{
	get { return (ICommand)GetValue(CommandProperty); }
	set { SetValue(CommandProperty, value); }
	}
	protected override void OnAttachedTo(VisualElement bindable)
	{
	base.OnAttachedTo(bindable);
	RegisterEvent(EventName);
	}
	protected override void OnDetachingFrom(VisualElement bindable)
	{
	DeregisterEvent(EventName);
	base.OnDetachingFrom(bindable);
	}
	static void OnEventNameChanged(BindableObject bindable, object oldValue, object newValue)
	{
	var behavior = (EventToCommandBehavior)bindable;
	if (behavior.AssociatedObject == null) return;
	string oldEventName = (string)oldValue;
	string newEventName = (string)newValue;
	behavior.DeregisterEvent(oldEventName);
	behavior.RegisterEvent(newEventName);
	}
	void RegisterEvent(string name)
	{
	if (string.IsNullOrWhiteSpace(name)) return;
	EventInfo eventInfo = AssociatedObject.GetType().GetRuntimeEvent(name);
	if (eventInfo == null)
	throw new ArgumentException(string.Format("EventToCommandBehavior: Can't register the '{0}' event.", EventName));
	MethodInfo methodInfo = typeof(EventToCommandBehavior).GetTypeInfo().GetDeclaredMethod("OnEvent");
	eventHandler = methodInfo.CreateDelegate(eventInfo.EventHandlerType, this);
	eventInfo.AddEventHandler(AssociatedObject, eventHandler);
	}
	void DeregisterEvent(string name)
	{
	if (string.IsNullOrWhiteSpace(name) || eventHandler == null)
	return;
	EventInfo eventInfo = AssociatedObject.GetType().GetRuntimeEvent(name);
	if (eventInfo == null)
	throw new ArgumentException(string.Format("EventToCommandBehavior: Can't de-register the '{0}' event.", EventName));
	eventInfo.RemoveEventHandler(AssociatedObject, eventHandler);
	eventHandler = null;
	}
	void OnEvent(object sender, object eventArgs)
	{
	if (Command == null) return;
	object resolvedParameter;
	resolvedParameter = eventArgs;
	if (Command.CanExecute(resolvedParameter))
	Command.Execute(resolvedParameter);
	}
	}

view raw EventToCommandBehaviour.cs hosted with ❤ by GitHub

BaseViewModel

In this step, I Create a common BaseViewModel for reusable purpose.

Note: I use RelayCommand Instead of Command. you can use Command.

Refresh

Refresh command indicate to Appearing Commad. Whatever you want to implement when page load time you can use RefrehCommad.

CleanUp

Cleanup command indicate to OnDisapearing. This CleanUpCommand when your page is dis appearing time it will be called.

BaseViewModel.cs

	public class BaseViewModel : ViewModelBase
	{
	#region Fields
	private RelayCommand _refreshCommand;
	private RelayCommand _cleanupCommand;
	#endregion
	#region Properties
	public RelayCommand RefreshCommand
	{
	get
	{
	return _refreshCommand ?? (_refreshCommand = new RelayCommand(this.Refresh));
	}
	}
	public RelayCommand CleanupCommand
	{
	get
	{
	return _cleanupCommand ?? (_cleanupCommand = new RelayCommand(this.Cleanup));
	}
	}
	#endregion
	#region Methods
	public virtual void Refresh()
	{
	}
	public override void Cleanup()
	{
	base.Cleanup();
	}
	#endregion
	}

view raw BaseViewModel.cs hosted with ❤ by GitHub

MainPageViewModel

Now, Use Refresh and CleanUp command from BaseViewMmodel in your Pages.

MainPageViewModel.cs

	public class MainPageViewModel:BaseViewModel
	{
	#region Fields
	private ObservableCollection<Person> _persons;
	#endregion
	#region Constructor
	public MainPageViewModel()
	{
	}
	#endregion
	#region Properties
	public ObservableCollection<Person> Persons
	{
	get { return _persons; }
	set { Set(() => Persons, ref _persons, value); }
	}
	#endregion
	#region Methods
	public override void Refresh()
	{
	base.Refresh();
	this.Persons = new ObservableCollection<Person>();
	this.Persons.Add(new Person { PersonId = 1, Name = "Smith", Age = 22 });
	this.Persons.Add(new Person { PersonId = 2, Name = "Delpin", Age = 23 });
	this.Persons.Add(new Person { PersonId = 1, Name = "Raj", Age = 20 });
	this.Persons.Add(new Person { PersonId = 1, Name = "John", Age = 25 });
	}
	public override void Cleanup()
	{
	this.Persons = null;
	base.Cleanup();
	}
	#endregion
	}

view raw MainPageViewModel.cs hosted with ❤ by GitHub

Setting up the User Interface

Here, Implement EventToCommandBehaviour in your View.

Add Namespace

xmlns:behaviors="clr-namespace:XamarinStudy.Common.Behaviors"

view raw MainPage.xaml hosted with ❤ by GitHub

Add Behaviour

	<ContentPage.Behaviors>
	<behaviors:EventToCommandBehavior EventName="Appearing" Command="{Binding RefreshCommand}"/>
	<behaviors:EventToCommandBehavior EventName="Disappearing" Command="{Binding CleanupCommand}"/>
	</ContentPage.Behaviors>

view raw MainPage.xaml hosted with ❤ by GitHub

MainPage.Xaml 

	<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"
	mc:Ignorable="d"
	xmlns:behaviors="clr-namespace:XamarinStudy.Common.Behaviors"
	x:Class="XamarinStudy.MainPage" Title="Bindable Layout">
	<ContentPage.Behaviors>
	<behaviors:EventToCommandBehavior EventName="Appearing" Command="{Binding RefreshCommand}"/>
	<behaviors:EventToCommandBehavior EventName="Disappearing" Command="{Binding CleanupCommand}"/>
	</ContentPage.Behaviors>
	<StackLayout x:Name="PersonList" BindableLayout.ItemsSource="{Binding Persons}" HorizontalOptions="FillAndExpand">
	<BindableLayout.ItemTemplate>
	<DataTemplate>
	<StackLayout Spacing="10" >
	<Label Margin="20,0" Text="{Binding Name}"/>
	<Label Margin="20,0" Text="{Binding Age}"/>
	<BoxView HeightRequest="1" BackgroundColor="Black"/>
	<StackLayout.GestureRecognizers>
	<TapGestureRecognizer Command="{Binding BindingContext.SelectPersonCommand,Source={x:Reference PersonList}}" CommandParameter="{Binding PersonId}"/>
	</StackLayout.GestureRecognizers>
	</StackLayout>
	</DataTemplate>
	</BindableLayout.ItemTemplate>
	</StackLayout>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Click the "Play" button to try it out.

I hope you have understood how to use Appearing and Disappearing in MVVM ViewModel using EventToCommand Behaviour in Xamarin.Forms..

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

Xamarin.Forms - Bindable Layout

In this blog post, you will learn how to use Bindable Layout 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.

Bindable Layout

Bindable layouts enable any layout class that derives from the Layout<T> class to generate its content by binding to a collection of items, with the option to set the appearance of each item with a DataTemplate. Bindable Layout it's like a ListView.

Bindable Layout Attached properties.

1. ItemsSource – Gets sets the collection of IEnumerable items to template and display.
2. ItemDataTemplate – Gets sets DataTemplate to apply to each item in the collection of items displayed layout.
3. ItemTemplateSelector – DataTemplateSelector that will be used to choose a DataTemplate for an item at runtime.

Prerequisites

• Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

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

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

Bindable Layout

Lets start with how to use Bindable layout in your app instead of listview.

Use Bindable Layout

In this step, use bindable layout in Stacklayout.

MainPage.XAML

	<StackLayout x:Name="PersonList" BindableLayout.ItemsSource="{Binding Persons}" HorizontalOptions="FillAndExpand">
	<BindableLayout.ItemTemplate>
	<DataTemplate>
	<StackLayout Spacing="10" >
	<Label Margin="20,0" Text="{Binding Name}"/>
	<Label Margin="20,0" Text="{Binding Age}"/>
	<BoxView HeightRequest="1" BackgroundColor="Black"/>
	<StackLayout.GestureRecognizers>
	<TapGestureRecognizer Command="{Binding BindingContext.SelectPersonCommand,Source={x:Reference PersonList}}" CommandParameter="{Binding PersonId}"/>
	</StackLayout.GestureRecognizers>
	</StackLayout>
	</DataTemplate>
	</BindableLayout.ItemTemplate>
	</StackLayout>

view raw MainPage.XAML hosted with ❤ by GitHub

Create a Model

Now, Create a simple model to create a collection.

Person.cs

	public class Person
	{
	public int PersonId { get; set; }
	public string Name { get; set; }
	public int Age { get; set; }
	}

view raw Person.cs hosted with ❤ by GitHub

Create a ViewModel

In this step, create a viewmodel to bind the collection to bindable layout.

MainPageViewModel.cs

	public class MainPageViewModel:BaseViewModel
	{
	#region Fields
	private ObservableCollection<Person> _persons;
	private Command<int> _selectPersonCommand;
	#endregion
	#region Constructor
	public MainPageViewModel()
	{
	this.Persons = new ObservableCollection<Person>();
	this.Persons.Add(new Person { PersonId = 1, Name = "Smith", Age = 22 });
	this.Persons.Add(new Person { PersonId = 2, Name = "Delpin", Age = 23 });
	this.Persons.Add(new Person { PersonId = 1, Name = "Raj", Age = 20 });
	this.Persons.Add(new Person { PersonId = 1, Name = "John", Age = 25 });
	}
	#endregion
	#region Properties
	public ObservableCollection<Person> Persons
	{
	get { return _persons; }
	set { Set(() => Persons, ref _persons, value); }
	}
	public Command<int> SelectPersonCommand
	{
	get
	{
	return _selectPersonCommand ?? (_selectPersonCommand = new Command<int>((id) =>
	{
	Application.Current.MainPage.DisplayAlert("Selected Peron", "Person id : " + id.ToString(), "Ok");
	}));
	}
	}
	#endregion
	}

view raw MainPageViewModel.cs hosted with ❤ by GitHub

Selected Item

Use GestureRecognizers for select item from collection, because bindable layout have no ItemSelected event.

MainPage.Xaml

	<StackLayout.GestureRecognizers>
	<TapGestureRecognizer Command="{Binding BindingContext.SelectPersonCommand,Source={x:Reference PersonList}}" CommandParameter="{Binding PersonId}"/>
	</StackLayout.GestureRecognizers>

view raw MainPage.xaml hosted with ❤ by GitHub

MainPageViewModel.cs

	public Command<int> SelectPersonCommand
	{
	get
	{
	return _selectPersonCommand ?? (_selectPersonCommand = new Command<int>((id) =>
	{
	Application.Current.MainPage.DisplayAlert("Selected Peron", "Person id : " + id.ToString(), "Ok");
	}));
	}
	}

view raw MainPageViewModel.cs hosted with ❤ by GitHub

Try it out.

I hope you have understood how to use Bindable Layout in Xamarin.Forms..

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