[Enhancement] Managed UI For Xamarin.Forms=> Xamarin.UI

[John0King]

Summary

Today there are many managed/web based UI Framework has achieve great success for mobile develop
For example ：

• Flutter
• uni-app (target 8 platform)
• hybrid app

and their success all come with that the UI is very easy to control ! and now Xamarin.Forms is still working on to use platform native controls/layout. that cause many devs to release third party UI Framework much harder , we had to build each render for each platform (although this ability is great), otherwise it will not work. that also make harder to customize the UI (for example , TextBox's border , background color), and also make dev who new to Xamarin.Forms harder to learn .

I'm hoping that there is a set of managed UI , that can work together to Xamarin.Forms but should lighter than Xamarin.Forms (app lunch faster).

The managed UI should also have a virtual graphic engine that enable any kind of control/UI can be implement.

Features

• managed pages
• managed layouts
• managed controls (TextBox ,Label , Border....)
• template everything (alert, popup, toolbar, modal)
• Xamarin.Forms's native control can be used

managed pages, managed layouts and managed controls give us the full screen as a "canvas" , we can "draw" anything on it. managed controls may not be fully managed, it also may be a native controls that play with the "drawing styles" (backgroundColor, borderThinkness, FontColor, margin, borderRadius, ect ) , for example the TextBox managed control

[John0King]

an idea of the lightweight :

• all managed controls (including customized user controls) all should use the same Xamarin.UI.Renders.ManagedUIRender (not sure will this make the app launch faster)
• and Xamarin.Forms.xxx use current different platform Render

at last, these will make third party UI framework release easier.

and for the virtual graphic engine , maybe the opensource C# game engine can help:

• UrhoSharp
• https://github.com/stride3d/xenko https://xenko.com/
• Unity3d (copyright required)

With a drawing engine abstract by DirectX, OpenGL, Vulken and WebGL , Xamarin's Managed UI should be really fast and smooth.

[bondarenkod]

It would be awesome to have .Net based tool from Xamarin family with flutter-like approach to render UI.

• access to large set of libraries from .net world.
• extremely fast UI.
• Existing Shell (reworked) as the primary way to deal with navigation, pages etc.

[yurkinh]

Here are some Proof of Concepts for this idea:

• Unity backend for Xamarin.Forms link
• SkiaSharp backend (ios only) for Xamarin.Forms link
• RecatorUI works on top of Xamarin.Forms link

[charlesroddie]

Good goals here. But you can basically do this already, and so it's not necessary to do a lot of extra work inside or replacing Xamarin.Forms.

that cause many devs to release third party UI Framework much harder , we had to build each render for each platform

Just write a control using SkiaSharp, and it can be used it on any .Net UI platform. This work will complete the picture: mono/SkiaSharp.Extended#79

[yurkinh]

Here is one more PoC of SkiaSharp backend for two platforms link.
Very close to what this topic is about

[John0King]

a little suggestion here, the drawing engine is not the primary goal here， it's jut one tech to support complex graphic,
the main goal here should be unify ui controls (look the same on every platform),
some thought：

• navigation component : does any app that must not use navigation ? so why navigation is not a App level stuff, current it is page level, Shell or NavigationPage , and they has different navigation model. we should have a defaut app level Navigator that unify the navigation model,(and we can use it to create widget/component level naviation , like TabBar)
• BottomTabbar , just a component that we can use to create our own TabPage, and that should be 100% customizable (a example : I saw many app's tabbar is ”home“ is a big circle in center , and other tab is normal rectangle ps: not same height)
• toolbar: toolbar should be fully customiable with template
• FlyoutLayout : a layout that has two content area, the hidden area, and visible area, we can add a button to the visible area , then it our "hamburg menu flyout"
• portal system: look at angualr's portal system to create modal or any small "dialog" using a service and template, see overlay and portal

the final goal is that if you UI app do not require any platform tech (at least 90% of app are only force on UI , that's why html5 and flutter popular, because they can define the UI that the customer/boss/designer want ) just a ridicule （吐槽一下，do not know how to translate） : xamarin.forms is tech that build UI applications, but the most vulnerable part is to control UI 🤣

---

another part is Xaml, that I do not know where should I fill the issue : here ? maui ? xaml stanard ? roslyn? runtime?

thought 1： base on current XAML,

XAML is the most powerful UI language in the past, but it not been innovate since it was born, as a "language"
it missing control flow and loop flow .

1. we should add x:if x:foreach to the xaml compiler
2. command and event , event give us more control, and event today there are more event than command, and command is just a { CanExcuate:boolean, Action: (...args)=>void } and we can use <Button Tap="e=> doSomeThing(e)" />
3. more compiler power by drop the DataContext and in favor of direct ref , eg. <Entry x:Name="txt" Text="2020-1-1" /> <Label Text="{ txt?.Text | DateFormater: 'yyyy/MM/dd' | Formate: 'Time is {0} , cheers' }" />

so why not just blazor, blazor requir us have full C# syntax understand, that will have a dependency on Roslyn compiler and we have to compile it xaml=>C# => il , it then not possible to be just a template language .
with is version , we can have both a full compiled version and an interpreter (we only need understand only a few syntax, and it's part of the XAML ： member access, index , lambda , formater+convert)
angular's template is greet, and we should lean from it

thought 2 : component language , maybe just a fantasy

it's a little magical, this one need to do in roslyn , since Xaml will fully compile to IL, and C# is also comple to IL , and Xaml is great to represent Cascade UI maybe one day we can use them as we want

public class OurUI :  View
{
     public View Body =>{
        return  >>>>xaml
         <Grid>  ....  </Grid>
<<<< 
     }
}

// equal to
public class OurUI :  View
{
     public View Body =>{
        return  new Grid()
        {
            //....
        }
     }
}
 

a little out of the topic , but when this can be use , imaging

public const byte[] ImageBytes =  >>>>bytesloader   ./Image.png    <<<< // read the image and return it's array
// equal to 
public const byte[] ImageBytes = 0xFF00CCDDEEFFAA0366......;
---------------
public const string Tempalte  = >>>> static-compile
var tag = new TagBuilder("div");
div.AddClass("btn")

return div.ToString()
<<<<;

[jfversluis]

Thanks for this suggestion! As Xamarin.Forms is now in maintenance mode, this will not happen anymore for Xamarin.Forms. We're only adding bugfixes and stability fixes.

If this is still important to you, make sure to check the .NET MAUI repo and see if it's already on the roadmap. If not, feel free to open a discussion to discuss a change first or open an issue with a detailed feature request. Thanks!