Add support for displaying C# code samples

[MartinZikmund]

What would you like to be added:

Currently we are able to display XAML code for samples, but not C# code-behind, which is especially relevant for non-UI APIs (but also for some UI APIs).

Why is this needed:

Proper samples

For which Platform:

All

[TopperDEL]

I have an idea for this and so would like to tackle this.

[TopperDEL]

I have a first Spike in this Branch. I've got the code from here.

What would be the best way to integrate this? The other repository with the code for the control comes with the MIT licence, so the code can be used. There is no Nuget to embedd that control. Should we create a real control out of it and put it in some UnoExtension /Community toolkit project? Or is it ok to just include it in the Uno Gallery repo? I also just threw all necessary classes into a file "CSharpDisplayExtension". If we leave it in the Uno gallery repo, I would at least create a folder for all that stuff. Any suggestions what would be the preferred way?

My next idea would be to create a SourceGenerator that automatically extracts the body of an annotated method to a string property that could be bound to from the "CodeHighlightTextBlock". I'm also not sure if this should be included in the gallery itself or if this should be in it's own repo/nuget/project to be more separate from here.

I may put both - the CodeHighlightTextBlock and the SourceGenerator for method bodies - into own repos, create a nuget and reference that from the Uno Gallery. What would you suggest? @MartinZikmund @jeromelaban

[TopperDEL]

Here a quick glimpse:

[TopperDEL]

Sleeping a night about that topic lead me to the conclusion that both topics deserve an own Nuget. The CodeHighlightTextBox might not be that important to put it into something like the Community toolkit, but it might be interesting for someone else. The same goes for the Source Generator to get the C#-code as a variable. This would clutter the gallery app. So I'm going to create separate repos for both together with Nugets and use those Nugets in the gallery app.

[jeromelaban]

At this time, to have the best behavior, this would require the use of multiple instances of the Monaco editor, something that is not yet in a production-ready state (https://github.com/unoplatform/uno.monaco-editor-uwp/pull/14).

[TopperDEL]

That is a nice thing! But also quite heavy for just "showing some code". It is still the plan to use Monaco here? Simply showing code with syntax highlight, selectable and copy-able is already possible with the control from my spike.

So, how may I help then? We would still need a simple way to extract the code to show into a ViewModel-Property, right? Shall I concentrate on that or do you also have something in mind for that, too?

[MartinZikmund]

To have some kind of syntax highlighting and selectability, I would say a WebView with a JS syntax highlighter is still the easiest solution right now 🤔

[TopperDEL]

I had a working prototype for the Syntax-highlighting (see above). That could be used and is purely C#-stuff. And we would still need a way to extract the code from the sample-code without doubling it (at least this would be nice).

If we want to go that route I would still be happy to contribute. :)

[MartinZikmund]

@TopperDEL your approach uses WebView under the hood correct?

[TopperDEL]

No, it is a pure C#-implementation. I found a TextBlock-project which renders text with syntax-highligting. See here.

[MartinZikmund]

@TopperDEL @morning4coffe-dev the issue here will be mainly the lack of RichTextBlock support. I would say using an embedded GitHub code could be easier. On mobile targets and UWP we could just use WebView for that, on WASM we could for now have a custom control, that renders the GitHub <iframe>. Nice thing would also be that people could then navigate to the snippet on GitHub directly

[francoistanguay]

I feel supporting multiple Monaco instances should be the way to go and we'll most probably need it in a refreshed playground...

[Xiaoy312]

I remember there was issue with having multiple monaco editors on wasm, where we cant target an specific editor to set content; it just always target the first. In figma, we got around it by reusing the same editor instance, but at the cost of performance (changing "editor"/tab = reloading the content). The same tech can be used for playground, but it wouldnt work in gallery, due the way it is setup: we cant move the editor around on the visual tree, only resizing. We should probably address this problem first.

Syntax highlighting aside, I think there is also the automatic retrieval of actual source, sort of like what ShowMeTheXaml does for .xaml file, but for .cs.

[TopperDEL]

I'm sorry but I still don't get the goal here. I have a partially working solution here in pure C#, that renders C#-code in a control. It is working - we just need to include that control into the gallery app or make a seperate Nuget for that if we do not want to have it clutter up the gallery app. But it is working!

To get the actual C#-code that is to show we could leverage a code generator that would embedd the actual code into the control during build so we would always show the exact code there, that is working behind the scenes and was used during the build of the app. It is nice, though, to have a direct link to the code on Github - but that could still be added to my approach.

I do not understand why we need that complicated Monado Editor here if we only want to show some C#-code with syntax highlighting.

[agneszitte]

We should match a bit more what WinUI gallery is doing I think

• Current Uno.Gallery version (XAML + C#)

• WinUI Gallery version (XAML + C#)

[MartinZikmund]

I think the easiest could be to use a WebView and embed GitHub gists or other source code embedding. This way the same UI will show everywhere