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 читайте в их документации.
