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 facilitates developer 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.

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

Step 1: Creating new Xamarin.Forms Projects

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

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 plugin for Xamarin.Forms Application

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

Click Install to install this Plugin against your PCL Project or .NET standard Project.

We need to install this application in all client projects.

Step 3: Implementing GridView with FlowListView

1. Open “App.xaml.cs” or “App.cs” and add the following line after InitializeComponent function.

   public App()
   {
      InitializeComponent();
      FlowListView.Init();
      MainPage = new MainPage();
   }

2. Open your Page for example “MainPage” and add the flowlistview reference in designer as like below.

   …
   xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
   …

3. Implement the flowlistview like below.

   <flv:FlowListView FlowColumnCount="3" 
                   SeparatorVisibility="Default" 
                   HasUnevenRows="True"
                   FlowItemTappedCommand="{Binding ItemTappedCommand}" 
                   FlowItemsSource="{Binding Items}">
   
       <flv:FlowListView.FlowColumnTemplate>
           <DataTemplate>
               <Frame BackgroundColor="Purple"
                   Margin="5">
                   <Label HorizontalOptions="Fill" 
                       VerticalOptions="Fill" 
                       TextColor="White"
                       XAlign="Center"
                       YAlign="Center" 
                       Text="{Binding }"/>
               </Frame>
           </DataTemplate>
       </flv:FlowListView.FlowColumnTemplate>
   </flv:FlowListView>

4. Then create a ViewModel for your Page and in my case I have created a class named as “MainPageModel.cs” and inherits the class with BindableObject.

   public class MainPageModel : BindableObject
   {
    …
   }

5. Then add the view model to your page like below

   public partial class MainPage : ContentPage
   {
       MainPageModel pageModel;
       public MainPage()
       {
           InitializeComponent();
           pageModel = new MainPageModel(this);
           BindingContext = pageModel;
       }
   }

Full Code:

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             x:Class="FlowListViewSample.MainPage">

    <StackLayout Padding="10">
        <flv:FlowListView FlowColumnCount="3" 
                SeparatorVisibility="Default" 
                HasUnevenRows="True"
                FlowItemTappedCommand="{Binding ItemTappedCommand}" 
                FlowItemsSource="{Binding Items}">

            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <Frame BackgroundColor="Purple"
                Margin="5">
                        <Label HorizontalOptions="Fill" 
                    VerticalOptions="Fill" 
                    TextColor="White"
                    XAlign="Center"
                    YAlign="Center" 
                    Text="{Binding }"/>
                    </Frame>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>
    </StackLayout>

</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;

namespace FlowListViewSample
{
    public partial class MainPage : ContentPage
    {
        MainPageModel pageModel;
        public MainPage()
        {
            InitializeComponent();
            pageModel = new MainPageModel(this);
            BindingContext = pageModel;
        }
    }
}

MainPageModel.cs

using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace FlowListViewSample
{
    public class MainPageModel : BindableObject
    {
        private MainPage mainPage;

        public MainPageModel(MainPage mainPage)
        {
            this.mainPage = mainPage;
            AddItems();
        }

        private void AddItems()
        {
            for (int i = 0; i < 20; i++)
                Items.Add(string.Format("List Item at {0}", i));
        }

        private ObservableCollection _items = new ObservableCollection();
        public ObservableCollection Items
        {
            get
            {
                return _items;
            }
            set
            {
                if (_items != value)
                {
                    _items = value;
                    OnPropertyChanged(nameof(Items));
                }
            }
        }

        public Command ItemTappedCommand
        {
            get
            {
                return new Command((data) =>
                {
                    mainPage.DisplayAlert("FlowListView", data + "", "Ok");
                });
            }
        }
    }
}

Demo:

Reference

FlowListView for Xamarin.Forms

https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView/

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.