The Uno.UI WebAssembly WPF Host

The Uno Platform provides the ability to run UWP and .NET code through the Mono runtime. While WebAssembly makes it very easy to deploy on the Web, it currently is, as of October 2018, not very easy to debug a application running in this context.

In order to ease the debugging of such an application, the Uno Platform provides the Uno.UI.WpfHost package to allow running the Uno Platform inside of a WPF application, using a Chromium WebView.

This mode is possible by replacing the WebAssembly runtime by the Desktop .NET Framework, and have it communicate with the WebView via Javascript eval() calls on the WebView control. This enables easier troubleshooting of the .NET code, as all the C# code is running in a VisualStudio supported scenario, where C# edit and continue and all the debugger features are available.

Using the Uno.UI.WpfHost package

• Create an Uno Platform app using the Visual Studio extension named MyApp
• Add a WPF application head
• Reference the Uno.UI.WpfHost package
• In the new WPF head, reference the MyApp.Wasm project
• The constructor of the MainWindow, add the following code:

UnoHostView.Init(() => MyApp.Wasm.Program.Main(new string[0]), $@"..\..\..\..\MyApp.Wasm\bin\{configuration}\netstandard2.0\dist");

• In the MainWindow.xaml file:

<Window x:Class="SamplesApp.WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SamplesApp.WPF"
		xmlns:unoHost="clr-namespace:Uno.UI.WpfHost;assembly=Uno.UI.WpfHost"
		mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <unoHost:UnoHostView />
    </Grid>
</Window>

Running the application will then execute the Wasm head code inside of the WPF application, allowing for the debugging of the C# code.