Uno Simple

Important

UnoFeatures: SimpleTheme — add <UnoFeatures>SimpleTheme</UnoFeatures> to your app's .csproj to enable Uno Simple.

Uno Simple is enabled through the SimpleTheme UnoFeatures and lets you apply Simple Design System (SDS) styling to your application with a few lines of code.

Getting Started

Note

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

Creating a new project with Uno Simple

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

Create a new application with:

dotnet new unoapp -o UnoSimpleApp -theme simpletheme

Installing Uno Simple 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 Uno Simple.

Single Project Template
Multi-Head Project Template (Legacy)

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

Initialize the Simple theme resources in the App.xaml:

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

            <!-- Code omitted for brevity -->

            <us:SimpleTheme xmlns:us="using:Uno.Simple" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Note

Use this only when working on older multi-head templates that do not support UnoFeatures. Modern templates should use the Single Project instructions above.

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.Simple.WinUI

Add the following Simple resources to AppResources.xaml:

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>

        <us:SimpleTheme xmlns:us="using:Uno.Simple" />

    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Customization

The following guides require the creation of new ResourceDictionary files in your application project. For more information on how to define styles and resources in a separate ResourceDictionary, refer to the resource management documentation.

Customize Color Palette

You can override the default Simple color palette by providing a ResourceDictionary with color overrides:

<us:SimpleTheme xmlns:us="using:Uno.Simple">
    <us:SimpleTheme.ColorOverrideDictionary>
        <ResourceDictionary>
            <!-- Add color overrides here -->
        </ResourceDictionary>
    </us:SimpleTheme.ColorOverrideDictionary>
</us:SimpleTheme>

Customize Fonts

You can override the default Simple fonts by providing a ResourceDictionary with font overrides:

<us:SimpleTheme xmlns:us="using:Uno.Simple">
    <us:SimpleTheme.FontOverrideDictionary>
        <ResourceDictionary>
            <!-- Add font overrides here -->
        </ResourceDictionary>
    </us:SimpleTheme.FontOverrideDictionary>
</us:SimpleTheme>