Xamarin.Forms - Dynamic GridView

Introduction

This article demonstrates how to create Dynamic GridView using Xamarin.Forms. If you ever need to show something in a data-bound grid view that is not in your data source, just create that extra row dynamically.

Dynamic GridView

Dynamic GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted into the layout using a ListAdapter. This GridView will fill the entire screen. The attributes are rather self-explanatory. For more information about valid attributes, see the GridView reference.



Let's start

Step 1

Create a Xamarin.Forms app by going to File >> New >> Visual C# >> Cross Platform >> Cross platform app (Xamarin.Native or Xamarin.Forms) and click OK. Project Name :DynamicGrid



Now, select Blank App >> Xamarin.Forms >> .Portable Class Library and click OK.

Step 2

After the project creation, add the following Nuget Packages for your projects. Open Solution Explorer >> right click to solution explorer and select "Manage NuGet packages for the solution".

Now, select the following NuGet packages and followed by select your project then click to Install it.

• Xamarin.Forms update 2.5.0.121934.

Step 3

Next, open Solution Explorer >> Project Name(Portable) >> Right click to add >> New iteam . After that, open the Dialog Box Select Xamarin.Forms >> ContentPage and click ok (Page Name: DynamicGridpage ).



Step 4

Next, open Solution Explorer >> Project Name(Portable) >> DynamicGridPage.xaml. After that, open the Design View of this page. Just replace that the following code.

Grid View Name: gridLayout



Xaml Code

<?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:local="clr-namespace:DynamicGrid"
    x:Class="DynamicGrid.DynamicGridPage">

<Grid x:Name="gridLayout"></Grid>

</ContentPage>

Next, open Solution Explorer >> Project Name(Portable) >> DynamicGridPage.xaml >> DynamicGridPage.cs. After that, open the backend View of this page. Just replace that the following code.



14 line to 19 line Create an ArrayList and add product values, 21 to 25 line Define rows and columns.

Looping

C# for loop: The for keyword indicates a loop in C#. The for loop executes a block of statements repeatedly until the specified condition returns false. As per the syntax above, the for loop contains three parts: initialization, conditional expression, and steps, which are separated by a semicolon

• Two for loop and one if condition

A fist is looped by only rows and then second is looped by columns.



CS Code using

 Xamarin.Forms;
using System.Threading;
using System.Collections.Generic;

namespace DynamicGrid
{
    public partial class DynamicGridPage : ContentPage
    {
        private List<Product> productArrayList;

        public DynamicGridPage()
        {
            InitializeComponent();
            productArrayList = new List<Product>();
            productArrayList.Add(new Product { Name = "Mocca" });
            productArrayList.Add(new Product { Name = "Espresso" });
            productArrayList.Add(new Product { Name = "Latte" });
            productArrayList.Add(new Product { Name = "Americano" });
            productArrayList.Add(new Product { Name = "Arabica" });

            gridLayout.RowDefinitions.Add(new RowDefinition());
            gridLayout.RowDefinitions.Add(new RowDefinition());
            gridLayout.ColumnDefinitions.Add(new ColumnDefinition());
            gridLayout.ColumnDefinitions.Add(new ColumnDefinition());
            gridLayout.ColumnDefinitions.Add(new ColumnDefinition());

            var productIndex = 0;
            for (int rowIndex = 0; rowIndex < 2; rowIndex++)
            {
                for (int columnIndex = 0; columnIndex < 3; columnIndex++)
                {
                    if (productIndex >= productArrayList.Count)
                    {
                        break;
                    }
                    var product = productArrayList[productIndex];
                    productIndex += 1;
                    var label = new Label
                    {
                        Text = product.Name,
                        VerticalOptions = LayoutOptions.Center,
                        HorizontalOptions = LayoutOptions.Center
                    };
                    gridLayout.Children.Add(label, columnIndex, rowIndex);
                }
            }
        }
    }
}

Step 5

Next, Go to Solution Explorer >> Project Name (Portable) >> App.xaml >> App.xaml.cs click. Select the App page, The c-sharp code will appear, Just add that the following code.

Line 05 care full to handle, I have created xaml page. That name is DynamicGridPage

public App()
        {
            InitializeComponent();

            MainPage = new DynamicGridPage();  // this my xaml page just replace the your design page
        }

Step 6

After completing your work with the design view, go to " Build " menu and click open "Configure Manager ". In the popup window, configure your startup projects. Click F5 or Run your project. Given below is the result

Output

Summary

Now, you have successfully tested Dynamic GridView in Xamarin.Forms application for Cross-Platform Application Development using Visual C# and Xamarin.