I have decided to release the code as open-source under the MIT license. There are still a lot of issues that need to be worked out. Over the next few weeks I will try to document everything that's there. Hopefully the community will contribute to make something we all want. And if nothing else, maybe it will be educational for folks trying to develop for WASM/Emscripten.
The code can be found here: https://github.com/XamlEngine/Core
XamlEngine has been created to enable Xaml to be rendered natively in the browser. While the goal is to keep it compatible with .NET, it has no .NET dependencies. It has been authored completely in C++ targeting OpenGL. Emscripten is used to compile a WASM package which translates the OpenGL bindings to WebGL. Because the use of OpenGL, any platform could be targeted. However, the browser is currently the highest priority.
Fonts are downloaded at runtime because there isn't access to the local system fonts. So you will see the page render first, then after the font is downloaded the Xaml engine does a invalidate/layout/render pass.
Check out the running demo here: http://www.xamlengine.com
The current version is available for use freely as-is from it's location. Use at your own risk. There is no production support for this currently.
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XamlEngine.com</title>
</head>
<body>
<script type="text/xaml" pageLayout="full">
<UserControl>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="#FF000000" Grid.Row="0" />
<TextBlock Text="XamlEngine" Foreground="#FFFFFFFF" Grid.Row="0" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock Text="This page has been rendered natively from Xaml in your browser using WebAssembly & WebGL." Grid.Row="1" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Center" TextWrapping="Wrap" />
<Rectangle Fill="#FF000000" Grid.Row="2" />
<TextBlock Text="Copyright XamlEngine.com 2018" Foreground="#FFFFFFFF" Grid.Row="2" FontSize="18" VerticalAlignment="Bottom" />
<TextBlock Text="More info: [email protected]" Foreground="#FFFFFFFF" Grid.Row="2" FontSize="18" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
</Grid>
</UserControl>
</script>
<script type="text/javascript" src="http://resources.xamlengine.com/scripts/alpha/1.0.0/XamlEngine.js"></script>
</body>
</html>At this point the feature set is very limited. The current features that exist are only to satisfy a proof-of-concept.
Width
Height
VerticalAlignment
HorizontalAlignment
Limited support for ContentControl has been created to satisfy UserControl functionality, as UserControl inherits from ContentControl. It doesn't currently support ContentTemplates.
Content
Currently the UserControl is used as the root Xaml element.
RowDefinitions
ColumnDefinitions
Row
RowSpan
Column
ColumnSpan
Very limited support for images has been created. It currently works with a handful of PNGs. But others are having issues. This is a bug that's currently being looked at. If the image doesn't render properly, a black rectangle is rendered in place.
Source
Currently only supports fill with a SolidColorBrush.
Fill
Text
Foreground
FontSize
TextAlignment
TextWrapping
After achieving the initial proof-of-concept, the goal is to now focus on keyboard and mouse input. This also means that integrating with higher-level languages like (but not limited to) Javascript is necessary. So this effort will include access to the Xaml DOM. In addition, bug fixes, performance improvements will also continue.