C# cross-platform games Mobile Problem Solving Technology Snapshot Uno Platform WebAssembly XAML

Using C#, XAML + Uno Platform to Build One Codebase, Cross-Platform Apps

Using C#, XAML + Uno Platform to Build One Codebase, Cross-Platform Apps

For more than a decade, we’ve got been creating purposes with C# and XAML. All through that time, the pair has really only been recognized for Desktop (WPF) and UWP purposes.

Later came Xamarin, which utilizes C# as a unified language to share between all platforms. Then Xamarin.Varieties was launched, which was totally different in that it utilized XAML to develop the consumer interface with a single codebase for cross-platform (iOS, Android, UWP).

This development has excited all the WPF builders on the market. The one remaining platform left was net improvement. At one time, Silverlight was the choice, nevertheless it was deprecated due to heavy loading and security considerations of browser plug-in options.

Then came the WebAssembly [also known as Web Assembly Modules (WASM)] that net browsers can instantly execute with out having to parse a supply file.

In this submit, we’ll talk about find out how to create a rich consumer browser interface utilizing the cross-platform Uno Platform and WebAssembly know-how. The example software will walk by way of building Models, ViewModel and View beneath a shared venture that is widespread to all totally different platform-specific tasks.

What’s WASM?

WebAssembly is a parallel know-how to JavaScript. It exists aspect by aspect with the JavaScript runtime within the net browser’s runtime. It additionally shares the browser sandbox’s security context. So, in contrast to plug-ins of previous, WebAssembly can’t entry pc hardware or OS options.

WebAssembly isn’t a brand new Silverlight in that respect; it depends on the identical browser runtime that JavaScript depends on.

Uno Platform (Open Supply)

There are a few recognized platform developments happening that utilize WebAssembly and target the C# and XAML language to develop a web-based software.

Uno is an open-source platform that provides XAML and C# to develop a cross-platform software (iOS, Android, UWP, WASM) and supports MVVM Mild, MS XAML Behaviours, Reactive UI and any present UWP venture.

Here, I borrow the structure diagram from the platform.uno web site. On iOS and Android, the Uno Platform depends extensively on the Xamarin Native stack. On WebAssembly, the Uno Platform depends immediately on the Mono-Wasm runtime. So with a single codebase, utilizing C# and XAML, Uno Platform allows the event of purposes on all of these platforms.

Getting Began with the Uno Platform

Conditions

Conditions embrace Visible Studio 2019 (newest release), with the Common Home windows Platform, cellular improvement with .NET and ASP.NET, and net workloads put in. Visible Studio 2017 15.5 or later can also be supported, although a number of of the steps could be barely totally different.

Installing the App Templates with Visible Studio

Launch Visual Studio, then click Proceed with out code. Click Extensions -> Handle Extensions from the menu bar. Within the Extension Supervisor, increase the web node and seek for Uno. Obtain the Uno Platform Answer Templates extension and restart Visible Studio.

Create a new undertaking for Cross-Platform App (Uno Venture). Right here, we create the venture identify ConsultantManagement that demonstrates how we will build a single code base cross-platform software.

Create a brand new C# answer utilizing the Cross-Platform App (Uno Platform) template, from Visual Studio’s Start Web page:

Proper-click on the Answer and select Handle NuGet Packages for Answer from the context menu. Click on on the Updates tab, uncheck the embrace prerelease, and replace any of the packages which will have to replace.

Finally, install the Refactored.MvvmHelpers NuGet Packages to each of the tasks in your answer. This is what the Answer Explorer seems like:

Right here, we will concentrate on including code information only beneath ConsultantManagement.Shared venture that’s the shared tasks for all other platforms.

Establishing Modals and ViewModel

Add Model and ViewModel folders in the Shared Venture. For our sample software, add new varieties beneath Mannequin as under:

public class Shopper : ObservableObject

personal string identify;
public string Identify

get => identify;
set => SetProperty(ref identify, value);

public class Marketing consultant : ObservableObject

personal string firstName;
public string FirstName

get => firstName;
set => SetProperty(ref firstName, worth);

personal string sort;
public string Sort

get => sort;
set => SetProperty(ref sort, value);

public ObservableRangeCollection Shoppers get; set; = new ObservableRangeCollection();

Underneath ViewModel, create the MainPageViewModel class to handle the MainPageView:

public class MainPageViewModel : ObservableObject

public ObservableCollection Consultants get => DataProvider.Occasion.Consultants;

personal Advisor newConsultant = new Advisor();
public Advisor NewConsultant

get => newConsultant;
set => SetProperty(ref newConsultant, worth);

personal Shopper newClient = new Shopper();
public Shopper NewClient

get => newClient;
set => SetProperty(ref newClient, worth);

#region Commands
personal ICommand addConsultantCommand;
public ICommand AddConsultantCommand

get

if (addConsultantCommand == null)

addConsultantCommand = new RelayCommand(() =>

if (!String.IsNullOrWhiteSpace(NewConsultant.FirstName))

DataProvider.Occasion.Consultants.Insert(0, NewConsultant);
NewConsultant = new Advisor();

);

return addConsultantCommand;

personal ICommand addClientCommand;
public ICommand AddClientCommand

get

if (addClientCommand == null)

addClientCommand = new RelayCommand(() =>

NewConsultant.Shoppers.Add(NewClient);
NewClient = new Shopper();
);

return addClientCommand;

#endregion

Here is the code behind on MainPage.xaml.cs to instantiate and assign MainPageViewModel to its DataContext:

public sealed partial class MainPage : Page

public MainPageViewModel ViewModel get; set;
public MainPage()

this.InitializeComponent();
ViewModel = new MainPageViewModel();
this.DataContext = ViewModel;

All the UI stuff is written in XAML on MainPage.xaml



Just for the sample venture, our knowledge supply is predefined ObservableCollection of Marketing consultant sort beneath DataProvider.cs as under:

//This can be changed with local database or net api name to fetch knowledge
public class DataProvider

personal static DataProvider instance;
public static DataProvider Instance

get

if (instance == null)

instance = new DataProvider();

return instance;

public ObservableCollection Consultants get; set;

personal DataProvider()

Consultants = new ObservableCollection

new Advisor()

FirstName = “Richard”,
Sort = “Entrance-Finish”,
Shoppers = new ObservableRangeCollection()

new Shopper() Identify = “Microsoft” ,
new Shopper() Identify = “ALink Company”,
new Shopper() Identify = “Startup 123”

,
new Advisor()

FirstName = “John”,
Sort = “Full-Stack Net”,
Shoppers = new ObservableRangeCollection()

new Shopper() Identify = “Tesla”

,
new Advisor()

FirstName = “Brent”,
Sort = “Full-Stack Cellular”,
Shoppers = new ObservableRangeCollection()

new Shopper() Identify = “XYZ Firm” ,
new Shopper() Identify = “G Finance”

;

All set, screenshots of the appliance in several platforms are proven under:

WebAssembly Software (Chrome Browser)

UWP Software

Android Cellular App

IOS Cellular App

Code Pattern Hyperlinks

Last Thoughts

This weblog demonstrated the development of a single-page software using the Uno platform – this strategy allowed us to put in writing code within the powerful XAML and C# languages like we used to do for WPF app improvement. The codebase can also be 100% shared between all of those platforms (iOS, Android, UWP and WebAssembly).

I encourage you to check out the code sample within the GitHub link. We’ll discover the totally different prospects, similar to using present UWP challenge in this software, in future blogs.