In order to display crowded data in a mobile application, a trendy cross-platform app development environment is just introduced an updated feature that will help the developers to cover the controls like a ListView, CollectionView, etc. It’s one of the great features in the Xamarin as it has in-built support for scrolling, layouts, and refresh options. Well, some of the time, the application does not require the full power of these controls. As instead of that a few applications just require the repetition of that controls. The repeating of categories for a particular session like page scrolling, profile photo, the icon is the better instance for the use of repeating controls.
The implementation of these repeat controls can be easily done with the utilization of a bindable layout in Xamarin.Forms.
Well, to use these bindable layouts, first of all, you need to understand the basic structure of it. A bindable layout for Xamarin was introduced Xamarin.Forms3.5 and is considered a hidden gem. These bindable layouts allow the developers to repeat the required controls of a mobile app under Xamarin.Forms environment using the ItemSource, ItemTemplate, and ItemTemplateSelector. Also, it will make you familiar with it when you use listview or CollectionView prior. The only single difference in the binding layout is how to bind content and how to set up the template to show the data on the application.
We know, every single Xamarin.Forms layout is a bindable layout, although it likes to use a StackLayout or FlexLayout as it has a feature to stack the controls easily.
Here I am using a horizontal StackLayout to bound to a strings list.
Let’s see how to use BindableLayout.ItemSource:
You can directly set the ItemSource to an IEnumerable in the code behind or ViewModel of your application using the below mentioned code:
// In code behind
public List<string> Items { get; } = new List<string> { “iOS”, “Android”, “UWP” };
// In XAML:
<StackLayout Orientation=”Horizontal”
VerticalOptions=”Start”
HorizontalOptions=”Center”
BindableLayout.ItemsSource=”{Binding Items}”>
</StackLayout>
Make a note that here we are using BindableLayout.ItemSource, which is an extension of the layout. Also, you can set the ItemSource in a direct way in XAML file of your project: like this,
<StackLayout Orientation=”Horizontal”
VerticalOptions=”Start”
HorizontalOptions=”Center”>
<BindableLayout.ItemsSource>
<x:Array Type=”{x:Type x:String}”>
<x:String>iOS</x:String>
<x:String>Android</x:String>
<x:String>UWP</x:String>
</x:Array>
</BindableLayout.ItemsSource>
</StackLayout>
BimndableLayout.ItemTemplate:
Now, here we are setting up the BimndableLayout.ItemTemplate which enable us to display the data as per our preference of display:
<StackLayout Orientation=”Horizontal”
VerticalOptions=”Start”
HorizontalOptions=”Center”
BindableLayout.ItemsSource=”{Binding Items}”>
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame WidthRequest=”75″
HeightRequest=”25″
CornerRadius=”25″
Padding=”0″
HasShadow=”True”>
<Label Text=”{Binding .}”
VerticalOptions=”Center”
HorizontalOptions=”Center”/>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
It’s all done, and with this now, the list of your crowded data is ready to display in a horizontal manner. Keep in mind a point that the content will not scroll with this code. If you want to add a content scrolling feature in your application, then you need to wrap up the code with the StackLayout in the ScrollView.
