CSharpMath Documentation

There are three primary ways to extend the library to new graphics or font platforms:

1. Branching off CSharpMath.Rendering (Recommended): Implement the ICanvas interface to connect the library's font lookup (via Typography) to your specific graphics library. Pass this implementation into MathPainter.Draw.
2. Forking the project: The highest effort path. Requires defining a custom TypesettingContext and implementing IGraphicsContext to allow for completely custom font and graphics libraries.
3. Building on CSharpMath.SkiaSharp: For other SkiaSharp-supported platforms, pass the SKCanvas from your platform's paint override into MathPainter.Draw.

You can render math to an image stream using the Painter property of a MathView or TextView, or by using MathPainter directly in SkiaSharp.

SkiaSharp

using CSharpMath.SkiaSharp;
var painter = new MathPainter { LaTeX = @"\frac23" };
using var png = painter.DrawAsStream();
// Supports formats like SkiaSharp.SKEncodedImageFormat.Jpeg, Gif, Bmp, etc.

Xamarin.Forms

using CSharpMath.SkiaSharp;
var painter = someMathView.Painter; // or someTextView.Painter
using var png = painter.DrawAsStream();

Avalonia

Note: Due to Avalonia API limitations, you can only render as PNG.

using CSharpMath.Avalonia;
var painter = someMathView.Painter; // or someTextView.Painter
painter.DrawAsPng(someStream);

To display a paragraph of normal text containing inline or display math, use the TextView control.

Delimiters:

• Inline math: $, \( and \)
• Display math: $$, \[ and \]

Usage (XAML):

<math:TextView LaTeX="Text text text text text \( \frac{\sqrt a}{b} \) text text text text text" />

Xamarin.Forms

Use CSharpMath.Forms.MathButton. It wraps a MathView and uses its properties to draw math on the button.

<math:MathButton x:Name="MathButton">
    <math:MathView x:Name="MathView">
        \frac\sqrt23
    </math:MathView>
</math:MathButton>

Avalonia

Avalonia's standard Button supports arbitrary content. Simply nest a MathView inside a standard Button.

<Button x:Name="MathButton">
    <math:MathView x:Name="MathView">
        \frac\sqrt23
    </math:MathView>
</Button>

To use images or other files across multiple projects in an Uno Platform application, follow these steps:

1. Add the image file to the Assets directory of a shared project.
2. Set the build action for the file to Content.
3. To ensure high-quality rendering across different devices, provide assets for various scales/DPIs using the naming conventions or directory structures supported by the target platforms.

To display math in Avalonia, use the MathView control. You can define it in XAML or via C# code.

XAML Usage:

<math:MathView LaTeX="x + 2 \sqrt{x} + 1 = (\sqrt x+1)^2" />

C# Usage:

var view = new CSharpMath.Avalonia.MathView();
view.LaTeX = @"\frac\sqrt23";
somePanel.Children.Add(view);

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:math="clr-namespace:CSharpMath.Avalonia;assembly=CSharpMath.Avalonia"
             x:Class="Namespace.Class">
    <math:MathView LaTeX="x + 2 \sqrt{x} + 1 = (\sqrt x+1)^2" />
</UserControl>

To display math in Xamarin.Forms, use the MathView control. You can define it in XAML or via C# code.

XAML Usage:

<math:MathView x:Name="View" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    \frac\sqrt23
</math:MathView>

C# Usage:

var view = new CSharpMath.Forms.MathView();
view.HorizontalOptions = view.VerticalOptions = LayoutOptions.FillAndExpand;
view.LaTeX = @"\frac\sqrt23";
someLayout.Children.Add(view);

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:math="clr-namespace:CSharpMath.Forms;assembly=CSharpMath.Forms"
             x:Class="Namespace.Class">
    <math:MathView x:Name="View" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        \frac\sqrt23
    </math:MathView>
</ContentPage>

Use MathPainter from the CSharpMath.SkiaSharp namespace to render LaTeX directly onto a SkiaSharp canvas. This is the underlying engine used by the Forms and Avalonia implementations.

var painter = CSharpMath.SkiaSharp.MathPainter();
painter.LaTeX = @"\frac\sqrt23";
painter.Draw(someCanvas);

When providing assets for different screen densities in Uno Platform, use the following mapping for scales and platform-specific identifiers:

Example file structures:

Suffix-based (WinUI style):

\Assets\Images\logo.scale-100.png
\Assets\Images\logo.scale-200.png
\Assets\Images\logo.scale-400.png

Directory-based (iOS/Android style):

\Assets\Images\scale-100\logo.png
\Assets\Images\scale-200\logo.png
\Assets\Images\scale-400\logo.png