DEV Community: Konrad Müller

Using Microcharts with .NET MAUI

Konrad Müller — Sat, 28 May 2022 13:12:37 +0000

Microcharts is one of the most well-known open source charting libraries for Xamarin and many people, including me, would like to use it with .NET MAUI. Work on .NET MAUI support by Microcharts should arrive soon but while the PR is not merged, I want to show how to already use Microcharts with .NET MAUI.

You can find a sample for this on GitHub.

Adding the required packages

First thing to do is to add all required packages. We need Microcharts, which will bring in the rendering logic.



dotnet add package Microcharts --version 0.9.5.9

Additionally, we need a reference to SkiaSharp controls for .NET MAUI.



dotnet add package SkiaSharp.Views.Maui.Controls --version 2.88.0

You can also just add the references directly to the .csproj file:



    <ItemGroup>
      <PackageReference Include="Microcharts" Version="0.9.5.9" />
      <PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="2.88.0" />
    </ItemGroup>

Adding the ChartView

Microcharts has a smart structure that uses one shared code base that provides the rendering, based on SkiaSharp. The platforms just provide a SkiaSharp view and use this base layer to handle drawing events. We can therefore basically copy the Xamarin.Forms implementation of the view and slightly adapt it.



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);
        }
    }

This view basically subscribes to drawing events and handles them by calling the Microcharts Chart drawing logic on the canvas ( _chart.Draw(e.Surface.Canvas, e.Info.Width, e.Info.Height) ). Just drop it in your project and you can now reference it from your views.

Usage

Before finally using it, we just need to add the required handlers by adding the .UseSkiaSharp() method to our MAUI builder in the MauiProgram.cs.



var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseSkiaSharp();

You can now use the ChartView as you would use with Microcharts in any other project:



<ContentPage ...
xmlns:microcharts="clr-namespace:Microcharts.MAUI.Sample;assembly=Microcharts.MAUI.Sample">
            <microcharts:ChartView x:Name="Chart" />
</ContentPage>

Read more about Microcharts usage in their documentation.

Setting up a Xamarin.Forms WPF backend on .NET Core

Konrad Müller — Sat, 23 May 2020 11:48:52 +0000

TLDR: You can now build Xamarin.Forms WPF applications on .NET Core, you can find a sample here.

Xamarin.Forms supports a wide variety of platforms, so called platform backends. Some of these are iOS, Android, macOS, UWP, GTK or WPF. While the WPF implementation was running on the old .NET Framework WPF version, in april support for .NET Core was merged. This post will show you how to add the WPF backend to your existing Xamarin.Forms project and what opportunities this brings. I will use Visual Studio as reference but you can do all of the steps and run the application using the dotnet CLI and any editor you want!

Disclaimer: If you want to target Windows with your application, you should generally use the UWP backend since its the stable and an officially supported backend. If you are sure you want to use WPF, go ahead!

Prerequisites

Visual Studio 2019 (Windows) 16.5 with the Xamarin, .NET Desktop and .NET Core workloads installed
The latest .NET Core SDK
A Xamarin.Forms project you want to add the WPF backend to, I will use my FormsDesktop project from my .NET desktop framework sample collection.

My sample project before the WPF backend is added looks like this:

Adding the WPF .NET Core project

Start of by adding a new WPF App (.NET Core) to your solution.

If you want to use the CLI you can use the command dotnet new wpf -n PROJECTNAME.WPF
We now have to modify the project:

Add a reference to the shared project in your solution, in my sample that would be the "FormsDesktop" project. The CLI command from inside the WPF project folder would be dotnet add reference ../FormsDesktop
Add the latest Xamarin.Forms.Platform.WPF NuGet package to the WPF project and make sure it has the same version as the Xamarin.Forms references in your other projects. You can use the NuGet manager in Visual Studio or the command dotnet add package Xamarin.Forms.Platform.WPF
Open the .csproj file of the WPF project and add the following lines:

<ItemGroup> 
 <EmbeddedResource Remove="**\*.xaml" /> 
</ItemGroup>

This is a workaround for a bug when working with xaml files which would lead to unresolvable build errors.

After these steps, your .csproj file should look like this:


<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Remove="**\*.xaml" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Xamarin.Forms.Platform.WPF" Version="4.6.0.772" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\FormsDesktop\FormsDesktop.csproj" />
  </ItemGroup>

</Project>

Initializing the Xamarin.Forms application

After adding the project all we have to do is to initialize the Xamarin.Forms application when starting the WPF application.
The MainWindow is by default the window that is initially loaded when the application is started. Start with the .xaml file and add a reference to the Xamarin.Forms.WPFnamespacexmlns:wpf=clr-namespace:Xamarin.Forms.Platform.WPF;assembly=Xamarin.Forms.Platform.WPF. Then change the class from Windowto wpf:FormsApplicationPage

<wpf:FormsApplicationPage x:Class="Xamarin.Forms.WPF.MainWindow"
                          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                          xmlns:local="clr-namespace:Xamarin.Forms.WPF"
                          xmlns:wpf="clr-namespace:Xamarin.Forms.Platform.WPF;assembly=Xamarin.Forms.Platform.WPF"
                          mc:Ignorable="d"
                          Title="WPF .NET Core" Height="450" Width="800"> 
</wpf:FormsApplicationPage>

Continue with the MainWindow.xaml.cs file where the Xamarin.Forms framework is initialized and the application is loaded as content of the WPF application. To do this, add the Xamarin.Forms initialization Forms.Init() and the application load LoadApplication(new SharedProject.App()).

namespace Xamarin.Forms.WPF
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            Forms.Init();
            LoadApplication(new FormsDesktop.App());
        }
    }
}

Run it!

You can now run the WPF application directly from Visual Studio or the CLI with the dotnet run command.

Publishing the application

Once the application runs we just have to publish it to ship it to some user. Like any .NET Core application, you can just publish it from Visual Studio (right click the project - publish) or use the CLI with dotnet publish -c Release.

Now the great benefits of .NET Core come into play. Old WPF projects that build on the .NET framework always required the correct .NET runtime on the users device. With .NET Core, you can publish the application self contained which will ship the runtime with the application! Its just a drop down in Visual Studio (Deployment Mode) or a switch in the publishing command -r win10-x86. There are more runtime identifers available for specific windows versions, you can find them here.

Next up, instead of shipping a huge folder with hundreds of files, we can create a single executable by selecting Produce single file in Visual Studio or the -p:PublishSingleFile=true switch.

Last but not least, .NET Core is now capable of tree shaking to reduce the size of the published application with the Trim unused assemblies setting or the -p:PublishTrimmed=true switch. This will reduce an empty application from 140 to around 90mb. Just be aware that this feature is still in preview and like linking Android and iOS applications, you have to make sure that no assembly is removed that is only used by reflection.

That's a wrap

This article showed how to add a WPF backend to your Xamarin.Forms project that is targeting .NET Core and some of the benefits this brings, like working and running from the dotnet CLI, tree shaking, self contained or single executable deployments. If you have any further questions dont hesitate to reach out to me on Twitter.