Windows11 Theme
With the R2 2022 release of the UI for WPF suite we have introduced the brand new Windows 11 Theme.
Inspired by the new refreshed Windows 11 operating system, the Windows 11 theme delivers a lot cleaner and smoother look and feel to your WPF apps. The team at Microsoft are well known for their eagerness to deliver the best possible user experience that we encounter every day and with the Windows 11 theme you will be able to easily bring it to your own apps.
Default Theme Colors
The Windows11 Theme is designed to be easily modified via the exposed colors in the theme palette. The default values of the brushes in the theme are listed below.
| Color name | Light | Dark | ||
|---|---|---|---|---|
| AccentColor | #FF005FB8 | #FF60CDFF | ||
| AccentMouseOverColor | #E6005FB8 | #E660CDFF | ||
| AccentPressedColor | #CC005FB8 | #CC60CDFF | ||
| AccentSelectedColor | #FF0078D4 | #FF0078D4 | ||
| AccentControlBorderGradientStop1Color | #14FFFFFF | #14FFFFFF | ||
| AccentControlBorderGradientStop2Color | #66000000 | #23000000 | ||
| AccentControlForegroundColor | #FFFFFFFF | #FFFFFFFF | ||
| AlternativeColor | #FFF3F3F3 | #FF202020 | ||
| ButtonBorderGradientStop1Color | #0E000000 | #17FFFFFF | ||
| ButtonBorderGradientStop2Color | #29000000 | #17FFFFFF | ||
| DisabledBackgroundColor | #4DF9F9F9 | #0BFFFFFF | ||
| DisabledBorderColor | #0F000000 | #12FFFFFF | ||
| DisabledForegroundColor | #FF000000 | #FFFFFFFF | ||
| FocusColor | #E4000000 | #FFFFFFFF | ||
| FocusInnerColor | #B3FFFFFF | #B3000000 | ||
| IconColor | #E4000000 | #FFFFFFFF | ||
| IconSecondaryColor | #9B000000 | #C8FFFFFF | ||
| InputBorderGradientStop1Color | #0F000000 | #14FFFFFF | ||
| InputBorderGradientStop2Color | #72000000 | #8AFFFFFF | ||
| MouseOverBackgroundColor | #B3F9F9F9 | #15FFFFFF | ||
| MouseOverBorderGradientStop1Color | #0F000000 | #14FFFFFF | ||
| MouseOverBorderGradientStop2Color | #71000000 | #8AFFFFFF | ||
| OverlayColor | #FFFBFBFB | #FF2D2D2D | ||
| PressedBackgroundColor | #4DF9F9F9 | #08FFFFFF | ||
| PrimaryBackgroundColor | #B3FFFFFF | #0FFFFFFF | ||
| PrimaryBorderColor | #0F000000 | #12FFFFFF | ||
| PrimaryForegroundColor | #E4000000 | #FFFFFFFF | ||
| PrimarySolidBackgroundColor | #FFFFFFFF | #FF1E1E1E | ||
| PrimarySolidBorderColor | #FFECECEC | #FF2C2C2C | ||
| ReadOnlyBackgroundColor | #E6F6F6F6 | #08FFFFFF | ||
| ReadOnlyBorderColor | #FFEBEBEB | #FF1C1C1C | ||
| SecondaryBackgroundColor | #FFEEEEEE | #FF1C1C1C | ||
| SecondaryBorderColor | #29000000 | #18FFFFFF | ||
| SecondaryForegroundColor | #9B000000 | #C8FFFFFF | ||
| SelectedColor | #0A000000 | #0FFFFFFF | ||
| SelectedMouseOverColor | #06000000 | #0BFFFFFF | ||
| SelectedUnfocusedColor | #FFD9D9D9 | #FF404040 | ||
| StrokeColor | #FFC4C4C4 | #FF313131 | ||
| SubtleColor | #0A000000 | #0FFFFFFF | ||
| SubtleSecondaryColor | #06000000 | #0BFFFFFF | ||
| TertiaryBackgroundColor | #FFF9F9F9 | #FF282828 | ||
| TertiaryBorderColor | #FFEBEBEB | #FF262626 | ||
| TertiaryForegroundColor | #72000000 | #8BFFFFFF | ||
| TertiarySmokeBackgroundColor | #4D000000 | #4D000000 | ||
| ValidationColor | #FFC42B1C | #FFFF99A4 |
Theme colors represented in RadOutlookBar
Windows11Palette Properties
Foreground Colors
-
PrimaryForegroundColor—This is the default foreground of the theme. -
SecondaryForegroundColor—Used for the foreground of the buttons in their pressed state. It is also used as a default foreground to input/editor controls like the MS TextBox, WatermarkTextBox, PasswordBox. This is the default foreground of a GridView's header cell, as well as the TabControl's tab item. -
TertiaryForegroundColor—Used for the foreground of the buttons' glyph elements in their pressed state. This is the default border color of the MS CheckBox, RadioButton and the ScrollViewer's RepeatButtons and Thumbs. Also used for the ticks color of the data visualization components. -
DisabledForegroundColor—Used for the foreground of the elements in their disabled state. -
AccentControlForegroundColor—Used for the foreground of the elements over an accent background (e.g.,when their parent is in its selected/checked state). -
IconColor—This is the default fill of the theme's glyph icons. -
IconSecondaryColor—Used as the default fill of the glyph icons when they are nested in an input/editor element - e.g., the ComboBox's button part, NumericUpDown's increase and decrease buttons, etc.
Background Colors
-
PrimaryBackgroundColor—Used for the background the inputs and other editable elements such as ComboBox, AutoCompleteBox, NumericUpDown, etc. Also used as the default background of the buttons. -
PrimarySolidBackgroundColor—A completely solid variation of the PrimaryBackgroundColor used for elements which require a non-transparent background for optimum readability. -
SecondaryBackgroundColor—Used for the background of non-editable, secondary elements - e.g. the Ribbon's gallery buttons, Chat's cards, GridView pinned rows, etc. Also used for the default background of the RichTextBox component. -
TertiaryBackgroundColor—Used for the background of the popup/overlay elements like ToolTip. -
TertiarySmokeBackgroundColor—Used for the background of the ChatOverlay's header and footer and the RichTextBox's ruler tab stop elements. -
SubtleColor—Used for the background of nested/secondary buttons and list items in their mouse over state. -
SubtleSecondaryColor—Used for the background of nested/secondary buttons in their pressed state. -
AlternativeColor—Used for the background of the toolbar-like components - e.g., StatusBar, DataPager, Grid's FilteringControl and panels - group, search, footer, etc. This is the default background of some controls like the ToolBar, Panelbar, Chat. Also used as a header background. -
OverlayColor—Used for the background of the Window-based controls (e.g. RadWindow, RadTabbedWindow, FileDialogs, etc.).
Border Colors
-
PrimaryBorderColor—This is the default border color of the majority of controls. -
PrimarySolidBorderColor—A completely solid variation of the PrimaryBorderColor used for elements which require a non-transparent border color for optimum readability or in case of overlapping borders. -
SecondaryBorderColor—Used for the border color of the divider/separator-like elements. -
TertiaryBorderColor—This is the default border color of the Slider's thumbs. -
ButtonBorderGradientStop1Color—One of the stops of the ButtonBorderBrush, which is a gradient brush, used as the default border color of buttons. -
ButtonBorderGradientStop2Color—One of the stops of the ButtonBorderBrush, which is a gradient brush, used as the default border color of buttons. -
InputBorderGradientStop1Color—One of the stops of the InputBorderBrush, which is a gradient brush, used as the default border color of inputs. -
InputBorderGradientStop2Color—One of the stops of the InputBorderBrush, which is a gradient brush, used as the default border color of inputs. -
AccentControlBorderGradientStop1Color—One of the stops of the AccentControlBorderBrush, which is a gradient brush, used as the border color of accent buttons in their mouse over, pressed, checked states. -
AccentControlBorderGradientStop2Color—One of the stops of the AccentControlBorderBrush, which is a gradient brush, used as the border color of accent buttons in their mouse over, pressed, checked states. -
StrokeColor—This is the default border color of the TimeBar and Timeline controls. It is also used as the color of the TreeListView's lines and Diagram's selection, resizing rectangles and manipulation adorners. Used as a background for the GridViewMergedCells.
Special State Colors
-
FocusColor—Used for the border color of the elements in their focused state. -
FocusInnerColor—Used as the fill color of the gap between an element and its focus border. -
MouseOverBackgroundColor—Used for the background of the non-accent elements in their mouse over state - e.g. buttons. -
MouseOverBorderGradientStop1Color—One of the stops of the MouseOverBorderBrush, which is a gradient brush, used as the border color of non-accent buttons in their mouse over state. -
MouseOverBorderGradientStop2Color—One of the stops of the MouseOverBorderBrush, which is a gradient brush, used as the border color of non-accent buttons in their mouse over state. -
PressedBackgroundColor—Used for the background of the non-accent elements in their pressed state - e.g. buttons. -
SelectedColor—Used for the background of the elements in their selected state (e.g., the ListBoxItem, ComboBoxItem, PanelBarItem, etc.). Also used as the default value of the GridView's row and cell SelectedBackground properties. -
SelectedMouseOverColor—Used for the background of the elements in their selected and mouse over state (e.g., the ListBoxItem, ComboBoxItem, PanelBarItem, etc.). -
SelectedUnfocusedColor—Used for the background of the elements in their selected and not focused state (e.g., the GridViewRow, TreeListViewRow and the TreeViewItem). -
ReadOnlyBackgroundColor—Used for the background of the controls in a read-only state. -
ReadOnlyBorderColor—Used for the border color of the controls in a read-only state. -
DisabledBackgroundColor—Used for the background of the controls in a disabled state. -
DisabledBorderColor—Used for the border color of the controls in a disabled state. -
ValidationColor—Used for the background/border color of the controls to indicate the validation errors - for the foreground of the invalid control, or as a border for the error tooltip, border for invalid rows and cells.
Accent Colors
-
AccentColor—Used for the background/border color of the elements that should have accent - e.g., the background of the toggle button in its checked state. -
AccentMouseOverColor—Used for the background of the accent elements in their mouse over state (e.g., all buttons). -
AccentPressedColor—Used for the background of the accent elements in their pressed state (e.g., all buttons). -
AccentSelectedColor—This is the default background and border color of the drag-drop visuals and the fill of the pill displayed in some items as an addition to its selection background. Also used as the default background of the ScheduleView's AppointmentItem and the foreground of some headers.
Theme Variation Changing
The Windows11 theme offers three color variations. The System variation corresponds to the default theme (Light or Dark) of the operation system the application is running on. You can also explicitly choose either the Light or Dark variation. The Light variation is used by default.
The following example demonstrates the ability to switch between the supported variations by calling the LoadPreset method as shown below:
Changing the color variation of the theme
//System's color variation
Windows11Palette.LoadPreset(Windows11Palette.ColorVariation.System);
//Light color variation
Windows11Palette.LoadPreset(Windows11Palette.ColorVariation.Light);
//Dark color variation
Windows11Palette.LoadPreset(Windows11Palette.ColorVariation.Dark);
Acrylic and Mica Effects
Windows 11 uses two types of occluding materials - acrylic and mica - as base layers beneath interactive UI controls. These materials are visual effects applied to UX surfaces that resemble real life artifacts.
Acrylic
Acrylic is a semi-transparent material that replicates the effect of frosted glass. In Windows 11, acrylic has been updated to be brighter and more translucent, allowing for a stronger contextual relationship with the visuals behind it. Acrylic is used only for transient, light-dismiss surfaces such as flyouts and context menus.
Acrylic is mode aware; it supports both light and dark mode.
RadWindow with Acrylic Effect
Mica
Mica is a new opaque material introduced in Windows 11. Mica surfaces are subtly tinted with the user's desktop background color.
Mica is mode aware; it supports both light and dark modes. Mica also indicates window focus with active and inactive states as a built in feature.
RadWindow with Mica Effect
Setting the Material
To change the occluding material, you can set the attached BackdropMaterial property of the WindowEffectsHelper class, located in the Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls namespace.
Set Material
<telerik:RadWindow x:Class="Example.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"
helpers:WindowEffectsHelper.BackdropMaterial="Mica"
Header="RadWindow">
System Accent Color
The Windows 11 theme provides you with the ability to apply dynamic accent colors based on the OS accent color. This feature is supported only on Windows 10 and above.
This is controlled via the UseSystemAccentColor property. Its default value is false which means that the default values of the AccentColor, AccentMouseOverColor, AccentPressedColor and AccentSelectedColor from the colors table above will be used.
When set to true, the AccentColor of the theme will be the selected one in the System Color Settings of the OS, the AccentMouseOverColor will apply 90% opacity to it and the AccentPressedColor - 80% opacity. The AccentSelectedColor will also be changed with respect to the AccentColor.
Changing the color variation of the theme
Windows11Palette.Palette.UseSystemAccentColor = true;
Font Family and Font Size
When using the Windows11 Theme you can dynamically change the FontSize and FontFamily properties of all components in the application the same way as you do in Windows8, Windows8Touch, Office2013, VisualStudio2013, Office2016, Green, Material, Fluent, Crystal and Office2019 themes.
The FontSize and FontFamily properties are public so you can easily modify the theme resources at a single point. The most commonly used font size in the theme is with value 14 and can be modified through the Windows11Palette.Palette.FontSize property in the same manner as in the other themes that support a theme palette.
The default font used in the theme is Segoe UI.
For complex scenarios we strongly recommend setting the
FontSizeproperties only before the application is initialized.
The following shows the default font sizes and families.
Default FontSizes
Windows11Palette.Palette.FontSizeS = 12;
Windows11Palette.Palette.FontSize = 14;
Windows11Palette.Palette.FontSizeM = 18;
Windows11Palette.Palette.FontSizeL = 20;
Windows11Palette.Palette.FontSizeXL = 28;
Changing the theme's FontSize and FontFamily
private void OnButtonChangeFontSizeClick(object sender, RoutedEventArgs e)
{
Windows11Palette.Palette.FontSize = 18;
Windows11Palette.Palette.FontFamily = new FontFamily("Calibri Italic");
}
Glyphs
The Windows11 Theme also uses the Telerik Web UI font glyphs by default. The RadGlyph provides a lightweight, flexible and design-time-friendly implementation of our glyph font.
You can read more about the RadGlyph in the RadGlyph Overview article and about the range of the font glyphs in the Font Glyphs Overview article.
Theme Helper
The ThemeHelper class that comes with the R3 2019 release is used in the Windows11 theme. It exposes a set of attached properties and can be used to directly modify the appearance of a specific basic control without the need to alter its control template.
This example shows a RadToggleButton control with modified brushes for its different states through the ThemeHelper class:
Set RadToggleButton's visual appearance through the ThemeHelper class
<telerik:RadToggleButton Content="RadButton"
Margin="10"
xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"
helpers:ThemeHelper.MouseOverBackgroundBrush="{telerik:Windows11Resource ResourceKey=ValidationBrush}" />
Set Corner Radius
The Windows 11 Theme exposes an easy way to modify the corner radius of many elements in your application. You can directly use the corner radius property of the palette. By default the CornerRadius value is 4.
Changing the default corner radius
Windows11Palette.Palette.CornerRadius = new CornerRadius(0);
Changing Opacity
If you need to change the opacity of the disabled and read-only elements, you can easily do so by using the DisabledOpacity and ReadOnlyOpacity properties of the Windows11Palette. The default values are 0.36 and 1.0 respectively.
Changing the opacity
Windows11Palette.Palette.DisabledOpacity = 0.5;
Windows11Palette.Palette.ReadOnlyOpacity = 0.5;
Merging Modified Palette Resources With StyleManager Theming Approach
When modifying fonts, colors, or other resources from the Windows11Palette and StyleManager is used as theming mechanism, the theme's ResourceDictionary needs to be merged in App.xaml file to apply the changes.
Merging the theme's ResourceDictionary in App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<telerik:Windows11ResourceDictionary/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>