In Focus

Grid View In Xamarin.Forms Using FlowListView

In this article, you will learn about Grid View in Xamarin.Forms using FlowListView.

Grid View In Xamarin.Forms Using FlowListView
 

Introduction

In this tutorial, we will learn how to use FlowListView in Xamarin.Forms to create GridView. FlowListView is an awesome plugin that helps developers to achieve features like infinite loading, item tapped Command, item appearing event, item disappearing event and more.

Coding Part

Steps

I have split this part into 3 steps as in the following.

  • Step 1: Creating new Xamarin.Forms Projects.
  • Step 2: Setting up the plugin for Xamarin.Forms Application.
  • Step 3: Implementing GridView with FlowListView.

Step 1

  1. Create a New Project by selecting New >> Project >> Select Xamarin Cross-Platform App and click OK.

    Grid View In Xamarin.Forms Using FlowListView

  2. Then, select Android and iOS platforms as shown below with Code Sharing Strategy as PCL or .NET Standard and click OK.

    Grid View In Xamarin.Forms Using FlowListView

Step 2

  1. Open NuGet Package Manager against the solution and do search for FlowListView Plugin or paste the following NuGet package.

    Install-Package DLToolkit.Forms.Controls.FlowListView -Version 2.0.11
  1. Click "Install" to install this plugin against your PCL Project or .NET standard Project.
  2. We need to install this application in all client projects.

    Grid View In Xamarin.Forms Using FlowListView

Step 3

  1. Open “App.xaml.cs” or “App.cs” and add the following lines after the InitializeComponent function.
    1. public App()  
    2. {  
    3.    InitializeComponent();  
    4.    FlowListView.Init();  
    5.    MainPage = new MainPage();  
    6. }  
  1. Open your page, for example “MainPage”, and add the flowlistview reference in designer as like below.
    1. …  
    2. xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"  
    3. …  
  1. Implement the flowlistview like below.
    1. <flv:FlowListView FlowColumnCount="3"   
    2.                 SeparatorVisibility="Default"   
    3.                 HasUnevenRows="True"  
    4.                 FlowItemTappedCommand="{Binding ItemTappedCommand}"   
    5.                 FlowItemsSource="{Binding Items}">  
    6.   
    7.     <flv:FlowListView.FlowColumnTemplate>  
    8.         <DataTemplate>  
    9.             <Frame BackgroundColor="Purple"  
    10.                 Margin="5">  
    11.                 <Label HorizontalOptions="Fill"   
    12.                     VerticalOptions="Fill"   
    13.                     TextColor="White"  
    14.                     XAlign="Center"  
    15.                     YAlign="Center"   
    16.                     Text="{Binding }"/>  
    17.             </Frame>  
    18.         </DataTemplate>  
    19.     </flv:FlowListView.FlowColumnTemplate>  
    20. </flv:FlowListView>  
  1. Then, create a ViewModel for your Page and in my case, I have created a class named as “MainPageModel.cs” and inherit the class with BindableObject.
    1. public class MainPageModel : BindableObject  
    2. {  
    3.  …  
    4. }  
  1. Then, add the View Model to your page like below.
    1. public partial class MainPage : ContentPage  
    2. {  
    3.     MainPageModel pageModel;  
    4.     public MainPage()  
    5.     {  
    6.         InitializeComponent();  
    7.         pageModel = new MainPageModel(this);  
    8.         BindingContext = pageModel;  
    9.     }  
    10. }  

Full Code

MainPage.xaml

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"  
  5.              x:Class="FlowListViewSample.MainPage">  
  6.   
  7.     <StackLayout Padding="10">  
  8.         <flv:FlowListView FlowColumnCount="3"   
  9.                 SeparatorVisibility="Default"   
  10.                 HasUnevenRows="True"  
  11.                 FlowItemTappedCommand="{Binding ItemTappedCommand}"   
  12.                 FlowItemsSource="{Binding Items}">  
  13.   
  14.             <flv:FlowListView.FlowColumnTemplate>  
  15.                 <DataTemplate>  
  16.                     <Frame BackgroundColor="Purple"  
  17.                 Margin="5">  
  18.                         <Label HorizontalOptions="Fill"   
  19.                     VerticalOptions="Fill"   
  20.                     TextColor="White"  
  21.                     XAlign="Center"  
  22.                     YAlign="Center"   
  23.                     Text="{Binding }"/>  
  24.                     </Frame>  
  25.                 </DataTemplate>  
  26.             </flv:FlowListView.FlowColumnTemplate>  
  27.         </flv:FlowListView>  
  28.     </StackLayout>  
  29. </ContentPage>  

MainPage.xaml.cs

  1. using Xamarin.Forms;  
  2.   
  3. namespace FlowListViewSample  
  4. {  
  5.     public partial class MainPage : ContentPage  
  6.     {  
  7.         MainPageModel pageModel;  
  8.         public MainPage()  
  9.         {  
  10.             InitializeComponent();  
  11.             pageModel = new MainPageModel(this);  
  12.             BindingContext = pageModel;  
  13.         }  
  14.     }  
  15. }  

MainPageModel.cs

  1. using System.Collections.ObjectModel;  
  2. using Xamarin.Forms;  
  3.   
  4. namespace FlowListViewSample  
  5. {  
  6.     public class MainPageModel : BindableObject  
  7.     {  
  8.         private MainPage mainPage;  
  9.   
  10.         public MainPageModel(MainPage mainPage)  
  11.         {  
  12.             this.mainPage = mainPage;  
  13.             AddItems();  
  14.         }  
  15.   
  16.         private void AddItems()  
  17.         {  
  18.             for (int i = 0; i < 20; i++)  
  19.                 Items.Add(string.Format("List Item at {0}", i));  
  20.         }  
  21.   
  22.         private ObservableCollection<string> _items = new ObservableCollection<string>();  
  23.         public ObservableCollection<string> Items  
  24.         {  
  25.             get  
  26.             {  
  27.                 return _items;  
  28.             }  
  29.             set  
  30.             {  
  31.                 if (_items != value)  
  32.                 {  
  33.                     _items = value;  
  34.                     OnPropertyChanged(nameof(Items));  
  35.                 }  
  36.             }  
  37.         }  
  38.   
  39.         public Command ItemTappedCommand  
  40.         {  
  41.             get  
  42.             {  
  43.                 return new Command((data) =>  
  44.                 {  
  45.                     mainPage.DisplayAlert("FlowListView", data + """Ok");  
  46.                 });  
  47.             }  
  48.         }  
  49.     }  

Demo

Grid View In Xamarin.Forms Using FlowListView

Reference

Download Code

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