Search code examples
.netwebassemblyuno-platform

Does uno-platform convert xaml to html or to c# when building for web with wasm?


Uno platform is able to create web apps using c# and xaml. I was wondering how the platform is able to render xaml on the web.

In their documentation (at https://platform.uno/docs/articles/how-uno-works.html#web-webassembly) they say "On the web, each XAML element is converted into an appropriate HTML element. Panels, controls, and other 'intermediate' elements in the visual tree are converted to elements, whereas 'leaf' elements like TextBlock, Image etc get converted into more specific tags (, etc)." However, on a different part of their site (https://platform.uno/uno-platform-for-web-webassembly/) they say "Your app is written in C# and XAML markup. At compile time, Uno Platform parses XAML files into C# code. Then, WebAssembly / .NET creates the information needed to build the app’s visual tree." Does uno-platform convert xaml to html or does it convert xaml to c# and then c# to wasm? Can wasm create graphics for a web page by itself or does it rely on html and only provides logic?


Solution

  • Both documents seems correct.

    For all platforms, the XAML is converted to C# code at compile-time via a source generator.

    The generated C# code will end up instantiating the needed elements which end up as the appropriate HTML tag.

    Let's take Image as an example. When you have <Image ... /> in your XAML, part of the generated code will be generating new Image() { /* set all needed properties */ }.

    On Wasm, this is what Image constructor does:

    _htmlImage = new HtmlImage();
    
    // ...
    AddChild(_htmlImage);
    

    The created HtmlImage maps to an img tag in HTML:

    https://github.com/unoplatform/uno/blob/1c03de4f02e69cc6b02f32c0d5d91061fe551811/src/Uno.UI/UI/Xaml/Controls/Image/HtmlImage.wasm.cs#L7

    public class HtmlImage : UIElement
    {
        public HtmlImage() : base("img")
        {
            // ...
        }
    }