Common Tasks

Contents

1. Set the theme and accent color of the app
2. Override the theme at element level
3. Override other predefined colors
4. Enable IntelliSense for XAML resources

Set the theme and accent color of the app

The default theme and accent color are as follows:

• For systems running Windows 10, the system accent color is used. If the Windows version supports the "choose your default app mode" setting, this setting is used; otherwise, the light theme is used.
• For systems running an earlier version of Windows, the light theme and the color #0078D7 (default blue) are used.

To override the default settings, set properties on the ThemeResources class in App.xaml. For example:

<ui:ThemeResources RequestedTheme="Dark" AccentColor="Red" />

Values set this way are applied at both design time and runtime. If you'd like to change them at runtime, it's usually more convenient to use the ThemeManager class, which supports data binding. For example:

private void Button_Click(object sender, RoutedEventArgs e)
{
    ThemeManager.Current.ApplicationTheme = ApplicationTheme.Dark;
    ThemeManager.Current.AccentColor = Colors.Red;
}

Override the theme at element level

Set the ThemeManager.RequestedTheme attached property on any FrameworkElement. For example:

<Border
    Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
    Padding="12"
    ui:ThemeManager.RequestedTheme="Dark">
    <Button Content="Dark theme button" />
</Border>

Now this Border and its descendants will use the dark theme while the theme used by the rest of the app remains unchanged. Currently this feature doesn't work correctly at design time.

Override other predefined colors

Use the ColorPaletteResources class. For example, edit the ui:ThemeResources element in App.xaml to following:

<ui:ThemeResources>
    <ui:ThemeResources.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <ResourceDictionary.MergedDictionaries>
                <ui:ColorPaletteResources
                    TargetTheme="Light"
                    Accent="Green"
                    AltHigh="LightGray" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Dark">
            <ResourceDictionary.MergedDictionaries>
                <ui:ColorPaletteResources
                    TargetTheme="Dark"
                    Accent="Red"
                    AltHigh="DarkGray" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </ui:ThemeResources.ThemeDictionaries>
</ui:ThemeResources>

Now in the light theme, Green is used as the accent color and LightGray is used as the AltHigh color. Colors for the dark theme are set in the same way.

Enable IntelliSense for XAML resources

1. Add an IntellisenseResources.cs file to the project, and edit it to following:

using ModernWpf.DesignTime;

namespace ModernWpfApp1.DesignTime
{
    public class IntellisenseResources : IntellisenseResourcesBase
    {
    }
}

2. Download the ResourceKeys.xaml file and add it to the project.
3. Edit App.xaml to following:

<Application
    ...
    xmlns:designTime="clr-namespace:ModernWpfApp1.DesignTime">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <designTime:IntellisenseResources>
                    <designTime:IntellisenseResources.MergedDictionaries>
                        <ResourceDictionary Source="/DesignTime/ResourceKeys.xaml" />
                    </designTime:IntellisenseResources.MergedDictionaries>
                </designTime:IntellisenseResources>
                <ui:ThemeResources />
                <ui:XamlControlsResources />
                ...
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

4. Alternatively, if you don't want to pollute your App.xaml, you can create a DesignTimeResources.xaml file to contain the IntellisenseResources.