Uno.Cupertino

Uno Cupertino is an add-on package that lets you apply Cupertino - Human Interface Guideline styling to your application with a few lines of code.

Getting Started

Note

As of Uno Platform 4.7, the solution template of an Uno app has changed. There is no longer a Shared project (.shproj), it has been replaced with a regular cross-platform library containing all user code files, referred to as the App Code Library project. This also implies that package references can be included in a single location without the previous need to include those in all project heads.

  1. Create a new Uno project using the Uno Platform App template.

  2. In the Solution Explorer panel, right-click on your app's App Code Library project (PROJECT_NAME.csproj) and select Manage NuGet Packages...

  3. Install the Uno.Cupertino.WinUI

  4. Add the following Cupertino resources AppResources.xaml:

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
    
        <!-- Load Uno.Cupertino resources -->
        <CupertinoColors xmlns="using:Uno.Cupertino" />
        <CupertinoFonts xmlns="using:Uno.Cupertino" />
        <CupertinoResources xmlns="using:Uno.Cupertino" />
    
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
    

Installing Uno.Cupertino on previous versions of Uno Platform

If your application is based on the older solution template that includes a shared project (.shproj), follow these steps:

  1. Open an existing Uno project

  2. In the Solution Explorer panel, right-click on your solution name and select Manage NuGet Packages for Solution .... Choose either:

  3. Select the following projects for installation:

    • PROJECT_NAME.Wasm.csproj
    • PROJECT_NAME.Mobile.csproj (or PROJECT_NAME.iOS.csproj, PROJECT_NAME.Droid.csproj, PROJECT_NAME.macOS.csproj if you have an existing project)
    • PROJECT_NAME.Skia.Gtk.csproj
    • PROJECT_NAME.Skia.WPF.csproj
    • PROJECT_NAME.Windows.csproj (or PROJECT_NAME.UWP.csproj for existing projects)
  4. Add the following resources inside App.xaml:

    <Application ...>
        <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
    
                    <!-- Load WinUI resources -->
                    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    
                    <!-- Load Uno.Cupertino resources -->
                    <CupertinoColors xmlns="using:Uno.Cupertino" />
                    <CupertinoFonts xmlns="using:Uno.Cupertino" />
                    <CupertinoResources xmlns="using:Uno.Cupertino" />
    
                    <!-- Load custom application resources -->
                    <!-- ... -->
    
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>
    

Customization

Customize Color Palette

  1. In the application's App Code Library project (PROJECT_NAME.csproj), add a new Resource Dictionary named CupertinoColorsOverride.xaml

  2. Save the new override file within the App Code Library, for example, under Style/Application.

  3. Replace the content with:

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <ResourceDictionary.ThemeDictionaries>
    
            <!-- Light Theme -->
            <ResourceDictionary x:Key="Light">
                <!-- Override CupertinoBlueBrush -->
                <Color x:Key="CupertinoBlueBrush">#6750A4</Color>
    
                <!-- Add more overrides here -->
                <!-- ... -->
            </ResourceDictionary>
    
            <!-- Dark Theme -->
            <ResourceDictionary x:Key="Dark">
                <!-- Override CupertinoBlueBrush -->
                <Color x:Key="CupertinoBlueBrush">#D0BCFF</Color>
    
                <!-- Add more overrides here -->
                <!-- ... -->
            </ResourceDictionary>
    
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
    
  4. In AppResources.xaml, update <CupertinoColors /> with the override from the previous steps:

    <CupertinoColors xmlns="using:Uno.Cupertino"
                     OverrideSource="ms-appx:///PROJECT_NAME/Style/Application/CupertinoColorsOverride.xaml" />
    

Change Default Font

By default, Uno.Cupertino comes pre-packaged with the SF Pro FontFamily and automatically includes them in your application. Upon installation of the Uno.Cupertino package, you will have a CupertinoFontFamily resource available.

If you would like Uno.Cupertino to use a different font, you can override the default FontFamily following these steps:

  1. Add the custom font following this guide

  2. In the application's App Code Library project (PROJECT_NAME.csproj), add a new Resource Dictionary named CupertinoFontsOverride.xaml

  3. Save the new override file within the App Code Library, for example, under Style/Application.

  4. Assuming the font file has been placed in the App Code Library within, for example, a directory such as Assets/Fonts/MyCustomFont.ttf, your override file would look like the following:

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
        <FontFamily x:Key="CupertinoFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont.ttf</FontFamily>
    
    </ResourceDictionary>
    
  5. In AppResources.xaml, update <CupertinoFonts /> with the override from the previous steps:

    
    <CupertinoFonts xmlns="using:Uno.Cupertino"
                    OverrideSource="ms-appx:///PROJECT_NAME/Style/Application/CupertinoFontsOverride.xaml" />