Working With Uno Platform And Rider

Khalid Abuhakmeh

Today we would like to share with you a special guest post from our friends over at Uno Platform. They have been working hard on bringing a first-class cross-platform experience to .NET developers everywhere. This post was originally writen by Kenzie Whalen-Dunn.

With the release of Uno Platform 3.0, developers can now create multi-platform applications for desktop, mobile and web apps using Rider.

For those new to Uno Platform – it enables for creation of pixel-perfect, single-source C# and XAML apps which run natively on Windows, iOS, Android, macOS, Linux and WebAssembly. Uno Platform is Open Source (Apache 2.0) and available on GitHub.

This article will walk through setting up Rider for Uno Platform development, cloning a real-world Uno Platform app and running on WebAssembly, Android, and iOS.

Prerequisites

Folks trying out Uno Platform will need Rider 2020.2 or higher, and the necessary Rider Xamarin Android Support Plugin. A macOS or an iOS compatible device is optionally needed to run the iOS target project.

Cloning the Uno Ch9 repository

Ch9 is a real-world demo app built with Uno Platform, currently available on Android, iOS/macOS , Windows and WebAssembly. It uses the publicly-available video feed from Microsoft’s Channel 9 for content. It is currently available in App stores and it is also open source to help developers learn from its implementation.

First step is to get the Ch9 app in all it’s glory on your local machine – use the open source GitHub repository: https://github.com/unoplatform/Uno.Ch9

Having cloned the repository, you should now see a solution with six projects, a shared project that holds our application logic and XAML views. Additionally, we have a project for each target device Uno Platform supports: Android, iOS, macOS, UWP, and WASM.

Now we’re all set up to run the Ch9 app in all it’s glorious cross-platform glory!

Running on WebAssembly, Android, and iOS

We’ll start by building and running the newest addition to the Uno Platform family, WebAssembly, also known as Wasm.

Wasm is a format for running compiled code within a stack-based virtual machine. Some of those clients include web browsers like Google Chrome, Microsoft Edge, and Apple’s Safari. Wasm gives developers the ability to take their Uno Platform applications and deliver it to the broadest audience on the planet, web-client users.

The Ch9 solution has multiple run configurations. To run the Wasm project, you need to set the startup project to Ch9.Wasm and Debug | Any CPU.

We can also use the Ctrl+Alt+Shift+R keyboard shortcut to switch between run configurations.

Once you’ve selected the right run configuration for Wasm, we can run the Ch9 project using ASP.NET Core’s built-in server. Important note, you’ll want to open http://localhost:5000 as the calls to the Ch9 API will fail otherwise.

Before running the Android project, you need to ensure you have the Android SDK properly installed. You can check this by heading to Settings > Environment.

The Ch9 solution is one that Uno ships actively to all app stores. To comply with security measures of each app store, we sign our final results for submission.

In the case of this demo, you need to disable this signing to run the Android project on your machine.

Navigate to the .csproj file by using the Edit Ch9.Droid.csproj context menu on the Ch9.Droid project. Right-click the project and select Edit | Edit ‘Ch9.Droid.csproj’. You can also drag the project from the Solution Explorer window into your editor.

Find and comment out the following MSBuild target to disable Android package signing.

<Target Name="GenerateBuild"
DependsOnTargets="SignAndroidPackage"
AfterTargets="Build"
Condition="'$(BuildingInsideVisualStudio)'==''" />

Again, you’ll need to set the startup project to Ch9.Android and Debug | Any CPU, or use the Ctrl+Alt+Shift+R shortcut.

If you don’t happen to have an Android device set up already, you can use the Android Virtual Device Manager (AVD) to create a new virtual android device.

Running the Ch9.Droid project should launch an Android device and deploy the app for testing.

Finally, let’s run the same application on an iOS device. Make sure you are connected to a Mac, or are running the solution on a macOS device.

We need to switch the run configuration again and set the startup project to Ch9.iOS and Debug | iPhone Simulator. Select your iOS device or iOS simulator and hit “Run”!

For folks having issues seeing any iOS devices on macOS, ensure you have installed XCode.

Let’s make some changes

Now that we have seen how the app runs on our 3 different platforms, let’s make a small change to add our own personal touch.

Our main code is split between two projects, the Shared project and the UWP project. Our Shared project has our ViewModels, Assets, and Converters. Our UWP project has our Views and Styles.

All projects automatically reference the Shared project, however, for the Views in the UWP project to be shared, a linked folder has been added to each project.

Navigate to Ch9.UWP > Views > Content > ShowsPage.xaml.

Like all MVVM apps, our Views are what the user sees. This xaml file is the list of shows displayed in the screenshots above. Let’s head to the Shows grid view portion of the xaml file. The GridView should contain a custom Card element:

<material:Card HeaderContent="{Binding Show.Name}"
           HeaderContentTemplate="{StaticResource HeaderTemplate}"
           MediaContent="{Binding Show.ThumbnailUrl}"
           ios:Width="400"
           ios:Height="260"
           Background="{StaticResource MaterialSurfaceBrush}"
           MediaContentTemplate="{StaticResource SampleImageTemplate}"
           Style="{StaticResource CustomMaterialCard}" />

Change the HeaderContent to read HeaderContent="This is a Rider card!". This will update every card’s title to that text. We can now run again on our 3 platforms to see the change.

Uno Platform developers will benefit from the quick fixes and suggestions offered by Rider.

Additionally, navigating to XAML views and their respective C# implementation classes has never been easier when developers use the “search everywhere” tool.

Speaking of XAML, developers can navigate to references, even when they have potentially multiple locations.

Now you are all set up to continue tinkering with the Ch9 project or to create your own Uno Platform app using Rider! For further reading on Uno Platform head over to www.platform.uno for more sample apps, showcases and more.

We’d like to thank Uno for their guest post, and like mentioned above, please consider Uno Platform when building cross-platform experiences.

An important note, we are considering supporting more Uno Platform XAML syntax. We want to hear your thoughts on supporting more Uno Platform features. Please vote and leave comments in this issue.

Subscribe to a monthly digest curated from the .NET Tools blog:

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!