Introduction

Supercharge your .NET MAUI projects with Devexpress Charts! This blog will explain you how to implement the chart in .NET MAUI projects using Dev express, a life time free plugin. This plugin has many customisations and will directly skip into the implementation part.

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Demo
• Download Code

Project Setup:

• Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  
• In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  
• In the Additional information window, click the Create button:
  
• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app
  

Install Plugin:

• Library Requirement: The Dev express's nuget link should be mapped as a package source and we need to install "DevExpress.Maui.Charts" into our project.
• Installation via NuGet: Obtain the Charts library by searching for "DevExpress.Maui.Charts" in the NuGet Package Manager.
• User Interface Guidance: Open the NuGet Package Manager interface to facilitate the installation process.
• Visual Confirmation: The library, once searched, should appear as "DevExpress.Maui.Charts" in the NuGet interface.

Implementation

• First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Chart Library.

  using DevExpress.Maui;

  .UseDevExpress()

• Open MainPage.xaml file and add the following namespace. (the page will be replaced according to you).

  xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"

• Then, remove the default content and add an instance of the ChartView class to the page.

  <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
               x:Class="ScatterChartGetStarted.MainPage">
      <dxc:ChartView/>
  </ContentPage>

• Consider removing the event handlers from the code-behind for the default content. It is advisable to eliminate default styles (such as fonts, colors, and other settings) in the App.xaml file as well.
• In this instance, the chart features line series displaying the annual GDP for three countries. Generate a ViewModel.cs file that includes the following classes:

  public class ViewModel {
      public CountryGdp GdpValueForUSA { get; }
      public CountryGdp GdpValueForChina { get; }
      public CountryGdp GdpValueForJapan { get; }
  
      public ViewModel() {
          GdpValueForUSA = new CountryGdp(
              "USA",
              new GdpValue(new DateTime(2020, 1, 1), 20.93),
              new GdpValue(new DateTime(2019, 1, 1), 21.43),
              new GdpValue(new DateTime(2018, 1, 1), 20.58),
              new GdpValue(new DateTime(2017, 1, 1), 19.391),
              new GdpValue(new DateTime(2016, 1, 1), 18.624),
              new GdpValue(new DateTime(2015, 1, 1), 18.121),
              new GdpValue(new DateTime(2014, 1, 1), 17.428),
              new GdpValue(new DateTime(2013, 1, 1), 16.692),
              new GdpValue(new DateTime(2012, 1, 1), 16.155),
              new GdpValue(new DateTime(2011, 1, 1), 15.518),
              new GdpValue(new DateTime(2010, 1, 1), 14.964)
          );
          GdpValueForChina = new CountryGdp(
              "China",
              new GdpValue(new DateTime(2020, 1, 1), 14.72),
              new GdpValue(new DateTime(2019, 1, 1), 14.34),
              new GdpValue(new DateTime(2018, 1, 1), 13.89),
              new GdpValue(new DateTime(2017, 1, 1), 12.238),
              new GdpValue(new DateTime(2016, 1, 1), 11.191),
              new GdpValue(new DateTime(2015, 1, 1), 11.065),
              new GdpValue(new DateTime(2014, 1, 1), 10.482),
              new GdpValue(new DateTime(2013, 1, 1), 9.607),
              new GdpValue(new DateTime(2012, 1, 1), 8.561),
              new GdpValue(new DateTime(2011, 1, 1), 7.573),
              new GdpValue(new DateTime(2010, 1, 1), 6.101)
          );
          GdpValueForJapan = new CountryGdp(
              "Japan",
              new GdpValue(new DateTime(2020, 1, 1), 4.888),
              new GdpValue(new DateTime(2019, 1, 1), 5.082),
              new GdpValue(new DateTime(2018, 1, 1), 4.955),
              new GdpValue(new DateTime(2017, 1, 1), 4.872),
              new GdpValue(new DateTime(2016, 1, 1), 4.949),
              new GdpValue(new DateTime(2015, 1, 1), 4.395),
              new GdpValue(new DateTime(2014, 1, 1), 4.850),
              new GdpValue(new DateTime(2013, 1, 1), 5.156),
              new GdpValue(new DateTime(2012, 1, 1), 6.203),
              new GdpValue(new DateTime(2011, 1, 1), 6.156),
              new GdpValue(new DateTime(2010, 1, 1), 5.700)
          );
      }
  }
  
  public class CountryGdp {
      public string CountryName { get; }
      public IList<GdpValue> Values { get; }
  
      public CountryGdp(string country, params GdpValue[] values) {
          this.CountryName = country;
          this.Values = new List<GdpValue>(values);
      }
  }
  
  public class GdpValue {
      public DateTime Year { get; }
      public double Value { get; }
  
      public GdpValue(DateTime year, double value) {
          this.Year = year;
          this.Value = value;
      }
  }

• In the MainPage.xaml file, incorporate three LineSeries objects into the ChartView.Series collection. To establish a connection between the series and data, assign each LineSeries object's Data property to a SeriesDataAdapter object. Utilize the adapter's properties to indicate the data source and fields containing arguments and values for each series.
• Additionally, define a local XAML namespace referring to a CLR namespace encompassing the view model. Subsequently, employ the page's BindingContext property to link the view model with the view.

  <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
               xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
               xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
               ios:Page.UseSafeArea="True"
               xmlns:local="clr-namespace:MauiDevExpress"
               x:Class="MauiDevExpress.MainPage">
      <ContentPage.BindingContext>
          <local:ViewModel/>
      </ContentPage.BindingContext>
      <dxc:ChartView>
          <dxc:ChartView.Series>
              <dxc:LineSeries DisplayName="{Binding GdpValueForUSA.CountryName}">
                  <dxc:LineSeries.Data>
                      <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForUSA.Values}"
                                             ArgumentDataMember="Year">
                          <dxc:ValueDataMember Type="Value" Member="Value"/>
                      </dxc:SeriesDataAdapter>
                  </dxc:LineSeries.Data>
              </dxc:LineSeries>
  
              <dxc:LineSeries DisplayName="{Binding GdpValueForChina.CountryName}">
                  <dxc:LineSeries.Data>
                      <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForChina.Values}"
                                             ArgumentDataMember="Year">
                          <dxc:ValueDataMember Type="Value" Member="Value"/>
                      </dxc:SeriesDataAdapter>
                  </dxc:LineSeries.Data>
              </dxc:LineSeries>
  
              <dxc:LineSeries DisplayName="{Binding GdpValueForJapan.CountryName}">
                  <dxc:LineSeries.Data>
                      <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForJapan.Values}"
                                             ArgumentDataMember="Year">
                          <dxc:ValueDataMember Type="Value" Member="Value"/>
                      </dxc:SeriesDataAdapter>
                  </dxc:LineSeries.Data>
              </dxc:LineSeries>
          </dxc:ChartView.Series>
      </dxc:ChartView>
  </ContentPage>

• Configure the X-axis to display labels for years by assigning a DateTimeAxisX object with the specified settings to the ChartView.AxisX property.

  <dxc:ChartView> <dxc:ChartView.AxisX>
      <dxc:DateTimeAxisX MeasureUnit="Year" GridAlignment="Year"
      GridSpacing="2"/> </dxc:ChartView.AxisX> </dxc:ChartView>

• Configure the title and labels on the Y-axis. Set the ChartView.AxisY property to a NumericAxisY object and specify this object’s Title and Label properties.

  <dxc:ChartView> 
  <!-- The X-axis config is here. -->
      <dxc:ChartView.AxisY>
          <dxc:NumericAxisY>
              <dxc:NumericAxisY.Title>
                  <dxc:AxisTitle Text="Trillions of US$">
                      <dxc:AxisTitle.Style>
                          <dxc:TitleStyle>
                              <dxc:TitleStyle.TextStyle>
                                  <dxc:TextStyle Size="16"/>
                              </dxc:TitleStyle.TextStyle>
                          </dxc:TitleStyle>
                      </dxc:AxisTitle.Style>
                  </dxc:AxisTitle>
              </dxc:NumericAxisY.Title>
              <dxc:NumericAxisY.Label>
                  <dxc:AxisLabel TextFormat="#.#" Position="Inside"/>
              </dxc:NumericAxisY.Label>
          </dxc:NumericAxisY>
      </dxc:ChartView.AxisY>
  </dxc:ChartView>

• Configure the legend position and orientation. Set the ChartView.Legend property to a Legend object, and specify this object’s properties as follows:

  <dxc:ChartView>
      <dxc:ChartView.Legend>
          <dxc:Legend VerticalPosition="TopOutside" 
                      HorizontalPosition="Center" 
                      Orientation="LeftToRight"/>
      </dxc:ChartView.Legend>
  </dxc:ChartView>

• Establish the chart to showcase a series point hint as a crosshair cursor by setting the ChartView.Hint property to a Hint object and assigning a CrosshairHintBehavior object to Hint.Behavior. Subsequently, define the hint's content, data format, and visibility options. Set the LineSeries.HintOptions property to a SeriesCrosshairOptions object with the specified settings.

  <ContentPage.Resources>
      <dxc:SeriesCrosshairOptions x:Key="lineSeriesHintOptions"
                                  PointTextPattern="{}{S}: {V}M"
                                  ShowInLabel="True"
                                  AxisLabelVisible="True"
                                  AxisLineVisible="True"/>
  </ContentPage.Resources>
  <dxc:ChartView>
      <dxc:ChartView.Hint>
          <dxc:Hint>
              <dxc:Hint.Behavior>
                  <dxc:CrosshairHintBehavior GroupHeaderTextPattern="{}{A$YYYY}" 
                                             MaxSeriesCount="3"/>
              </dxc:Hint.Behavior>
          </dxc:Hint>
      </dxc:ChartView.Hint>
  
      <dxc:ChartView.Series>
          <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
              <!--Series Data-->
          </dxc:LineSeries>
          <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
              <!--Series Data-->
          </dxc:LineSeries>
          <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
              <!--Series Data-->
          </dxc:LineSeries>
      </dxc:ChartView.Series>    
  </dxc:ChartView>

• Set the LineSeries.MarkersVisible property to True to display point markers. To change the line series appearance, set the LineSeries.Style property to a LineSeriesStyle object. This object’s Stroke, StrokeThickness, MarkerSize, and MarkerStyle properties allow you to configure the appearance of the series line and point markers.

  <dxc:LineSeries MarkersVisible="True">
      <!--Series Data-->
      <dxc:LineSeries.Style>
          <dxc:LineSeriesStyle Stroke="#7145a7" StrokeThickness="2" MarkerSize="8">
              <dxc:LineSeriesStyle.MarkerStyle>
                  <dxc:MarkerStyle Fill="#7145a7"/>
              </dxc:LineSeriesStyle.MarkerStyle>
          </dxc:LineSeriesStyle>
      </dxc:LineSeries.Style>
  </dxc:LineSeries>

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Tweet

Introduction

Welcome to our newest blog post, where we explore the vibrant realm of app development with .NET MAUI! In this detailed guide, we dive into the intricacies of the "DataGrid Control for .NET MAUI," an outstanding free plugin crafted to simplify your data management process. Uncover how this plugin enables developers to effortlessly sort, filter, and present data, elevating user experiences across cross-platform applications.

Telerik, SyncFusion, and DevExpress offer paid licenses, often accompanied by trial versions or community licenses under specific terms. However, DevExpress stands out by providing a set of controls that you can use absolutely free!. As the demand for seamless data visualization and interaction grows, this free plugin emerges as a game-changer for .NET MAUI enthusiasts.

How can I obtain a free license for DevExpress?

• Visit the following link FREE Xamarin UI Controls
• Click "GET IT FREE" button in the screen, will redirect to another page.
• In this page, you need to enter your details and valid mail id.
• After the successful submission, the DevExpress team will send the nuget api link to the entered email id.

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Demo
• Full Code
• Download Code

Project Setup:

• Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  
• In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  
• In the Additional information window, click the Create button:
  
• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app
  

Install Plugin:

In this steps, we will see the steps to install "DevExpress Grid" in Visual Studio 2022:

• Access NuGet Package Manager: In Visual Studio, right-click on your .NET MAUI project in the Solution Explorer. From the context menu, select "Manage NuGet Packages."
• Search for "DevExpress.XamarinForms.DataGrid": In the NuGet Package Manager, click on the "Browse" tab. In the search bar, type "DevExpress.XamarinForms.DataGrid" and hit Enter. The package should appear in the search results.
• Select and Install the Package: Once you find "DevExpress.XamarinForms.DataGrid" in the search results, click on it to select it. Ensure you choose the appropriate version compatible with your .NET MAUI project. Click on the "Install" button to begin the installation process.

• Accept License Agreement: During the installation, you may be prompted to accept the license agreement. Review the terms and conditions and click on the "Accept" button to proceed.
• Wait for Installation to Complete: Visual Studio will download and install the package along with its dependencies. This process may take a few moments, depending on your internet connection speed.
• Verify Installation: After the installation is complete, verify that there are no error messages in the Output window. This indicates a successful installation of the package.

Implementation

Open MauiProgram.cs file, and add ".UseDevExpress()" in builder like below

var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseDevExpress()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

Add Namespace in XAML:

In your .NET MAUI XAML files where you intend to use the Dev Express - DataGrid, make sure to add the appropriate XML namespace. For example:

xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"

Adjust the namespace and assembly name based on the specifics of the DataGrid component you installed.

Implement DataGrid in Your XAML:

You can now implement the DataGrid control in your XAML files using the namespace you added. For example:

<dg:DataGrid RefreshingEnabled="True"
             BackgroundColor="White"
                     IsRefreshing="{Binding Refreshing}"
                     PullToRefreshCommand="{Binding OnDataGridRefreshCommand}"
                     SelectionEnabled="True"
                     SelectedItem="{Binding SelectedItem}"
                     RowHeight="70"
                     HeaderHeight="70"
                     ItemsSource="{Binding Items}"
                     HeaderBackground="Red">

    <dg:DataGrid.NoDataView>
        <Label Text="Nothing to see here" HorizontalOptions="Center" VerticalOptions="Center" />
    </dg:DataGrid.NoDataView>
    <dg:DataGrid.Columns>
        <dg:DataGridColumn Title="Image" PropertyName="Image" Width="150" SortingEnabled="False">
            <dg:DataGridColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding}" HorizontalOptions="Center" VerticalOptions="Center"
                           Aspect="AspectFit" HeightRequest="60" />
                </DataTemplate>
            </dg:DataGridColumn.CellTemplate>
        </dg:DataGridColumn>
        <dg:DataGridColumn Title="Name" PropertyName="Name" Width="100"/>
        <dg:DataGridColumn Title="Location" PropertyName="Location"  Width="100"/>
        <dg:DataGridColumn Title="Population" PropertyName="Population"  Width="100"/>
        <dg:DataGridColumn Title="Latitude" PropertyName="Latitude"  Width="100"/>
        <dg:DataGridColumn Title="Longitude" PropertyName="Longitude"  Width="100"/>
    </dg:DataGrid.Columns>
    <dg:DataGrid.RowsBackgroundColorPalette>
        <dg:PaletteCollection>
            <Color>#e1e1e1</Color>
            <Color>#ffffff</Color>
        </dg:PaletteCollection>
    </dg:DataGrid.RowsBackgroundColorPalette>
</dg:DataGrid>

The above code snippet represents a DataGrid component in .NET MAUI application. Let's break down the properties and their meanings in the context of this DataGrid:

• ItemsSource="{Binding Items}": Binds the DataGrid to a collection of items represented by the "Items" property in the ViewModel. Each item in this collection corresponds to a row in the DataGrid.
• dxg:DataGridView.Columns: Specifies the columns to be displayed in the DataGrid.
• dxg:TemplateColumn: We can use the custom templated column
• dxg:TextColumn: Used to display the values in the column
• dxg:DateColumn: Used to display the date values with datepicker selection in the column
• dxg:ComoboxColumn: Used to display the values with dropdown selection in the column
• dxg:CheckBoxColumn : Used to display the boolen selection with checkbox in the column

The below code snippet configures a DataGrid component with specific properties and templates, allowing users to view and interact with data in a visually appealing manner.

The Code Behind or MVVM view model properties are similar to listview control and no specific code required

using System.Collections.ObjectModel;
using System.Net.Http;
using System.Net.Http.Json;

namespace MauiDevExpress
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            BindingContext = this;
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            base.OnAppearing();
            await Task.Delay(2000);
            LoadData();
        }

        private void LoadData()
        {
            var monkeys = new List<Monkey>
            {
                new Monkey
                {
                    Name = "Chimpanzee",
                    Location = "Africa",
                    Details = "Chimpanzees are intelligent primates known for their problem-solving abilities.",
                    Image = "chimpanzee.jpg",
                    Population = 150000,
                    Latitude = -1.2921f,
                    Longitude = 36.8219f,
                    BirthDate = new DateTime(2000, 1, 15),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Orangutan",
                    Location = "Borneo",
                    Details = "Orangutans are great apes native to the rainforests of Borneo and Sumatra.",
                    Image = "orangutan.jpg",
                    Population = 70000,
                    Latitude = 1.3521f,
                    Longitude = 110.4647f,
                    BirthDate = new DateTime(2005, 3, 20),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Gorilla",
                    Location = "Africa",
                    Details = "Gorillas are the largest primates and share about 98.3% of their DNA with humans.",
                    Image = "gorilla.jpg",
                    Population = 100000,
                    Latitude = -0.2280f,
                    Longitude = 15.8277f,
                    BirthDate = new DateTime(1998, 7, 10),
                    AccessLevel = AccessLevel.Admin
                },
                // Add more monkey instances with BirthDate and AccessLevel properties
                new Monkey
                {
                    Name = "Howler Monkey",
                    Location = "South America",
                    Details = "Howler monkeys are known for their loud vocalizations that can be heard up to 3 miles away.",
                    Image = "howler_monkey.jpg",
                    Population = 50000,
                    Latitude = -14.2350f,
                    Longitude = -51.9253f,
                    BirthDate = new DateTime(2002, 5, 3),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Capuchin Monkey",
                    Location = "Central and South America",
                    Details = "Capuchin monkeys are highly intelligent and are often used in scientific research.",
                    Image = "capuchin_monkey.jpg",
                    Population = 30000,
                    Latitude = 4.7100f,
                    Longitude = -74.0721f,
                    BirthDate = new DateTime(2007, 9, 18),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Spider Monkey",
                    Location = "Central and South America",
                    Details = "Spider monkeys are known for their long limbs and prehensile tail, which they use to swing through trees.",
                    Image = "spider_monkey.jpg",
                    Population = 25000,
                    Latitude = 14.634915f,
                    Longitude = -90.506882f,
                    BirthDate = new DateTime(1999, 11, 7),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Mandrill",
                    Location = "Africa",
                    Details = "Mandrills are colorful monkeys found in the rainforests of Central Africa.",
                    Image = "mandrill.jpg",
                    Population = 10000,
                    Latitude = 0.2280f,
                    Longitude = 14.8277f,
                    BirthDate = new DateTime(2004, 2, 14),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Tarsier",
                    Location = "Southeast Asia",
                    Details = "Tarsiers are small primates known for their big eyes and unique hunting skills.",
                    Image = "tarsier.jpg",
                    Population = 5000,
                    Latitude = 9.3275f,
                    Longitude = 123.3076f,
                    BirthDate = new DateTime(2001, 8, 22),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Golden Lion Tamarin",
                    Location = "Brazil",
                    Details = "Golden lion tamarins are endangered primates with striking orange fur and manes.",
                    Image = "golden_lion_tamarin.jpg",
                    Population = 1500,
                    Latitude = -22.9068f,
                    Longitude = -43.1729f,
                    BirthDate = new DateTime(2006, 12, 5),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Proboscis Monkey",
                    Location = "Borneo",
                    Details = "Proboscis monkeys have large noses and are excellent swimmers.",
                    Image = "proboscis_monkey.jpg",
                    Population = 700,
                    Latitude = 2.4604f,
                    Longitude = 115.3502f,
                    BirthDate = new DateTime(2003, 4, 30),
                    AccessLevel = AccessLevel.User
                },
                // Add more monkey instances as needed
                // ...
            };

            dxg.ItemsSource = new ObservableCollection<Monkey>(monkeys);
        }


        public class Monkey
        {
            public string Name { get; set; }
            public string Location { get; set; }
            public string Details { get; set; }
            public string Image { get; set; }
            public int Population { get; set; }
            public float Latitude { get; set; }
            public float Longitude { get; set; }
            public AccessLevel AccessLevel { get; set; }
            public DateTime BirthDate { get; set; }
        }
        public enum AccessLevel
        {
            Admin,
            User
        }
    }

}

Full Code:

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Tweet

References

To learn more about DevExpress DataGrid