Использование Microcharts в .NET MAUI

Microcharts — одна из самых известных библиотек диаграмм с открытым исходным кодом для Xamarin, и многие люди, включая меня, хотели бы использовать ее с .NET MAUI. Работа над поддержкой .NET MAUI со стороны Microcharts должна появиться в ближайшее время, но пока PR не слит, я хочу показать, как уже можно использовать Microcharts с .NET MAUI.

Вы можете найти пример для этого на GitHub.

Добавление необходимых пакетов

Первое, что нужно сделать, это добавить все необходимые пакеты. Нам нужен Microcharts, который привнесет логику рендеринга.

dotnet add package Microcharts --version 0.9.5.9
Вход в полноэкранный режим Выход из полноэкранного режима

Кроме того, нам нужна ссылка на элементы управления SkiaSharp для .NET MAUI.

dotnet add package SkiaSharp.Views.Maui.Controls --version 2.88.0
Вход в полноэкранный режим Выход из полноэкранного режима

Вы также можете просто добавить ссылки непосредственно в файл .csproj:

    <ItemGroup>
      <PackageReference Include="Microcharts" Version="0.9.5.9" />
      <PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="2.88.0" />
    </ItemGroup>
Войти в полноэкранный режим Выход из полноэкранного режима

Добавление ChartView

Microcharts имеет продуманную структуру, которая использует одну общую базу кода, обеспечивающую рендеринг, основанную на SkiaSharp. Платформы просто предоставляют представление SkiaSharp и используют этот базовый слой для обработки событий отрисовки. Поэтому мы можем скопировать реализацию представления в Xamarin.Forms и немного адаптировать ее.

internal class ChartView : SKCanvasView
    {
        public event EventHandler<SKPaintSurfaceEventArgs> ChartPainted;

        public static readonly BindableProperty ChartProperty = BindableProperty.Create(nameof(Chart), typeof(Chart), typeof(ChartView), null, propertyChanged: OnChartChanged);

        public Chart Chart
        {
            get { return (Chart)GetValue(ChartProperty); }
            set { SetValue(ChartProperty, value); }
        }

        private InvalidatedWeakEventHandler<ChartView> handler;

        private Chart _chart;

        public ChartView()
        {
            BackgroundColor = Colors.Transparent;
            PaintSurface += OnPaintCanvas;
        }

        private static void OnChartChanged(BindableObject d, object oldValue, object value)
        {
            var view = d as ChartView;

            if (view._chart != null)
            {
                view.handler.Dispose();
                view.handler = null;
            }

            view._chart = value as Chart;
            view.InvalidateSurface();

            if (view._chart != null)
            {
                view.handler = view._chart.ObserveInvalidate(view, (v) => v.InvalidateSurface());
            }
        }

        private void OnPaintCanvas(object sender, SKPaintSurfaceEventArgs e)
        {
            if (_chart != null)
            {
                _chart.Draw(e.Surface.Canvas, e.Info.Width, e.Info.Height);
            }
            else
            {
                e.Surface.Canvas.Clear(SKColors.Transparent);
            }

            ChartPainted?.Invoke(sender, e);
        }
    }
Вход в полноэкранный режим Выход из полноэкранного режима

Это представление в основном подписывается на события рисования и обрабатывает их, вызывая логику рисования диаграммы Microcharts на холсте ( _chart.Draw(e.Surface.Canvas, e.Info.Width, e.Info.Height) ). Просто поместите его в свой проект, и теперь вы можете ссылаться на него из своих представлений.

Использование

Перед окончательным использованием нам просто нужно добавить необходимые обработчики, добавив метод .UseSkiaSharp() к нашему конструктору MAUI в MauiProgram.cs.

var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseSkiaSharp();
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь вы можете использовать ChartView так же, как вы бы использовали Microcharts в любом другом проекте:

<ContentPage ...
xmlns:microcharts="clr-namespace:Microcharts.MAUI.Sample;assembly=Microcharts.MAUI.Sample">
            <microcharts:ChartView x:Name="Chart" />
</ContentPage>
Войти в полноэкранный режим Выйти из полноэкранного режима

Подробнее об использовании Microcharts читайте в их документации.


Оцените статью
Procodings.ru
Добавить комментарий