[.NET MAUI] DevExpress Chart

Point Chart 예시입니다.

PopulationModel.cs

namespace Maui.DevExpressTest.Models
{
    public class PopulationModel
    {
        public DateTime Year { get; }
        public double Population { get; }

        public PopulationModel(DateTime year, double population)
        {
            this.Year = year;
            this.Population = population;
        }
    }
}

MainViewModel.cs

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

using Maui.DevExpressTest.Models;

namespace Maui.DevExpressTest.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private ObservableCollection<PopulationModel> populationDatas;

        public ObservableCollection<PopulationModel> PopulationDatas
        {
            get
            {
                if (this.populationDatas == null)
                {
                    this.populationDatas = new ObservableCollection<PopulationModel>();
                }

                return this.populationDatas;
            }
            set
            {
                this.populationDatas = value;
                OnPropertyChanged();
            }
        }

        public MainViewModel()
        {
            PopulationDatas.Add(new PopulationModel(new DateTime(1950, 1, 1), 546));
            PopulationDatas.Add(new PopulationModel(new DateTime(1960, 1, 1), 605));
            PopulationDatas.Add(new PopulationModel(new DateTime(1970, 1, 1), 656));
            PopulationDatas.Add(new PopulationModel(new DateTime(1980, 1, 1), 694));
            PopulationDatas.Add(new PopulationModel(new DateTime(1990, 1, 1), 721));
            PopulationDatas.Add(new PopulationModel(new DateTime(2000, 1, 1), 730));
            PopulationDatas.Add(new PopulationModel(new DateTime(2010, 1, 1), 728));
            PopulationDatas.Add(new PopulationModel(new DateTime(2020, 1, 1), 721));
            PopulationDatas.Add(new PopulationModel(new DateTime(2030, 1, 1), 704));
            PopulationDatas.Add(new PopulationModel(new DateTime(2040, 1, 1), 680));
            PopulationDatas.Add(new PopulationModel(new DateTime(2050, 1, 1), 650));
        }
    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Maui.DevExpressTest.MainPage"
    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">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25"
            VerticalOptions="Center">

            <dxc:ChartView HeightRequest="300">
                <dxc:ChartView.AxisX>
                    <dxc:DateTimeAxisX
                        GridAlignment="Year"
                        GridSpacing="2"
                        MeasureUnit="Year" />
                </dxc:ChartView.AxisX>
                <dxc:ChartView.Legend>
                    <dxc:Legend
                        HorizontalPosition="Center"
                        Orientation="LeftToRight"
                        VerticalPosition="TopOutside" />
                </dxc:ChartView.Legend>
                <dxc:ChartView.Series>
                    <dxc:PointSeries DisplayName="Population">
                        <dxc:PointSeries.Data>
                            <dxc:SeriesDataAdapter ArgumentDataMember="Year" DataSource="{Binding PopulationDatas}">
                                <dxc:ValueDataMember Member="Population" Type="Value" />
                            </dxc:SeriesDataAdapter>
                        </dxc:PointSeries.Data>
                    </dxc:PointSeries>
                </dxc:ChartView.Series>
            </dxc:ChartView>
        </VerticalStackLayout>

    </ScrollView>
</ContentPage>

결과

[Source]
https://github.com/kei-soft/Maui.DevExpressTest


* DevExpress Chart 는 안쓰는걸로... 사용하기가.. 좀 .;