This document is a work in progress, contributions are welcome.
See also: The Windows 11 taskbar styling
guide,
The Windows 11 start menu styling
guide.
- Introduction
- Themes
- Style examples
- Hide the focus assist section
- Hide the notification center
- Hide control center PipsPager (navigation dots)
- Hide control center footer
- Shrink the notification center height
- Variable volume mixer height
- Remove shadows
- Square the corners of the notification center
- Square the corners of the calendar
- Square the corners of the calendar buttons
- Square the corners of the quick action center
- Calendar and notification titlebars: titles on the right, buttons on the left
- Add accelerator key (Alt+X) to clear all notifications
- Add accelerator key (Alt+E) to expand/collapse the calendar
- Hide media control section
- Transforms
- Colors
- Work in progress
This is a collection of commonly requested notification center styling customizations for Windows 11. It is intended to be used with the Windows 11 Notification Center Styler Windhawk mod.
If you're not familiar with Windhawk, here are the steps for installing the mod:
- Download Windhawk from windhawk.net and install it.
- Go to "Mods" in the upper right menu.
- Find and install the "Windows 11 Notification Center Styler" mod.
After installing the mod, open its Settings tab and adjust the styles according to your preferences.
Some customizations are best adjusted with other Windhawk mods. Links to those mods are provided where applicable.
If you're looking for a customization that is not listed here, please open an issue.
If you have a notification center styling customization or theme that you would like to share, please submit a pull request.
Themes are collections of styles that can be imported into the Windows 11 Notification Center Styler mod. The following themes are available:
Target:
ActionCenter.FocusSessionControl
Style:
Height=0
Target:
Grid#NotificationCenterGrid
Style:
Visibility=Collapsed
Target:
Microsoft.UI.Xaml.Controls.PipsPager#QuickActionsPager
Style:
Visibility=Collapsed
Target:
Grid#FooterGrid
Style:
Visibility=Collapsed
Makes the panel non-full-height when there are fewer notifications (fit to size).
Target:
Grid#NotificationCenterGrid
Style:
VerticalAlignment=2
Makes the volume mixer grow or shrink depending on how many volume sliders are visible.
Target for newer Windows 11 versions:
ControlCenter.FrameWithContentChanged#L2Frame
Target for older Windows 11 versions:
QuickActions.ControlCenter.FrameWithContentChanged#L2Frame
Style:
Height=Auto
Targets:
Grid#NotificationCenterGrid
Grid#CalendarCenterGrid
Grid#MediaTransportControlsRegion
Style:
Shadow:=
Target:
Grid#NotificationCenterGrid
Style:
CornerRadius=0
Target:
Grid#CalendarCenterGrid
Style:
CornerRadius=0
Targets:
CalendarViewDayItem
Control
CalendarViewDayItem > Border
Control > Border
Style:
CornerRadius=0
Target:
Grid#ControlCenterRegion
Style:
CornerRadius=0
Target:
Grid#RootContent
Style:
FlowDirection=1
Target:
Button#ClearAll
Style:
AccessKey=x
Target:
Button#ExpandCollapseButton
Style:
AccessKey=e
Useful for having separate Media Control UIs.
Target:
ControlCenter.MediaTransportControls#MediaTransportControls
Style:
Visibility=Collapsed
You can use transformation styles to translate, rotate, scale, or skew elements.
Tip
Should I use RenderTransform or Transform3D?
For 2D transformations, it is best to stick to RenderTransform in most cases. Using Transform3D for 2D transformations can cause elements to become blurry. For 3D transformations, you must use Transform3D.
Tip
You can mix and match transformations when using Transform3D! You can also use RenderTransform and Transform3D together.
For example: Transform3D:=<CompositeTransform3D ScaleX="1.5" TranslateY="-15" RotationZ="15" />
RenderTransform:=<TranslateTransform X="15" Y="-15" />
-- or --
Transform3D:=<CompositeTransform3D TranslateX="15" TranslateY="-15" TranslateZ="-15" />
RenderTransform:=<RotateTransform Angle="15" />
-- or --
Transform3D:=<CompositeTransform3D RotationX="-15" RotationY="15" RotationZ="-15" />
X: 3D vertical rotation.Y: 3D horizontal rotation.Z: 2D rotation.
RenderTransform:=<ScaleTransform ScaleX="1.5" ScaleY="-1.5" />
-- or --
Transform3D:=<CompositeTransform3D ScaleX="-1.5" ScaleY="1.5" ScaleZ="-1.5" />
RenderTransform:=<SkewTransform AngleX="-15" AngleY="15" />
-
Applies to Rotate, Scale and Skew:
CenterX: Offsets the transform's origin on the X axis.CenterY: Offsets the transform's origin on the Y axis.CenterZ: Offsets the transform's origin on the Z axis. (Only forTransform3D)
Example:
RenderTransform:=<RotateTransform Angle="15" CenterX="10" CenterY="20" /> -
RenderTransformOrigin- Applies to
RenderTransformonly,Transform3Ddoes not support this attribute. It is a separate attribute and is not set inside of theRenderTransformlikeCenterX/Y/Z. - Sets the transform origin relative to its target's width and height. Format is
X,Yand both numbers range from 0-1.
Example:
RenderTransformOrigin=0.5,0.5This centers the transform's origin.
- Applies to
-
TransformGroup- Applies to
RenderTransformonly,Transform3Ddoes not support this attribute. It is a separate attribute and is not set inside of theRenderTransformlikeCenterX/Y/Z. - Allows you to combine RenderTransforms together into one style, mimicking Transform3D's functionality.
Example:
RenderTransform:=<TransformGroup><RotateTransform Angle="15" /><TranslateTransform X="15" Y="-15" /></TransformGroup> - Applies to
In the following examples, we will use Background as our style, but this
also works for other properties that accept colors, such as Fill.
Background=<color>
Replace <color> with the desired color.
A color can be a name (e.g. Red) or a hex code (e.g. #FF0000).
The color can be semi-transparent (e.g. #80FF0000). To have a fully
transparent background, use Transparent or #00000000.
A color can also be a ThemeResource or StaticResource. There are many such
styles built into Windows.
Background:=<SolidColorBrush Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />
Accent colors come as part of an accent color palette. This means that for any color you pick as your system accent color, 3 additional shades are part of that color's palette. For example: SystemAccentColorLight2 or SystemAccentColorDark1.
The word Light or Dark is appended at the end with a number ranging from 1
to 3. See the official Microsoft
docs
for more information.
Background:=<SolidColorBrush Color="{ThemeResource SystemAccentColorDark2}" Opacity="0.5" />
To have a fully transparent background:
Style:
Background=Transparent
In order to use the acrylic effect (a blurred background) you can use the
AcrylicBrush.
Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.8" />
TintColor - Required. Defines what color to use.
TintOpacity - Defines the strength of the chosen color.
TintLuminosityOpacity - Defines the brightness of the acrylic effect.
BackgroundSource - Defines what should be considered the background of the acrylic effect. Set to "Backdrop" to use the desktop wallpaper.
Opacity - Defines how transparent the brush effect itself is. If set to less than 1, it blends the AcrylicBrush with clear transparency.
You can also set Acrylic to use an accent color for a more dynamic look that fits the current theme.
Background:=<AcrylicBrush TintColor="{ThemeResource SystemAccentColorDark2}" TintOpacity="0.3" />
An alternative to Acrylic is the mod's own blur implementation called WindhawkBlur. It differs from Acrylic in that it has a customizable blur radius and has fewer bugs (e.g. ramensoftware/windhawk-mods#742).
Fill:=<WindhawkBlur BlurAmount="10" TintColor="#80ff0000" />
BlurAmount - Radius of the blur effect. Set to 30 to roughly mimic Acrylic. Defaults to 0 (no blur).
TintColor - Color applied to the blur. Accepts a hex color in #AARRGGBB or #RRGGBB format, or a ThemeResource such as {ThemeResource SystemAccentColor}. Color names like Red are not supported. Defaults to transparent (no visible tint).
TintOpacity - Opacity of the tint, between 0.0 and 1.0. Overrides the alpha component of TintColor when set. If omitted, the alpha component of TintColor is used (255 for #RRGGBB).
TintLuminosityOpacity - Shifts pixel luminance towards the tint color's luminance. Range: 0.0 to 1.0. Defaults to 0.0 (no luminosity blend).
TintSaturation - Saturation of the blurred content. 1.0 is unchanged, 0.0 is fully desaturated (grayscale). Defaults to 1.0.
NoiseOpacity - Visibility of an added procedural noise texture overlay. Range: 0.0 to 1.0. Defaults to 0.0 (no noise).
NoiseDensity - Granularity of the noise texture. Defaults to 1.0.
FallbackColor - Color used in place of the blur effect when battery saver is on or when transparency effects are disabled in the system settings. Accepts a hex color or a ThemeResource. If omitted, the blur effect is used regardless of those settings.
The following two examples produce the same effect, a red tint at 50% opacity:
Fill:=<WindhawkBlur BlurAmount="10" TintColor="#80ff0000" />
Fill:=<WindhawkBlur BlurAmount="10" TintColor="#ff0000" TintOpacity="0.5" />
Tip
There is no need to specify a TintOpacity value if your TintColor already has an alpha component.
You can use a ThemeResource for a dynamic look that fits the current theme, optionally paired with a FallbackColor:
Fill:=<WindhawkBlur BlurAmount="10" TintColor="{ThemeResource SystemAccentColor}" TintOpacity="0.5" FallbackColor="{ThemeResource SystemAccentColorDark1}" />
Note
Unfortunately, it is not possible to set a Mica effect at this time with any of Windhawk's styler mods.
The background can also be a gradient. For example, to have a gradient from yellow to red to blue to lime green, use the following style:
Background:=<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"><GradientStop Color="Yellow" Offset="0.0" /><GradientStop Color="Red" Offset="0.25" /><GradientStop Color="Blue" Offset="0.75" /><GradientStop Color="LimeGreen" Offset="1.0" /></LinearGradientBrush>
The background can also be an image:
Background:=<ImageBrush Stretch="UniformToFill" ImageSource="<image>" />
Replace <image> with your own image, a URL or a local file path.
If you only see a fully transparent background when using a local file path, you must set a URL instead.
Images can be jpg, jpg XR, png, bmp, svg, tiff, gif, or ico.
Stretch can be set to the following values:
None - Image is rendered at its native resolution and aspect ratio.
Fill - Image is stretched or squished to fill the size of the element.
Uniform - Image is resized to fit the element dimensions, while it preserves its native aspect ratio.
UniformToFill - Image is resized to fill the destination dimensions while it preserves its native aspect ratio. Crops to fit element.
Note
Reveal is a deprecated XAML feature. It may have issues or stop working at any time.
Reveal is the cursor-based illumination effect from Windows 10.
Background:=<RevealBorderBrush Color="Transparent" TargetTheme="1" Opacity="1" />
BorderBrush:=<RevealBorderBrush Color="Transparent" TargetTheme="1" Opacity="1" />
Only RevealBorderBrush should be used, RevealBackgroundBrush does not work correctly in most scenarios.
Opacity can be changed to increase or decrease the intensity of the effect.
This document is a work in progress, contributions are welcome.
See also: The Windows 11 taskbar styling
guide,
The Windows 11 start menu styling
guide.