0%

Theme

This documentation is for the HandyControls (unofficial version) If you are looking for the HandyControl (official version) documentation, read here

All classes related to Theme Located in the HandyControl.Themes namespace.

1
Using HandyControl.Themes;
Name Type Remarks
ActualApplicationThemeChanged Event This event is called whenever the ApplicationTheme changes
SystemThemeChanged Event This event is called whenever the Windows Theme changes
AccentColor Property
ActualApplicationTheme Property
ApplicationTheme Property
UsingSystemTheme Property
GetActualTheme Method
GetHasThemeResources Method
GetRequestedAccentColor Method
GetRequestedTheme Method
GetSystemTheme Method
SetHasThemeResources Method
SetRequestedAccentColor Method
SetRequestedTheme Method
AddActualThemeChangedHandler Method
RemoveActualThemeChangedHandler Method
GetElementTheme Method
GetAccentColorFromSystem Method

How to Address Resource?

1
2
3
4
5
6
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<hc:ThemeResources/>
<hc:Theme/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Set the application theme

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

Xaml

1
<hc: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:

Code-Behind

1
2
ThemeManager.Current.ApplicationTheme = ApplicationTheme.Dark;
ThemeManager.Current.AccentColor= Brushes.Red;
  • If you want to specify the Accent Color for whole application in Xaml (ThemeResources), you must use the AccentColor property.
  • If you want to specify the Accent Color for whole application in C# code, you must use ThemeManager Class and AccentColor property.
  • If you want to specify the Accent Color of the FrameworkElements, you must use ThemeManager Class and RequestedAccentColor attached property.
  • If you want to specify the ApplicationTheme of the FrameworkElements, you must use ThemeManager Class and RequestedTheme attached property.
NameNameSpaceTypeRemarks
AccentColorThemeResourceBrushspecify the Accent Color for whole application
AccentColorThemeManagerDependencyPropertyspecify the Accent Color for whole application
RequestedAccentColorThemeManagerAttachedPropertyspecify the Accent Color for FrameworkElements
RequestedThemeThemeManagerAttachedPropertyspecify the ApplicationTheme for FrameworkElements

If you want to set the AccentColor to the default Color You must assign a null value to it.

1
ThemeManager.Current.AccentColor= null;

Override the theme at element level

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

1
2
3
4
5
6
7
<Border Background="{DynamicResource RegionBrush}" Padding="12" hc:ThemeManager.RequestedTheme="Dark">
<Button Content="Dark theme button" />
</Border>

<Border Background="{DynamicResource RegionBrush}" Padding="12" hc:ThemeManager.RequestedAccentColor="Red">
<CheckBox Content="Accent Color" />
</Border>

Now this Border and its descendants will use the dark theme while the theme used by the rest of the app remains unchanged.

This feature sometimes doesn’t work correctly at design time.

Change Application Theme with System Theme Change

If UsingSystemTheme is enabled in Xaml (ThemeResources) or C# code (ThemeManager) (default is false), By changing the Windows theme (Light/Dark and Accent Color), the theme of the program also changes automatically.

For systems running Windows 10, the system accent color and system Theme is used. for windows 7 system accent color and the light theme is used.
For systems running an earlier version of Windows, the light theme and the color PrimaryBrush (default blue) are used.

Xaml

1
<hc:ThemeResources UsingSystemTheme="true"/>

Code-Behind

1
2
3
ThemeManager.Current.UsingSystemTheme = true;
// OR you can use ThemeResources Class
// ThemeResources.Current.UsingSystemTheme= true;

SystemThemeChanged Event

There is also an event called SystemThemeChanged if you want to do more.

Xaml

1
<hc:ThemeResources UsingSystemTheme="true" SystemThemeChanged="ThemeResources_OnSystemThemeChanged"/>
1
2
3
4
5
private void ThemeResources_OnSystemThemeChanged(object? sender, FunctionEventArgs<ThemeManager.SystemTheme> e)
{
Debug.WriteLine(e.Info.AccentBrush);
Debug.WriteLine(e.Info.CurrentTheme);
}

Code-Behind

if you want to use this event in another class you can use ThemeManager

1
ThemeManager.Current.SystemThemeChanged += OnSystemThemeChanged;

Themes

ThemeDictionaries (Override predefined colors)

You can overwrite predefined resources in ThemeDictionaries, Note that you need to know the resource key to override it.
also you can change your colors and styles according to the theme of the program.

Edit the hc:ThemeResources element in App.xaml to following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<hc:ThemeResources>
<hc:ThemeResources.ThemeDictionaries>
<ResourceDictionary x:Key="Light" hc:ThemeDictionary.Key="Light">

<!-- Put the resources you want to use in the Light theme Here -->

<SolidColorBrush x:Key="PrimaryBrush" Color="Red" />
<SolidColorBrush x:Key="AppBackgroundBrush" Color="#FFF1F1F1" />
</ResourceDictionary>

<ResourceDictionary x:Key="Dark" hc:ThemeDictionary.Key="Dark">

<!-- Put the resources you want to use in the Dark theme Here -->

<SolidColorBrush x:Key="PrimaryBrush" Color="Green" />
<SolidColorBrush x:Key="AppBackgroundBrush" Color="#FF232323" />
</ResourceDictionary>
</hc:ThemeResources.ThemeDictionaries>
</hc:ThemeResources>

ColorPresetResources (Customization)

See here To customize all the colors and brushes

Enable IntelliSense for XAML resources

See here

Themes