Support for Windows Forms apps

[pavledev]

Is your feature request related to a problem? Please describe.
Can you please add support for Windows Forms Apps?

[Happypig375]

@FoggyFinder Probably using WpfMath would be more suitable for WinForms/WPF?

[FoggyFinder]

Yep

@pavledev Btw, why? I believe WinForms is outdated.

[Happypig375]

Merge into ForNeVeR/xaml-math#281?

[charlesroddie]

Windows forms apps are already supported. CSharpMath supports everything that SkiaSharp supports: https://github.com/mono/SkiaSharp

[Happypig375]

The control isn't there though. Additional code to wire up CSharpMath.SkiaSharp and Windows Forms is needed for even the most basic of usages.

[pavledev]

@Happypig375 WpfMath only supports WPF.
@FoggyFinder Because WinForms are easier for designing

[Happypig375]

@pavledev As written in ForNeVeR/xaml-math#281 (comment), there is a Windows Forms control that can wrap WPF controls.

[pavledev]

@Happypig375 Can you please help me to wrap it?

[charlesroddie]

Additional code to wire up

The three lines of code in https://github.com/verybadcat/CSharpMath#2-csharpmathskiasharp?

[Happypig375]

@pavledev https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.integration.elementhost?view=netcore-3.1#examples
@charlesroddie Compared to a full view, that is not enough.

[pavledev]

@Happypig375 Which additional code is required to use CSharpMath.SkiaSharp in WinForm?

[charlesroddie]

@pavledev
To use SkiaSharp in WinForms: Get https://www.nuget.org/packages/SkiaSharp.Views/ , create an SKControl and add to its paint event, or inherit from it and override its paint event.
To draw CSharpMath things on it: get a MathPainter or TextPainter and Draw with it on the SKCanvas.

[pavledev]

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

@charlesroddie I get error: argument 1: cannot convert from 'SkiaSharp.Views.Desktop.SKControl' to 'SkiaSharp.SKCanvas'

[charlesroddie]

I'm not at my computer but in the paint event eventArgs you should get access to the canvas. Maybe e.Canvas or e.Surface.Canvas or something similar.

[pavledev]

private void skControl1_PaintSurface(object sender, SkiaSharp.Views.Desktop.SKPaintSurfaceEventArgs e)
{
var painter = new CSharpMath.SkiaSharp.MathPainter();
painter.LaTeX = @"\frac\sqrt23";
painter.Draw(e.Surface.Canvas);
}

@charlesroddie It's working now. Thank you.

[pavledev]

@charlesroddie I can also add formula setting LaTeX property to MathPainter object and by calling skControl1.Invalidate(); from button click event right?

[charlesroddie]

Yes an extremely simple control would be

type MathView() =
    inherit SKControl()
    let mathPainter = MathPainter()
    member this.LaTeX
        with set tex =
            mathPainter.LaTeX <- tex
            this.InvalidateSurface()
    override _.OnPaintSurface(e) =
        e.Surface.Canvas.Clear()
        mathPainter.Draw(e.Surface.Canvas)

[pavledev]

@charlesroddie How I can add scrollbar to SKControl?

[Happypig375]

Use scroll bars from Windows Forms: https://docs.microsoft.com/en-us/dotnet/desktop/winforms/controls/hscrollbar-and-vscrollbar-controls-overview-windows-forms?view=netframeworkdesktop-4.8#:~:text=Windows%20Forms%20ScrollBar%20controls%20are%20used%20to%20provide,horizontally%20or%20vertically%20within%20an%20application%20or%20control.

[pavledev]

@Happypig375 Can you please help me to add them to SKControl?

[FoggyFinder]

@pavledev Consider asking WinForms - related Qs in a some kind of Q&A community. Your Q isn't related to this issue. Moreover it's not even related to CSharpMath itself.

Here is a quick and dirty sample:

using SkiaSharp.Views.Desktop;
using System.Windows.Forms;

namespace CSharpMathSample
{
    public partial class Form1 : Form
    {
        private readonly Panel panel;
        private readonly SKControl skControl;
        private readonly string sample = @"Here are some text.
This text is made to be long enough to have the TextPainter of CSharpMath add a line break to this text automatically.
To demonstrate the capabilities of the TextPainter,
here are some math content:
First, a fraction in inline mode: $\frac34$
Next, a summation in inline mode: $\sum_{i=0}^3i^i$
Then, a summation in display mode: $$\sum_{i=0}^3i^i$$
After that, an integral in display mode: $$\int^6_{-56}x\ dx$$
Finally, an escaped dollar sign \$ that represents the start/end of math mode when it is unescaped.
Colors can be achieved via \backslash color{color}{content}, or \backslash \textit{color}{content},
where \textit{color} stands for one of the LaTeX standard colors.
\red{Colored text in text mode are able to automatically break up when spaces are inside the colored text, which the equivalent in math mode cannot do.}
\textbf{Styled} \texttt{text} can be achieved via the LaTeX styling commands.
The SkiaSharp version of this is located at CSharpMath.SkiaSharp.TextPainter;
and the Xamarin.Forms version of this is located at CSharpMath.Forms.TextView.
Was added in 0.1.0-pre4; working in 0.1.0-pre5; fully tested in 0.1.0-pre6. \[\frac{Display}{maths} \sqrt\text\mathtt{\ at\ the\ end}^\mathbf{are\ now\ incuded\ in\ Measure!} \]";
        public Form1()
        {
            InitializeComponent();
            panel = new Panel()
            {
                AutoScroll = true,
                Dock = DockStyle.Fill
            };
            skControl = new SKControl()
            {
                Width = Width,
                Height = Height
            };
            
            panel.Controls.Add(skControl);
            this.Controls.Add(panel);
            skControl.PaintSurface += SkControl_PaintSurface;
        }

        private void SkControl_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            e.Surface.Canvas.Clear();
            var painter = new CSharpMath.SkiaSharp.TextPainter
            {
                LaTeX = sample
            };
            painter.Draw(e.Surface.Canvas);
            var r = painter.Measure(Width);
            skControl.Width = (int)r.Width;
            skControl.Height = (int)r.Height;
        }
    }
}