Join our Discord server for community support and discussions

Uno Platform 4.10 — .NET MAUI Embedding, 150+ UI Controls, and more

The 4th release of 2023 brings over 350+ updates to Uno Platform, including the much-requested .NET MAUI Embedding, Lightweight Styling, Shadows, Hot Restart, WebAssembly CSP, and more.

Our team aims to make you as productive as possible in developing with .NET. The community asked for .NET MAUI Controls to be supported in Uno Platform apps in order to aid them in Xamarin Forms migration, so we delivered. We also support the .NET OSS ecosystem and regularly contribute to .NET, including two pull requests (PR1, PR2) that improve MAUI embedding functionality, as well as the latest SkiaSharp 2.88.5 version, which is now compatible with .NET 8 and includes WebAssembly fixes.

Shout out to everyone who helped this release, and welcome all the new contributors. Make sure you try the latest release and register for our online deep dive release webinar – all demos, no recordings!

.NET MAUI 3rd party Components Embedding – 150+ UI components available

The core Uno Platform UI components ecosystem is rich with hundreds of UI controls that run on all mobile, desktop, and web platforms. At the same time, we are getting requests from clients and the community to enable MAUI-specific controls for mobile, Mac, and Windows scenarios only.

With the 4.10 release, Uno Platform allows for embedding .NET MAUI-specific controls from all leading 3rd party vendors like Syncfusion, Grial Kit, Telerik, DevExpress, Esri, Grape City, and the .NET MAUI Community Toolkit. Keep in mind that this cross-platform approach works only for target platforms .NET MAUI reaches – iOS, Android, MacOS, and Windows.

As Uno Platform mobile apps are purely native .NET apps, and MAUI controls are native too, ultimately, your resulting app is a pure native app that feels right on its target operating system, providing a delightful user experience.

MAUI Embedding is enabled via Uno.Extensions packages, which among other things provides easy solutions for navigation, reactive state management, dependency injection, and more.

Get started with MAUI embedding with our new feature option in our Visual Studio extension, and visit our docs to get started with your existing Uno Platform app.

Sample Apps

Here are a few .NET MAUI controls embedded in Uno Platforms mobile apps with accompanying samples from our docs.

To get started quickly with our MAUI Extensions, you can follow this getting started guide to either create a new application with MAUI Extensions, or add MAUI Extensions to an existing application.

“The Uno Platform team has just added a way to embed .NET MAUI components into Uno Platform applications. We are thrilled to see that Syncfusion’s extensive range of .NET MAUI controls can now be used across Android, iOS, MacOS and Windows targets, giving our client base another .NET cross-platform option as they migrate from Xamarin.Forms”.

Daniel Jebaraj – CEO at Syncfusion

Uno Toolkit - ShadowContainer Support

This version of the Uno Toolkit introduces a new library, Uno.Toolkit.Skia.WinUI contains a brand-new control called ShadowContainer. Powered by SkiaSharp, this new control provides the ability to layer both inner and outer shadows to its content. The ShadowContainer can host any number of Shadow objects that support properties such as Color, Offset, Opacity, BlurRadius, Spread, etc.

The following example, taken from the Shadow Builder sample within the Uno Gallery, demonstrates the powerful capabilities of ShadowContainer. We are presented with a small control that allows for the dynamic creation and modification of its root ShadowContainer’s Shadows collection. Each section in the container corresponds to a Shadow currently being drawn on its parent container.

Taking a closer look at this Shadow Builder sample it shows us that the individual components within the view also make use of the ShadowContainer to produce a Neumorphic visual style to the control. Neumorphism is a design style where elements are usually the same color as the background and are only distinguished by shadows and highlights surrounding the element. This makes the elements appear protruding from the background or dented into it. Notice that each TextBox in the Shadow Builder appears sunken into its background, and the elevated Buttons appear indented upon being pressed.

With the power of ShadowContainer to create rich shadows and highlights, we can produce attractive, interesting new styles for controls, such as the Neumorphic style mentioned earlier. To illustrate these capabilities, the Uno Gallery now hosts a new set of Neumorphic styles for most controls, including those from Uno Toolkit, so creating UIs like the one below is super easy and fast.

Lightweight Styling on App, Page or Control Level

With the new release of Uno Themes and Uno Toolkit, all supported controls can now be customized through resource overrides without redefining the style. This method of customization is called Lightweight Styling.

An example of the anatomy of the lightweight styling resources available for something like Uno Material’s FilledButtonStyle can be seen below. The image depicts a Button using the default FilledButtonStyle followed by a second button, also with the FilledButtonStyle applied, but now with specific resource keys overridden to customize its appearance.

Lightweight Styling allows for fine-grained control over the look of your UI components across all visual states. This means that it is now possible to customize the appearance of your Uno Material-styled controls across any visual state without the need to redefine the style.

This is a huge productivity booster as the traditional styling approach would require the entire style to be redefined using a brand new control template, copying the entire old control template, and changing a couple of lines just to make a color change. Lightweight Styling can replace all of that.

As an example, the XAML below defines three Buttons, all using the FilledButtonStyle from Uno Material:

A default Button with no changes
A Button with several brush resources overridden for the “Normal” visual state
A Button that overrides resources that are used for the FilledButtonStyle’s PointerOver visual state.

With this XAML we are given the following visual result, notice the third Button has a new BorderThickness applied and takes on different colors while in the PointerOver state.

For a list of all available lightweight styling resource keys of each supported control, refer to our documentation.

Hot Restart Support

Uno Platform now supports Hot Restart for iOS, a Visual Studio for Windows feature that allows you to debug iOS apps without needing to develop on a physical macOS machine.

Using Visual Studio 17.6 or later, you can get started using this feature by selecting the “Local device” in the debugger toolbar and following the wizard.

You can get more information about this Visual Studio feature on Microsoft docs.

Added Security via Browser CSP support for WebAssembly

On the Web, applications sometimes need additional security to prevent JavaScript injection and Cross-Site scripting attacks. This browser feature is called Content Security Policy (CSP) and support is being added in .NET 8 as well as

SkiaSharp 2.88.5 also includes support for CSP with the removal of all unsafe evaluations its internal javascript support code.

Additionally, CSP support in Uno for WebAssembly has required the complete removal of JavaScript evaluations to JSImport/JSExport.

You can view our documentation for more information, and note that you will need to use the Uno.Wasm.Bootstrap pre-release package 8.0.0-dev.270 or later to take advantage of this feature.

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)