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 :)