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?
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:
public class HtmlImage : UIElement
{
public HtmlImage() : base("img")
{
// ...
}
}