Create a Solution with the DevExpress Grid Component in Visual Studio

This topic explains how to create a new Xamarin.Forms cross-platform solution in Visual Studio, and how to add the DevExpress Grid component to your application using the DevExpress Grid NuGet package.

Create a Solution

  1. Start Visual Studio 2017 and select File | New | Project... in the main menu. In the invoked New Project dialog, switch to the Visual C# | Cross-Platform section and select the Mobile App (Xamarin.Forms) project template. Name the solution HelloGrid and click OK.

    Grid_VisualStudio17_NewProject_18_1_2

  2. In the New Cross Platform App dialog, click Blank App, select Android and iOS platforms, and set .NET Standard as the code sharing strategy. Click OK

    Grid_VisualStudio17_NewCrossPlatformApp_18_1_2

The newly created solution contains the following projects:

  • HelloGrid - A class library that contains the shared code and UI;
  • HelloGrid.Android - A project that contains Android specific code and serves as the Android application's entry point;
  • HelloGrid.iOS - A project that contains iOS specific code and serves as the iOS application's entry point.

Add the DevExpress Grid Component to a Solution

Important

Add Xamarin.Forms v3.0.0.561731 to the project before you add the DevExpress Grid package. The DevExpress Grid component supports this Xamarin.Forms version only.

Install the DevExpress Grid NuGet package from NuGet.org in one of the following ways:

  • NuGet Package Manager UI

    1. Select Tools | NuGet Package Manager | Manage NuGet Packages for Solution... in Visual Studio's main menu, or right-click the solution in Solution Explorer and select Manage NuGet Packages for Solution...
    2. Search for DevExpress.Mobile.Grid in the nuget.org package source, select all the solution's projects and click Install.

      Grid_InstallNuGetPackage

  • Package Manager Console

    1. Select Tools | NuGet Package Manager | Package Manager Console in Visual Studio's main menu.
    2. Run the following command for each project in the console's Default Project drop-down list:

      Install-Package DevExpress.Mobile.Grid -Version 18.1.3

Initialize the DevExpress Grid Component

After referencing libraries, add the following initialization code to the Android (MainActivity.cs) and iOS (AppDelegate.cs) projects:

DevExpress.Mobile.Forms.Init ();

Add Namespaces

Add the following namespace to a XAML markup or C# file in which a Grid instance is created:

xmlns:dxGrid="clr-namespace:DevExpress.Mobile.DataGrid;assembly=DevExpress.Mobile.Grid.v18.1"
using DevExpress.Mobile.DataGrid;

Create a Grid Instance

You can create a GridControl instance using XAML markup...

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="HelloGrid.MainPage"
            xmlns:dxGrid="clr-namespace:DevExpress.Mobile.DataGrid;assembly=DevExpress.Mobile.Grid.v18.1">
    <dxGrid:GridControl x:Name="grid">
    </dxGrid:GridControl>
</ContentPage>

...or C# code.

using System;
using Xamarin.Forms;
using DevExpress.Mobile.DataGrid;

namespace HelloGrid
{
    public class App : Application
    {
        public App ()
        {
            GridControl grid = new GridControl ();
            MainPage = new ContentPage {
                Content = grid,
            };
        }
    }
}

The Getting Started section provides an example with detailed instructions on how to create an application with a grid bound to a data source and adjust various settings.