[Experiment] GraphicsControls in Linux using SkiaSharp

[jsuarezruiz]

Create the basic stuff to have a Gtk 3 .NET MAUI App and a SkiaSharp GraphicsView implementation to draw and allow to use the control on Linux.

[congzhangzh]

this works or not?

[congzhangzh]

@jsuarezruiz can you give more overview or more details idea, maybe I can give a hand.

BTW, I know wpf & gtk very much and work on wpf&C++ for 10 years.

[jsuarezruiz]

Sure, let me explain it better. I have done some tests using Gtk and SkiaSharp, and the idea would be:

• Create a target for Linux using Gtk or use: https://github.com/jsuarezruiz/maui-linux We need "only" the Core necessary to create the native window.
• Use: https://github.com/dotnet/Microsoft.Maui.Graphics/tree/a46ffe17dae9cd9ec339eceac524541b0d801c24/src/Microsoft.Maui.Graphics.Gtk to be able to implement https://github.com/dotnet/Microsoft.Microsoft.Microsoft.Controls/blob/main/src/GraphicsControls/Handlers/GraphicsControlHandler.cs Basically, create a SkiaSharp Canvas and expose the touch events.
• With the above, we would be able to render all the controls. A couple of specific cases would be missing to haveeverything. For example, the DatePicker is fully drawn but the popup to select the date (for now) is native. It would require something like https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Platform.GTK/Controls/DatePicker.cs#L116

Thanks for your interest @congzhangzh!

[congzhangzh]

@jsuarezruiz tks for your reply

it seems maui main repo has change so much, is this usable directly like https://github.com/dotnet/maui/tree/main/src/Compatibility/Core/src/GTK @davidortinau

btw, at first i think this repo maybe possible to do something like cross platform wpf, whick I just need:

1. Implement something like presentsource to render view on native window in gtk(this repo has done)
2. Implement input system to pass keyboards, mouse, touch to view
3. Do something infrastructure like ui dispatch mechanic

this way seems hard as xaml support is needed from other repo, which make work heavy first.

A more elegant way may be follow fluter way like

1. Use razor as description language
2. Define page abstract, which can be attach to a native windows system, which shoud be easy

but I don’t know maybe blazor is too tie to asp.net, is that possible to use blazor standalone, and plugin into blazor diff and merge system ? @Eilon

[Eilon]

@congzhangzh - Blazor syntax and files are adaptable to almost any UI system. We have an experimental project where it was adapted to render native Xamarin.Forms controls here: https://github.com/dotnet/MobileBlazorBindings/

Maybe some day we will have this as an option for .NET MAUI in an official supported product, but we're not yet working on that.

[congzhangzh]

@congzhangzh - Blazor syntax and files are adaptable to almost any UI system. We have an experimental project where it was adapted to render native Xamarin.Forms controls here: https://github.com/dotnet/MobileBlazorBindings/

Maybe some day we will have this as an option for .NET MAUI in an official supported product, but we're not yet working on that.

@Eilon Tks for you reply, seems very promising, maybe that will be a good combine with maui+self draw+blazor, performance maybe a big issue, but should good for simple light mobile usage

https://github.com/dotnet/MobileBlazorBindings/tree/main/src/BlinForms.Framework

https://github.com/dotnet/MobileBlazorBindings/tree/main/src/ComponentWrapperGenerator

[congzhangzh]

@jsuarezruiz hi, I have an overview about Microsoft graphics and Microsoft graphics controls now But Create a target for Linux using Gtk is hard, not for coding part but for .net config stuf, like

SDK, TFM, Workload, props file, target file, especially for maui on linux.

maybe you can rebase you maui linux fork, make the init config part work.

the implement part should be easy to iterate:)

[congzhangzh]

Create the basic stuff to have a Gtk 3 .NET MAUI App and a SkiaSharp GraphicsView implementation to draw and allow to use the control on Linux.

@jsuarezruiz hi, maybe we can add a net6-linux-skia-gtk custom target frameworks, which easy integration to current solution file?

[congzhangzh]

I make the GraphicsTester.Skia.Gtk project work on linux after some work, great!

should all the project be migration to 6.0 first? or keep net standard 2.0, this will block Microsoft.Maui.Graphics.Control on linux, as all maui related work based on 6.0 @jsuarezruiz

BTW, I block on properly config Microsoft.Maui.Graphics.Controls for work on Linux? I am digging on props and target file, and maybe I need to build all the Maui stuf?

[lytico]

@congzhangzh there is a ongoing work to implement maui over gtk in this tree:

https://github.com/jsuarezruiz/maui-linux/tree/main-linux

maybe you can "plunder" something from there, as getting the main window etc.

[congzhangzh]

plunder

tks，very cool I hope we can add a new maui-gtk workload, which focus on self draw solution, and works cross desktop:)

[congzhangzh]

One more foundation question, each control will tie to one skiacanvas or as whole?

btw, fyi, I have make maui core pass build for linux.

I reference winui platform implement, need future step on for a simple gtk maui application, which will show all selfdraw control in a stackpanel

[congzhangzh]

@lytico @jsuarezruiz Can you explain that?

[congzhangzh]

Fyi, I finish a basic script for linux core build

#!/bin/bash
#tips:
#1. if you need check msbuild log, add /bl at the end of msbuild command and view the log by  https://msbuildlog.com/
#2. if you need debug you msbuild project file, you can add a custome target to output something like
#  <Project>
#           <Target Name="DisplayMessages">
#               <Message Text="mono cecil path is = $(PkgMicrosoft_Maui_Graphics) aa " Importance="high" />   
#               </Target>     
#  </Project>
#  then run something like: dotnet build src/Controls/src/Build.Tasks/Controls.Build.Tasks-net6.csproj /t:RebDisplayMessagesuild  /p:TargetFrameworks=$framework /bl
#3. you can change your framework by set framework or pass from command line

framework=${1:-netstandard2.0}
# framework=${1:-net6.0} # not work
echo "target framework is $framework"

dotnet build src/Core/src/Core-net6.csproj /t:Rebuild /p:TargetFrameworks=$framework  /bl
dotnet build src/Controls/src/SourceGen/Controls.SourceGen.csproj /t:Rebuild /p:TargetFrameworks=$framework  /bl
dotnet build src/Controls/src/SourceGen/Controls.SourceGen.csproj /t:Rebuild /p:TargetFrameworks=$framework    /p:WarningsNotAsErrors="CS8604;CS8600;CS8602" /bl

#TODO: this not working
#-warnnotaserror:8604;8600;8602
#dotnet run /home/congzhang/.dotnet/sdk/6.0.100/MSBuild.dll --project  src/Controls/src/SourceGen/Controls.SourceGen.csproj /t:Rebuild /p:WarningsNotAsErrors="CS8604;CS8600;CS8602" /bl /p:WarningLevel=0 /p:TargetFrameworks=$framework

dotnet build src/Controls/src/SourceGen/Controls.SourceGen.csproj /t:Rebuild  /p:TargetFrameworks=$framework 
dotnet build src/Controls/src/Xaml.Design/Controls.Xaml.Design-net6.csproj /t:Rebuild  /p:TargetFrameworks=$framework 
dotnet build src/Controls/src/Core.Design/Controls.Core.Design-net6.csproj /t:Rebuild  /p:TargetFrameworks=$framework 
dotnet build src/Controls/src/Xaml/Controls.Xaml-net6.csproj /t:Rebuild  /p:TargetFrameworks=$framework 
dotnet build src/Controls/src/Core/Controls.Core-net6.csproj /t:Rebuild  /p:TargetFrameworks=$framework 

#TODO: this need more work, need dig, for now, I just know that the package path variable is empty under linux, copy will failed, work around:
# <ItemGroup Condition="$(RuntimeIdentifier.StartsWith('linux'))" >
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.dll" />
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.pdb" />
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.Mdb.dll" />
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.Mdb.pdb" />
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.Pdb.dll" />
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.Pdb.pdb" />
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.Rocks.dll" />
#       <_Files Include="$(PkgMono_Cecil)\lib\netstandard2.0\Mono.Cecil.Rocks.pdb" />
#       <_Files Include="$(PkgMicrosoft_Maui_Graphics)\lib\netstandard2.0\Microsoft.Maui.Graphics.dll" />
#       <_Files Include="$(PkgMicrosoft_Maui_Graphics)\lib\netstandard2.0\Microsoft.Maui.Graphics.pdb" />
#       <_Files Include="$(PkgSystem_CodeDom)\lib\netstandard2.0\System.CodeDom.dll" />
# </ItemGroup>
dotnet build src/Controls/src/Build.Tasks/Controls.Build.Tasks-net6.csproj /t:Rebuild  /p:TargetFrameworks=$framework

#tips:

result_path=src/Controls/src/Build.Tasks/bin/Debug/$framework
echo you should get dll under $result_path
ls $result_path

[congzhangzh]

One more question, base on the basic maui library, maybe we can implement GTKMauiApplication, GTKMauiWindows,GTKMauiGraphicsView out of MAUI source tree and Microsoft.Maui.Graphics.Controls tree, which should easy to maintain? How about this idea? @jsuarezruiz @lytico

[congzhangzh]

Fyi. https://github.com/dotnet/maui/tree/main/src/Core/src/Handlers/Application https://github.com/dotnet/maui/tree/main/src/Core/src/Handlers/Window https://github.com/dotnet/maui/tree/main/src/Core/src/Handlers/GraphicsView https://github.com/dotnet/Microsoft.Maui.Graphics.Controls/blob/main/src/GraphicsControls.Sample/GraphicsControls.Sample/MauiProgram.cs https://github.com/dotnet/Microsoft.Maui.Graphics.Controls/blob/main/src/GraphicsControls.Sample/GraphicsControls.Sample.WinUI/Platforms/Windows/App.xaml.cs

[congzhangzh]

one version by pure code and without xaml support should be possible

[lytico]

https://github.com/jsuarezruiz/maui-linux/blob/main-linux/src/Core/src/Handlers/Window/WindowHandler.Gtk.cs https://github.com/jsuarezruiz/maui-linux/blob/main-linux/src/Core/src/Handlers/GraphicsView/GraphicsViewHandler.Gtk.cs

Handlers.Application is not implemented by now.

[congzhangzh]

More part maybe help https://github.com/dotnet/Microsoft.Maui.Graphics.Controls/blob/main/src/GraphicsControls/Platform/Windows/NativeGraphicsControlView.cs https://github.com/dotnet/Microsoft.Maui.Graphics.Controls/blob/main/src/GraphicsControls/Handlers/GraphicsControlHandler.Windows.cs

https://github.com/dotnet/Microsoft.Maui.Graphics.Controls/blob/main/src/GraphicsControls/Handlers/GraphicsControlHandler.cs

https://github.com/dotnet/Microsoft.Maui.Graphics.Controls/blob/main/src/GraphicsControls/Handlers/MixedGraphicsControlHandler.cs

[jiafuzhang]

Great!