Xamarin.Forms - DataGrid
Tags: datagridinxamarin, xamarin
Published: 2020-05-18 18:00:37

---
title: Xamarin.Forms - DataGrid
published: true
date: 2020-05-14 17:33:00 UTC
tags: Data Grid in Xamarin,DataGrid in Xamarin,DataGrid in Xamarin ,Xamarin
canonical_url: https://logeshpalani.blogspot.com/2020/05/xamarinforms-datagrid.html
---

<font size="4"><b>Introduction<span style="font-size: 14.6667px;"> </span></b></font>
                    The DataGrid is format or architecture to show a set of data in the user interface. In Xamarin Forms there is no default DataGrid control, so we need to install “Xamarin.Forms.DataGrid” dependency. 

  

[![](https://1.bp.blogspot.com/-hxIyiqGiI98/Xr1_GjABs5I/AAAAAAAAQu0/NZeWXFG63nonFIZPL-hoYzjWd_zJI52QQCK4BGAsYHg/w200-h400/WhatsApp%2BImage%2B2020-05-14%2Bat%2B10.54.29%2BPM.jpeg)](https://1.bp.blogspot.com/-hxIyiqGiI98/Xr1_GjABs5I/AAAAAAAAQu0/NZeWXFG63nonFIZPL-hoYzjWd_zJI52QQCK4BGAsYHg/WhatsApp%2BImage%2B2020-05-14%2Bat%2B10.54.29%2BPM.jpeg)

  

  

**Let’s start  :) **

create new Xamarin.Forms application in Visual Studio for Mac 

  

| [![](https://1.bp.blogspot.com/-MNero_4Qkfs/Xr14mCtgNXI/AAAAAAAAQt0/qOzCaN3guZE9TcHx5Q3CqZV-03zvXsdtgCK4BGAsYHg/w400-h287/Screenshot%2B2020-05-14%2Bat%2B10.00.06%2BPM.png)](https://1.bp.blogspot.com/-MNero_4Qkfs/Xr14mCtgNXI/AAAAAAAAQt0/qOzCaN3guZE9TcHx5Q3CqZV-03zvXsdtgCK4BGAsYHg/Screenshot%2B2020-05-14%2Bat%2B10.00.06%2BPM.png) |
| New Xamarin.Forms |

  

Once Project created, install “Xamarin.Forms.DataGrid” dependency by going, the Solution Explorer >> right-click and select “Manage NuGet Packages” >> in the new dialog, top right corner search “Xamarin.Forms.DataGrid” and Install it. 

| [![](https://1.bp.blogspot.com/-mmQ8AwBVzMg/Xr149o2_pLI/AAAAAAAAQuI/E92NNCHfSjsT9uFUn7KPUZIvGS2JEe73ACK4BGAsYHg/w400-h263/Screenshot%2B2020-05-14%2Bat%2B9.59.30%2BPM.png)](https://1.bp.blogspot.com/-mmQ8AwBVzMg/Xr149o2_pLI/AAAAAAAAQuI/E92NNCHfSjsT9uFUn7KPUZIvGS2JEe73ACK4BGAsYHg/Screenshot%2B2020-05-14%2Bat%2B9.59.30%2BPM.png) |
| Nuget Package Install |

Create an MVVM folder structure, create a Professional.cs model class under the Model folder. For that, open Solution Explorer >> right-click the Model folder and select Add > new class and give name as Professional.cs. The class code is given below. 
  
{% gist https://gist.github.com/logeshpalani98/11dab70feabca4d06beee2753e5c3725 %}
  

Now, create another DummyProfessionalData.cs class under the Utils folder for dummy data. This class used for creating dummy data and code is given here. 

  
{% gist https://gist.github.com/logeshpalani98/c37cccef8e6bcf368c1cdf9d08737355 %} 

 

Next, Create MainPageViewModel.cs class under ViewModel folder and write given below code. Here, List and IsRefreshing properties and refresh commend are written, and when the user swipe top to bottom, the refresh command will execute and refresh the UI with updated data. INotifyPropertyChanged property also implemented to invoke the UI with new Data. The Professional Property for single data selection.  

  

  
{% gist https://gist.github.com/logeshpalani98/aee34adea55ccad3b503431f3dd43ea9 %}  

After that open MainPage.xaml page and start our UI design. First, we call DataGrid namespace as dg and design our columns with Title, bind the PropertyName, width size. Bind ItemSource, SelectedItem, refershCommand. This page design code is given below.  

  

  
{% gist https://gist.github.com/logeshpalani98/1e525b4b0a4854f27dc3f23fd3538150 %}

Next open MainPage.xaml.cs and set BindingContext is MainPageViewModel as we done already. The source code here.  

  

  
{% gist https://gist.github.com/logeshpalani98/af71b25a8ff635e18dee9b519b965530 %}  

Finally, initialize DataComponent in App Startup of App.xaml.cs class as below code.  

  

  
{% gist https://gist.github.com/logeshpalani98/a2ee5b8391b113568684ea88c91f6545 %} 

Now, run your application and output like the below screenshot. 

[![](https://1.bp.blogspot.com/-ERC8Gr7r5_w/Xr1_BvYP37I/AAAAAAAAQuo/A2IiGDl8XzAASEUVPtWaQmzvBbmfNoBUQCK4BGAsYHg/w200-h400/WhatsApp%2BImage%2B2020-05-14%2Bat%2B10.54.29%2BPM.jpeg)](https://1.bp.blogspot.com/-ERC8Gr7r5_w/Xr1_BvYP37I/AAAAAAAAQuo/A2IiGDl8XzAASEUVPtWaQmzvBbmfNoBUQCK4BGAsYHg/WhatsApp%2BImage%2B2020-05-14%2Bat%2B10.54.29%2BPM.jpeg)

  

 The Full Source Code is here - [GitHub](https://github.com/logeshpalani98/Xamarin.Forms-Samples)

  

**<font size="4">Conclusion</font>**

                I hope you all understand how to use DataGrid in Xamarin.Forms and this blog is helpful for all and thanks for reading
  

 <style type="text/css"> p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #dca10d} </style>