Uno Platform 3.0 – Styling Uno Applications with Fluent and Material styles

Design systems provide a ready-to-use, unified set of controls and styles to use in your application. They make it easy to give a unified and coherent look and feel to your UI. Our research indicates that the majority of developers would like to produce the same, pixel-perfect UI on all target platforms, which made it very compelling for Uno Platform to address Fluent and Material design systems.

This article will explain how to add either Material Design or Fluent Design to a new or existing Uno app with only a few lines of code, and help you boost your productivity with our ready-made styles and controls!

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

 

Fluent and Material Design and Uno Platform

Two of the most well-known design systems are Material Design from Google and Fluent Design from Microsoft. Starting with Uno Platform 3.0 release both of these powerful design systems are now available out-of-the-box to use in your Desktop, Mobile and Web applications built with Uno Platform.

Both Material and Fluent have dark mode-themed styles with no additional code required on your part to support dark mode. Uno Platform is the only way to build a Fluent app for desktop, mobile and web from a single codebase and the only way to build a Material app in C# and XAML that supports desktop, mobile, and web.

Experience and Reuse Fluent/Material from Uno Gallery

Uno Gallery is a collection of ready-to-use Fluent and Material code snippets to help speed up your development.

You can see both design systems in action in the newly revamped Uno Gallery sample apps on iOS or Android. For more easy-to-reuse-code option, you can check out the web version here, which was completely built with Uno Platform for WebAssembly. In Uno Gallery you can easily switch between Material and Fluent styles to see how a given control will look, as well as toggle the active theme to see how they’ll look in dark mode.

You can see and reuse the code used for any control sample in Uno Gallery using the handy “Show me the XAML” button.

Special shout-out to Kevin Bost whose initial ‘Show me the XAML’ repo we forked to get this running.

Material Design and Uno Platform

Material is a design language introduced by Google back in 2014, that’s become the official design language of the Android platform and is increasingly being adopted on the web and on other platforms. It’s known for a flat, geometric style, with design elements inspired by the physical behavior of paper, like dropdown shadows for emphasis.

Alongside Uno Platform 3.0 we’ve released Uno Material, a package that gives you everything you need to use Material Design in your app. You’ll find the NuGet package here, and of course you can browse the source code if you want to see how it’s working.

Uno Material provides overridden styles for the built-in controls provided by Uno and WinUI – Button, ToggleSwitch and so on – giving them a Material look and feel. It also provides a number of custom controls to help your app meet the Material guidelines, including the Card control for holding content and actions related to a single subject, and the Bottom Navigation Bar to facilitate navigation. Set a color scheme once, and Uno Material will consistently apply it to all the controls in your app.

Here are the basic steps to get Uno Material up and running.

(Note: these instructions were correct at the time this article was written. You can get the most complete and up-to-date version here.)

1. If you haven’t created a cross-platform Uno app yet, follow the steps here to create one.
2. Install the latest version of the Uno Material NuGet package in each of your platform head projects.
3. Add the initialization code below to the `OnLaunched()` method in your `App.xaml.cs`.

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
         // Set a default palette to make sure all colors used by MaterialResources exist
         this.Resources.MergedDictionaries.Add(new Material.MaterialColorPalette());

         // Overlap the default colors with the application's colors palette. 
        // TODO: Replace ms-appx:///Views/ColorPaletteOverride.xaml with your resourceDictionary.
        this.Resources.MergedDictionaries.Add(new ResourceDictionary() { Source = new Uri("ms-appx:///Views/ColorPaletteOverride.xaml") });

        // Add all the material resources. Those resources depend on the colors above, which is why this one must be added last.
        this.Resources.MergedDictionaries.Add(new Material.MaterialResources());

        [...]
}

4. Make the color scheme your own by overriding the named resources defined by Uno Material. Refer to the readme for more details.
5. To use a particular Material style on a particular control instance, you can find the name of the style in the Uno Material documentation and apply it like so:

<Button Content="CONTAINED"
Style="{StaticResource MaterialContainedButtonStyle}"/>

To use the Material style for all instances of a control type anywhere in your app, you can define it as the implicit style in your `App.Resources`. For example:

<Style TargetType="ToggleSwitch"       BasedOn="{StaticResource MaterialToggleSwitchStyle}"/>

6. Download the Uno Material Guidelines Sketch file to kickstart collaboration between designers and developers on bringing your design to life with Uno Material.
Uno Material is supported on Android, iOS, WebAssembly, Windows UWP, and MacOS.

Fluent Design and Uno Platform

Fluent Design is a design language from Microsoft, primarily used on Windows 10 and Xbox. Compared to Microsoft’s earlier Windows 8 style, Metro, it has a less ‘flat’ look with greater use of depth and translucency.

Fluent control styles are included ‘out of the box’ with Uno 3.0, no additional NuGet packages to install. Uniquely, Uno Platform now lets you write a Fluent-styled app with a single codebase for desktop, mobile and web. Here’s what you’ll need to do to use them in your app.

Note: these instructions were correct at the time this article was written. You can get the most up-to-date version here.

1. In the UWP project of your app, install the latest stable version of the WinUI 2 package. (You can omit this step if you’ve removed the UWP project from your Uno solution.)
2. Add the following to your App.xaml file:

 <Application>
    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
</Application>

or if you’ve defined other resources already, add XamlControlsResources at the top as a merged dictionary:

 <Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <!-- Other merged dictionaries here -->
        </ResourceDictionary.MergedDictionaries>
        <!-- Other app resources here -->
    </ResourceDictionary>
</Application.Resources>

3. The Fluent styles require the Uno Fluent Assets icon font to be installed to display correctly. If your app was created with a pre-Uno 3.0 version of the Uno app template, follow the instructions here to upgrade your app to use the correct icon font.

Fluent or Material – which is right for you?

There’s no ‘right answer’ when it comes to design languages. Both Material and Fluent are trusted, proven design languages. You can make a great app with either one of them.

One circumstance where you might have a preference is where you’re porting an existing single-platform app that already conforms to one of the two systems. For instance, if you’re porting a native Android app that’s designed in the Material style, you might find it easier to use Uno Material. If you’re taking an existing UWP app cross-platform, Fluent as the latest evolution of Microsoft’s preferred look is a natural choice.

Beyond that, it’s a matter of weighing up which you prefer, and which works best for your application and your end-users.

And of course, should you prefer to customize your UI entirely, Uno Platform gives you the flexibility to do so. You can even build your own design system! We’re excited to see what the community comes up with.

 

David Oliver, Senior Architect, Uno Platform core team