WindhawkWindows 11 Notification Center Styler
Customize the Notification Center and Action Center with themes contributed by others or create your own.
Also check out the Windows 11 Taskbar Styler, Windows 11 Start Menu Styler mods.
Themes
Themes are collections of styles. The following themes are integrated into the mod and can be selected in the settings:
More themes can be found in the Themes section of The Windows 11 notification center styling guide. Contributions of new themes are welcome!
Advanced styling
Aside from themes, the settings have two sections: control styles and resource variables. Control styles allow to override styles, such as size and color, for the target elements. Resource variables allow to override predefined variables. For a more detailed explanation and examples, refer to the sections below.
The UWPSpy tool can be used to inspect the notification center control elements in real time, and experiment with various styles.
For a collection of commonly requested notification center styling customizations, check out The Windows 11 notification center styling guide.
Control styles
Each entry has a target control and a list of styles.
The target control is written as Class or Class#Name, i.e. the target
control class name (the tag name in XAML resource files), such as
ActionCenter.FocusSessionControl or Rectangle, optionally followed by #
and the target control's name (x:Name attribute in XAML resource files). The
target control can also include:
- Child control index, for example:
Class#Name[2]will only match the relevant control that's also the second child among all of its parent's child controls. - Control properties, for example:
Class#Name[Property1=Value1][Property2=Value2]. - Parent controls, separated by
>, for example:ParentClass#ParentName > Class#Name. - Visual state group name, for example:
Class#Name@VisualStateGroupName. It can be specified for the target control or for a parent control, but can be specified only once per target. The visual state group can be used in styles as specified below.
Note: The target is evaluated only once. If, for example, the index or the properties of a control change, the target conditions aren't evaluated again.
Each style is written as Style=Value, for example: Height=5. The := syntax
can be used to use XAML syntax, for example: Fill:=<SolidColorBrush Color="Red"/>. Specifying an empty value with the XAML syntax will clear the
property value, for example: Fill:=. In addition, a visual state can be
specified as following: Style@VisualState=Value, in which case the style will
only apply when the visual state group specified in the target matches the
specified visual state.
For the XAML syntax, in addition to the built-in taskbar objects, the mod
provides a built-in blur brush via the WindhawkBlur object, which supports the
BlurAmount, TintColor, and TintOpacity properties. For example:
Fill:=<WindhawkBlur BlurAmount="10" TintColor="#80FF00FF"/>. Theme resources
are also supported, for example: Fill:=<WindhawkBlur BlurAmount="18" TintColor="{ThemeResource SystemAccentColorDark1}" TintOpacity="0.5"/>.
Targets and styles starting with two slashes (//) are ignored. This can be
useful for temporarily disabling a target or style.
A couple of practical examples:
Hide the focus assist section
Target: ActionCenter.FocusSessionControl
Style: Height=0
Hide the notification center
Target: Grid#NotificationCenterGrid
Style: Visibility=Collapsed
Shrink the notification center height
Makes panel non full-height when there are fewer notifications (fit to size).
Target: Grid#NotificationCenterGrid
Style: VerticalAlignment=2
Square the corners of the notification center
Target: Grid#NotificationCenterGrid
Style: CornerRadius=0
Square the corners of the calendar
Target: Grid#CalendarCenterGrid
Style: CornerRadius=0
Square the corners of the quick action center
Target: Grid#ControlCenterRegion
Style: CornerRadius=0
Calendar and notification titlebars: titles on the right, buttons on the left
Target: Grid#RootContent
Style: FlowDirection=1
Add accelerator key (ALT+X) to clear all notifications
Target: Windows.UI.Xaml.Controls.Button#ClearAll
Style: AccessKey=x
Add accelerator key (ALT+E) to expand/collapse the calendar
Target: Windows.UI.Xaml.Controls.Button#ExpandCollapseButton
Style: AccessKey=e
Resource variables
Some variables, such as size and padding for various controls, are defined as resource variables.
Implementation notes
The VisualTreeWatcher implementation is based on the ExplorerTAP code from the TranslucentTB project.
The WindhawkBlur brush object implementation is based on
XamlBlurBrush
from the TranslucentTB project.