Xamarin Form Collection View Sample

Github url :  https://github.com/mistrypragnesh40/CollectionViewDemo

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"
             x:Class="CollectionViewDemo.MainPage">
 
    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Collection View Sample" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Button Text="Collection View With Linear Items Layout" Clicked="Button_Clicked" />
        <Button Text="Collection View With Grid Items Layout" Clicked="Button_Clicked_1" />
    </StackLayout>
 
</ContentPage>
 

MainPage.xaml.cs

using CollectionViewDemo.Views;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
 
namespace CollectionViewDemo
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        //CollectionView with Linear Layouts
        private void Button_Clicked(object sender, EventArgs e)
        {
            App.Current.MainPage.Navigation.PushAsync(new EmployeeDetailPage());
        }
 
        //CollectionView with Grid Item Layouts
        private void Button_Clicked_1(object sender, EventArgs e)
        {
            App.Current.MainPage.Navigation.PushAsync(new EmployeeDetailPage1());
        }
    }
}
 

Views

EmployeeDetailpPge.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"
             Title="Collection View Sample"
             x:Class="CollectionViewDemo.Views.EmployeeDetailPage">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Margin="10">
                <Label Text="Collection View With Linear Items Layout" FontSize="Medium" FontAttributes="Bold" />
                <Label Text="Note:- ByDefaulte CollectionView Item Layout is Linear Item Layout and Orientation is Vertical" TextColor="Red" FontSize="Small" />
                <CollectionView ItemsSource="{Binding EmployeeDetails}" HeightRequest="400">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Vertical" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Margin="10">
                                    <Label >
                                        <Label.FormattedText>
                                            <FormattedString>
                                            <Span Text="Name:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding FirstName}" />
                                                <Span Text=" " />
                                               <Span Text="{Binding LastName}" />
                                            </FormattedString>
                                        </Label.FormattedText>
                                    </Label>
                                    <Label >
                                        <Label.FormattedText>
                                            <FormattedString>
                                                <Span Text="Email:- "  FontAttributes="Bold"/>
                                                <Span Text="{Binding Email}" />
                                            </FormattedString>
                                        </Label.FormattedText>
                                </Label>
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Country:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding Country}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <Label Margin="0,20,0,0" Text="Collection View With Linear Item Layout and Horizontal Orientation" FontSize="Medium" FontAttributes="Bold" />
                <CollectionView  ItemsSource="{Binding EmployeeDetails}" HeightRequest="200">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Margin="10">
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Name:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding FirstName}" />
                                            <Span Text=" " />
                                            <Span Text="{Binding LastName}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Email:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding Email}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Country:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding Country}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </ScrollView>
 
    </ContentPage.Content>
</ContentPage>

EmployeeDetailPage1.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"
             Title="Collection View Sample"
             x:Class="CollectionViewDemo.Views.EmployeeDetailPage1">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Margin="10">
                <Label Text="Collection View With Grid Items Layout" FontSize="Medium" FontAttributes="Bold" />
                <Label Text="Note:- In Grid Items Layout Orientation is Mandatory" TextColor="Red" FontSize="Small" />
                <Label Text="Span 2 Means: Record are Devided in Two Columns " TextColor="Red" FontSize="Small" />
                <CollectionView ItemsSource="{Binding EmployeeDetails}" HeightRequest="300">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical"  Span="2"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Margin="10">
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Name:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding FirstName}" />
                                            <Span Text=" " />
                                            <Span Text="{Binding LastName}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Email:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding Email}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Country:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding Country}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <Label Margin="0,20,0,0" Text="Collection View With Grid Items Layout and Horizontal Orientation" FontSize="Medium" FontAttributes="Bold" />
                <Label Text="Span 2 Means: Record are Devided in Two Row " TextColor="Red" FontSize="Small" />
                <CollectionView  ItemsSource="{Binding EmployeeDetails}" HeightRequest="200">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Horizontal" Span="2" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Margin="10">
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Name:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding FirstName}" />
                                            <Span Text=" " />
                                            <Span Text="{Binding LastName}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Email:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding Email}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                                <Label >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="Country:- "  FontAttributes="Bold"/>
                                            <Span Text="{Binding Country}" />
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

ViewModels

EmployeeDetailViewModel.cs

using CollectionViewDemo.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
 
namespace CollectionViewDemo.ViewModel
{
    public class EmployeeDetailViewModel 
    {
        public ObservableCollection<EmployeeModel> EmployeeDetails { get; set; }
        public EmployeeDetailViewModel()
        {
            EmployeeDetails = new ObservableCollection<EmployeeModel>();
            EmployeeModel obj = new EmployeeModel();
            obj.FirstName = "Nirav";
            obj.LastName = "Tailor";
            obj.Email = "abc@gmail.com";
            obj.Country = "India";
            EmployeeDetails.Add(obj);
 
            obj = new EmployeeModel();
            obj.FirstName = "Sachin";
            obj.LastName = "Shinde";
            obj.Email = "abc@gmail.com";
            obj.Country = "India";
            EmployeeDetails.Add(obj);
 
 
            obj = new EmployeeModel();
            obj.FirstName = "Janani";
            obj.LastName = "Mistry";
            obj.Email = "abc@gmail.com";
            obj.Country = "India";
            EmployeeDetails.Add(obj);
 
 
            obj = new EmployeeModel();
            obj.FirstName = "Vishal";
            obj.LastName = "Makvana";
            obj.Email = "abc@gmail.com";
            obj.Country = "India";
            EmployeeDetails.Add(obj);
 
 
            obj = new EmployeeModel();
            obj.FirstName = "Ashwin";
            obj.LastName = "Mulay";
            obj.Email = "abc@gmail.com";
            obj.Country = "India";
            EmployeeDetails.Add(obj);
 
 
            obj = new EmployeeModel();
            obj.FirstName = "Viral";
            obj.LastName = "Mistry";
            obj.Email = "abc@gmail.com";
            obj.Country = "India";
            EmployeeDetails.Add(obj);
 
 
            obj = new EmployeeModel();
            obj.FirstName = "Krishna";
            obj.LastName = "Lad";
            obj.Email = "abc@gmail.com";
            obj.Country = "India";
            EmployeeDetails.Add(obj);
 
        }
    }
}
 

Models

EmployeeModel.cs

using System;
using System.Collections.Generic;
using System.Text;
 
namespace CollectionViewDemo.Model
{
    public class EmployeeModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Country { get; set; }
        public string State { get; set; }
        public string City { get; set; }
        public string Email { get; set; }
    }
}