Uno Platform for Xamarin.Forms Developers

Uno Platform enables you to run your Xamarin.Forms apps in browsers via WebAssembly. Reuse your app business logic and expand your reach to web by executing one command line in Visual Studio Command Prompt.

WebAssembly Renderers Architecture

renderers-xamarin-forms-uno-platform
renderers-xamarin-forms-uno-platform

How It Works

Both Uno and Xamarin.Forms are built on top of the Xamarin Native stack. Xamarin.Forms runs on UWP via the Windows.UI.XAML APIs and the Uno Platform is an implementation of the UWP (and future WinUI) APIs.

When you build an application with Xamarin.Forms for UWP/WinUI under the hood Xamarin.Forms is initializing the controls of that platform. These controls can have basic styles applied to them via the Xamarin.Forms API. If you want to override this process and further customize the appearance, then that’s possible by using Custom Renderers. The 'Uno.Xamarin.Forms.Platform' NuGet package contains Xamarin.Forms Custom Renderers for WebAssembly via the Uno Platform.

 

Get Started

1. Create a Xamarin.Forms project

  • Check “Place project and solution in the same directory”
  • Check “Windows (UWP)”
  • Using a VS Developer Command Prompt, navigate to the folder containing the solution

2. Type the following to install the latest templates:

dotnet new -i Uno.ProjectTemplates.Dotnet::1.46.230-dev.2723

3. Then type the following to create the new WebAssembly project:

dotnet new wasmxfhead

4. Open or Reload the solution in Visual Studio

5. Set the WASM project as the startup project

6. Open the Nuget Package manager for the WASM project and update the Uno.Xamarin.Forms.Platform project to the latest experimental package

7. Run the app using Ctrl+F5 (without the Visual Studio debugger), and you’re good to go!

 

Sample Application

To showcase Uno Platform Renderers in action we ported Charles Pretzold’s RPN calculator app built
with Xamarin Forms, available as a part of Xamarin Forms sample apps gallery.

See RPN Calculator on the web live or get sample code from our GitHub repo.

To run the sample RPN app simply follow steps above from the folder your RPN app is in.

 

Real-World Implementation

Quite a few Xamarin developers sent us samples of their apps now running in the browser. We love the
one Jonathan Dick from Xamarin team created for his Pool Math application.

 

Pool Math on Mobile

Pool Math on Web