Uno Cupertino Toolkit Library

The Uno Cupertino Toolkit library is available as NuGet packages that can be added to any new or existing Uno solution.

Installation

Note

Make sure to setup your environment first by following our instructions.

Creating a new project with the Uno Material Toolkit

Install the dotnet new CLI templates with:
```
dotnet new install Uno.Templates
```

Create a new application with:

dotnet new unoapp -o CupertinoToolkitApp -toolkit -theme cupertino

Installing Uno Cupertino Toolkit in an existing project

Depending on the type of project template that the Uno Platform application was created with, follow the instructions below to install the Uno Cupertino Toolkit.

Edit your project file (PROJECT_NAME.csproj) and add Toolkit and Cupertino to the list of UnoFeatures:
```
<UnoFeatures>Toolkit;Cupertino</UnoFeatures>
```

Initialize the resources in the App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>

            <!-- Code omitted of brevity -->

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

            <!-- Load Cupertino Toolkit resources -->
            <ToolkitResources xmlns="using:Uno.Toolkit.UI" />
            <CupertinoToolkitResources xmlns="using:Uno.Toolkit.UI.Cupertino" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

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

Add the resources to AppResources.xaml:

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>

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

        <!-- Load Cupertino Toolkit resources -->
        <ToolkitResources xmlns="using:Uno.Toolkit.UI" />
        <CupertinoToolkitResources xmlns="using:Uno.Toolkit.UI.Cupertino" />

    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

In the Solution Explorer panel, right-click on your solution name and select Manage NuGet Packages for Solution .... Choose either:
- The Uno.Toolkit.UI.Cupertino package when targetting Xamarin/UWP
- The Uno.Toolkit.WinUI.Cupertino package when targetting net6.0+/WinUI
Select the following projects for installation:
- PROJECT_NAME.Wasm.csproj
- PROJECT_NAME.Mobile.csproj (or PROJECT_NAME.iOS.csproj, PROJECT_NAME.Droid.csproj, and 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)

Add the following resources inside App.xaml:

<Application ...>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>

                <!-- Load WinUI resources -->
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />

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

                <!-- Load Cupertino Toolkit resources -->
                <ToolkitResources xmlns="using:Uno.Toolkit.UI" />
                <CupertinoToolkitResources xmlns="using:Uno.Toolkit.UI.Cupertino" />

                <!-- Load custom application resources -->
                <!-- ... -->

            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Customization

For instructions on changing the default color palette or the font family, please refer to the Uno Cupertino Customization guide.