- Introduction
- Themes
- General
- Task list
- Search box
- Widgets
- Notification area (system tray)
- System tray background
- Tray buttons hover background
- Tray overflow background
- Tray icons size
- Tray icons size (system icons)
- Tray icons spacing
- Hide the network icon
- Hide the volume icon
- Hide the battery icon
- Hide the microphone and location icons
- Hide the language indicator
- Hide the chevron icon
- Chevron icon
- Clock
- Language indicator
- Hide the notification bell icon
- "Show Desktop" line
- Hide the "Show Desktop" button
- Hide the entire system tray
- Notification Center and quick settings position
- Alt+Tab
- Task view
- Volume popup
- Language popup
- Snap layout popups
- Transforms
- Colors
This is a collection of commonly requested taskbar styling customizations for Windows 11. It is intended to be used with the Windows 11 Taskbar 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 Taskbar 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.
See also: The Windows 11 start menu styling guide, The Windows 11 notification center styling guide.
Each customization below lists a target and one or more styles. To apply it:
- Open the mod's Settings tab and go to Control styles.
- Enter the target under Target and the style under Styles. Use Add new item to add more styles or targets.
- Click Save settings.
You can also select Textual mode in the Settings tab and use this format:
controlStyles:
- target: Rectangle#BackgroundStroke
styles:
- Visibility=CollapsedIf a style has no effect, check the following:
- Placeholders such as
<color>are replaced together with their angle brackets, for exampleFill=Red. For an image, the result looks likeImageSource="C:\images\start.png". - Styles are written as
Style=Value, with no quotes around the value, for exampleFontFamily=Segoe UI. Fillonly applies toRectangletargets. For other targets, useBackground.- A visual state in a style, such as
Background@InactivePointerOver, requires the target to name its visual state group, such as@CommonStates. A target can name only one group. - The settings JSON in the mod's Advanced tab requires quotes and backslashes to be escaped, and isn't meant to be edited by hand.
As of version 1.5 of Windows 11 Taskbar Styler, the following components can be styled along with the taskbar:
- Alt+Tab
- Task view (Win+Tab)
- Volume popup
- Language popup
- Snap layout popups
How to find targets using UWPSpy.
If the styles have no effect at all, try the following:
- Restart Explorer, for example from Task Manager. This usually fixes error 8000FFFF.
- Check your Windows version. The Windows 10 taskbar isn't supported, and the mod often doesn't work on Windows 11 version 21H2.
- Disable other tools that customize the taskbar, such as ExplorerPatcher, StartAllBack, Start11 or TranslucentTB, to check whether they conflict with the mod.
- If the problem remains, collect debug logs by following the Windhawk troubleshooting page, and include them when you open an issue.
Some things can't be done with styles alone:
- Styling the taskbar of a specific monitor. There's no general way to do it, so styles apply to the taskbars of all monitors.
- Matching the taskbar color to the active window. To change the taskbar background when a window is maximized, see Taskbar background for maximized windows.
- Making all icons monochrome. Icons can only be replaced one at a time.
- Keeping the Start button animation with a custom image. The animation is part of the original icon.
- Tiling a background image, which
ImageBrushdoesn't support on the taskbar.
If you're looking for a customization that is not listed here, please open an issue.
If you have a taskbar 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 Taskbar Styler mod. The following themes are available:
A theme can be customized in the following ways:
- Style constants: Many themes define constants for values such as colors and
sizes. Find them under
styleConstantson the theme's page, and set the ones you want to change under Style constants in the mod's settings, for exampleDockBackground=<SolidColorBrush Color="#80000000" />. - Control styles: Keep the theme selected and add your own targets and styles under Control styles. They're applied after the theme's styles, so they can override them. A theme might not use the targets listed in this guide, so check which targets it uses on its page.
- Manual installation: Follow the manual installation steps on the theme's page to import its styles into the mod's settings, then edit them directly.
Use the Taskbar height and icon size mod.
Target:
Taskbar.TaskbarFrame > Grid#RootGrid > Taskbar.TaskbarBackground > Grid > Rectangle#BackgroundFill
Style:
Fill=<color>
Replace <color> with the desired color. See colors section for all
options (e.g. if you want blurred background effect).
Note
For some themes, a different approach has to be used to customize the taskbar background:
- The WinXP theme spans the taskbar border over the
full taskbar height. To customize the background, use the
Rectangle#BackgroundStroketarget. - The following themes set the background with a style
constant that also applies to other parts of the theme:
- DockLike:
DockBackground - Luminosity:
lumiBackground - FrostyGlass:
Background - LiquidGlass (Legacy):
Background
- DockLike:
To fill the transparent parts of the taskbar when there's a maximized window, use the Taskbar Background Helper mod.
To let maximized windows extend under the taskbar, turn on taskbar auto-hide in the Windows settings, and use the Taskbar auto-hide when maximized mod with its mode set to Never auto-hide.
Target:
Rectangle#BackgroundStroke
It can be customized in the same way as the background, see Taskbar background.
To remove the border, use the following style:
Visibility=Collapsed
To make the empty parts of the taskbar click-through, enable the Click-through taskbar option in the mod's settings. This is mainly useful for dock themes such as DockLike.
Target:
Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill
Style:
Fill=<color>
To also set the corner radius and the border of the thumbnail preview, make its default background transparent and style the frame instead.
Target:
Taskbar.TaskbarBackground#HoverFlyoutBackgroundControl > Grid > Rectangle#BackgroundFill
Style:
Fill=Transparent
Target:
Border#HoverFlyoutBackground
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
The highlight of a window's thumbnail in the thumbnail preview.
Target:
Taskbar.TaskItemThumbnailView > Grid@CommonStates > Border#BackgroundBorder
Styles:
Background@PointerOver=<color>
CornerRadius=<radius>
Targets:
- Task list labels:
TextBlock#LabelControl - Clock:
TextBlock#TimeInnerTextBlock,TextBlock#DateInnerTextBlock - System tray icons:
SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock - Language indicator:
SystemTray.AdaptiveTextBlock#LanguageInnerTextBlock > TextBlock#InnerTextBlock - Battery level:
TextBlock#BatteryTextBlock - Search box:
TextBlock#SearchBoxTextBlock - Thumbnail preview titles:
TextBlock#DisplayNameTextBlock - Alt+Tab window titles:
TextBlock#DisplayName - Volume popup level:
TextBlock#volumeLevelText
Style:
Foreground=<color>
Target:
MenuFlyoutPresenter
Style:
CornerRadius=<radius>
Target:
MenuFlyoutPresenter > Border
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
Target:
ToolTip > ContentPresenter#LayoutRoot
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
Original Author: CryptoProgenitor
Note
Useful for dock-like layouts to ensure the task list and system tray share the same alignment no matter the size or position of the taskbar, examples could be seen in the UltraWideFriendly theme and the Borderless theme.
Target:
ScrollViewer > ScrollContentPresenter > Border > Grid
Style:
ColumnDefinitions:=<ColumnDefinitionCollection><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></ColumnDefinitionCollection>
Target:
Taskbar.TaskbarFrame
Style:
Grid.Column=1
Target:
SystemTray.SystemTrayFrame
Style:
Grid.Column=1
Target:
Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Grid > Border#BackgroundElement, Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Border#BackgroundElement
Style:
Background:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Target:
Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Grid > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon, Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon
Style:
Visibility=Collapsed
Replace <image> with your own image, a local file path or a URL, for example:
- Windows 10:
https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Assets/OrbWin10.png. - Windows XP:
https://raw.githubusercontent.com/ramensoftware/windows-11-taskbar-styling-guide/refs/heads/main/Assets/OrbWinXP.png(use withStretch="None").
To set a different image for each Start button state, replace the first target
above with the following target and styles. The Active states apply while the
Start menu is open. For an example, see the
Windows7 theme.
Target:
Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel@CommonStates > Grid > Border#BackgroundElement, Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement
Styles:
Background@InactiveNormal:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Background@InactivePointerOver:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Background@InactivePressed:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Background@ActiveNormal:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Background@ActivePointerOver:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Background@ActivePressed:=<ImageBrush Stretch="Uniform" ImageSource="<image>" />
Target:
Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton]
Style:
Visibility=Collapsed
To keep the Start button on the left while the taskbar icons are centered, use the Start button always on the left mod.
Use the Taskbar height and icon size mod.
Target for running apps:
Grid#IconPanel@CommonStates > Border#BackgroundElement, Taskbar.TaskListLabeledButtonPanel@CommonStates > Border#BackgroundElement
Target for the Start, Task view and Widgets buttons:
Taskbar.TaskListButtonPanel@CommonStates > Grid > Border#BackgroundElement, Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement
Styles:
Background=<color>
Background@InactivePointerOver=<color>
Background@ActiveNormal=<color>
CornerRadius=<radius>
See colors section for all color options.
The following visual states1 can be used:
InactiveNormalInactivePointerOverInactivePressedActiveNormalActivePointerOverActivePressed
The following visual states can only be used for running apps:
MultiWindowNormalMultiWindowActiveMultiWindowPointerOverMultiWindowPressedRequestingAttentionRequestingAttentionPointerOverRequestingAttentionPressed
Targets:
Taskbar.ExperienceToggleButton
Taskbar.TaskListButton
SearchUx.SearchUI.SearchButtonRootGrid#SearchBoxButtonRootPanel > Grid > Border#BackgroundElement, SearchUx.SearchUI.SearchButtonRootGrid#SearchBoxButtonRootPanel > Border#BackgroundElement
Style:
CornerRadius=<radius>
Replace <radius> with the desired radius. A larger value will make the corners
more rounded. Default: 4.
Various task list label customizations are available in the Taskbar Labels for Windows 11 mod.
Target:
TextBlock#LabelControl
Styles:
FontFamily=<font>
FontWeight=<weight>
Foreground=<color>
Replace <font> with the desired font. For a list of fonts that are shipped
with Windows 11, refer to this page.
Target:
Grid#IconPanel@RunningIndicatorStates > Rectangle#RunningIndicator, Taskbar.TaskListLabeledButtonPanel@RunningIndicatorStates > Rectangle#RunningIndicator
Various styles can be applied to the running indicator. Here are some examples:
Styles:
Fill=#FFED7014
Height=2
Width=12
Fill@ActiveRunningIndicator=Red
Width@ActiveRunningIndicator=20
The following visual states1 can be used:
ActiveRunningIndicatorInactiveRunningIndicatorRequestingAttentionRunningIndicatorNoRunningIndicator
To move the running indicator, use a transform, for example:
RenderTransform:=<TranslateTransform Y="1" />
Don't use Margin for this, since the taskbar adjusts the indicator's margin to
position it.
Some customizations for the running indicator are available in the Taskbar Labels for Windows 11 mod.
The second plate behind a task list button of an app that has multiple windows.
Target:
Border#MultiWindowElement
Styles:
Visibility=Collapsed
Background=<color>
The progress bar of a task list button, for example during a file copy.
Targets:
Rectangle#DeterminateProgressBarIndicator
Rectangle#IndeterminateProgressBarIndicator, Rectangle#IndeterminateProgressBarIndicator2
Rectangle#ProgressBarTrack
Style:
Fill=<color>
Warning
Don't use AcrylicBrush with Rectangle#DeterminateProgressBarIndicator.
Explorer can crash when the progress of a grouped button switches to the paused
or error state.
To change the size of the progress bar, use the following target:
Microsoft.UI.Xaml.Controls.ProgressBar#ProgressIndicator
Styles:
Width=<width>
MinHeight=<height>
Target:
SearchUx.SearchUI.SearchButtonRootGrid#SearchBoxButtonRootPanel@CommonStates > Grid > Border#BackgroundElement, SearchUx.SearchUI.SearchButtonRootGrid#SearchBoxButtonRootPanel@CommonStates > Border#BackgroundElement
Styles:
Background=<color>
Background@InactivePointerOver=<color>
CornerRadius=<radius>
The following visual states1 can be used:
InactiveNormalInactivePointerOverInactivePressedActiveNormalActivePointerOverActivePressed
The pill-shaped search button has a separate background element:
Border#SearchPillBackgroundElement
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
Target:
TextBlock#SearchBoxTextBlock
Styles:
Text=<text>
Foreground=<color>
FontFamily=<font>
FontSize=<size>
Target:
Grid#DynamicSearchBoxGleamContainer
Style:
Visibility=Collapsed
The Widgets button also shows the weather.
Target:
Taskbar.AugmentedEntryPointButton > Taskbar.TaskListButtonPanel@CommonStates > Grid > Border#BackgroundElement, Taskbar.AugmentedEntryPointButton > Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement
Styles:
Background=<color>
Background@InactivePointerOver=<color>
CornerRadius=<radius>
The visual states1 are the same as for the search box background.
Target:
Taskbar.AugmentedEntryPointButton > Taskbar.TaskListButtonPanel
Style:
MaxWidth=<width>
Target:
Grid#AugmentedEntryPointContentGrid
Styles:
HorizontalAlignment=Left
Margin=<margin>
The Taskbar tray system icon tweaks mod can also hide system icons such as volume, network, battery, microphone, location and the language bar.
Target:
StackPanel#SystemTrayFrameGrid, Grid#SystemTrayFrameGrid
Styles:
Background=<color>
CornerRadius=<radius>
Target for the network, volume and battery button, and for the clock and notifications button:
SystemTray.OmniButton > Grid@CommonStates > Border#BackgroundBorder
The following visual states1 can be used:
PointerOverPressedCheckedCheckedPointerOverCheckedPressed
Target for the other tray icons:
SystemTray.NotifyIconView > Grid#ContainerGrid@ > Border#BackgroundBorder, SystemTray.IconView > Grid#ContainerGrid@ > Border#BackgroundBorder, SystemTray.ChevronIconView > Grid#ContainerGrid@ > Border#BackgroundBorder
The visual state group of these icons has no name, so nothing follows the @.
The following visual states1 can be used:
PointerOverPressedCheckedNormalCheckedPointerOverCheckedPressed
Styles:
Background@PointerOver=<color>
Background@Pressed=<color>
CornerRadius=<radius>
Target:
Border#OverflowFlyoutBackgroundBorder
Style:
Background=<color>
Target:
SystemTray.ImageIconContent > Grid#ContainerGrid > Image
Styles:
Width=<size>
Height=<size>
Replace <size> with the desired size. Default: 16.
Target:
SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock
Style:
FontSize=<size>
Replace <size> with the desired size. Default: 16.
Targets:
SystemTray.NotifyIconView#NotifyItemIcon
SystemTray.ChevronIconView
Style:
MinWidth=<width>
Replace <width> with the desired width for the icon and the spacing. Default:
32.
To reduce the spacing even more, use the following targets for tray icons and system icons, respectively:
SystemTray.ImageIconContent > Grid#ContainerGrid
SystemTray.TextIconContent > Grid#ContainerGrid
Style:
Padding=<padding>
Replace <padding> with the desired padding. Default: 4,4,4,4 on recent
Windows 11 builds, older builds use smaller values.
Target:
SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[1] > SystemTray.IconView > Grid > Grid, SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > WrapGrid > ContentPresenter[1] > SystemTray.IconView > Grid > Grid
Style:
Visibility=Collapsed
The StackPanel part of the target applies to a horizontal taskbar, and the
WrapGrid part applies to a vertical taskbar.
Target:
SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[2] > SystemTray.IconView > Grid > Grid, SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > WrapGrid > ContentPresenter[2] > SystemTray.IconView > Grid > Grid
Style:
Visibility=Collapsed
Target:
SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter[3] > SystemTray.IconView > Grid > Grid, SystemTray.OmniButton#ControlCenterButton > Grid > ContentPresenter > ItemsPresenter > WrapGrid > ContentPresenter[3] > SystemTray.IconView > Grid > Grid
Style:
Visibility=Collapsed
Target:
SystemTray.Stack#MainStack
Style:
Visibility=Collapsed
Target:
SystemTray.Stack#NonActivatableStack
Style:
Visibility=Collapsed
Target:
SystemTray.Stack#NotifyIconStack
Style:
Visibility=Collapsed
Target:
SystemTray.ChevronIconView > Grid#ContainerGrid > ContentPresenter#ContentPresenter > Grid#ContentGrid > SystemTray.TextIconContent > Grid#ContainerGrid > SystemTray.AdaptiveTextBlock#Base > TextBlock#InnerTextBlock
Style:
Text:=
Replace ED14 with the code of the desired glyph from the Segoe Fluent
Icons
font. To change the chevron's width, see Tray icons
spacing.
Clock customizations are available in the Taskbar Clock Customization mod.
The time and the date can also be styled directly.
Targets:
TextBlock#TimeInnerTextBlock
TextBlock#DateInnerTextBlock
Styles:
Foreground=<color>
FontFamily=<font>
FontSize=<size>
To hide the date, use the following target:
TextBlock#DateInnerTextBlock
Style:
Visibility=Collapsed
Target:
SystemTray.AdaptiveTextBlock#LanguageInnerTextBlock > TextBlock#InnerTextBlock
Styles:
Foreground=<color>
FontFamily=<font>
FontSize=<size>
FontWeight=<weight>
Target:
SystemTray.OmniButton#NotificationCenterButton > Grid > ContentPresenter > ItemsPresenter > StackPanel > ContentPresenter > SystemTray.IconView#SystemTrayIcon > Grid > Grid > SystemTray.TextIconContent
Style:
Visibility=Collapsed
The thin line of the "Show Desktop" button, which is visible when hovering over the button.
Target:
Grid#ContainerGrid@ > Rectangle#ShowDesktopPipe
Styles:
Fill@PointerOver=<color>
Width=<width>
Height=<height>
To let the line take up the whole button, add the following styles:
Grid.Row=0
Grid.RowSpan=3
Grid.Column=0
Grid.ColumnSpan=3
The "Show Desktop" button can't be moved outside of the system tray. If a theme leaves a gap between the button and the corner of the screen, extend the system tray to the edge of the screen instead.
Target:
SystemTray.Stack#ShowDesktopStack
Style:
Visibility=Collapsed
Target:
StackPanel#SystemTrayFrameGrid, Grid#SystemTrayFrameGrid
Style:
MaxWidth=0
Note
Visibility=Collapsed isn't used here because on recent Windows 11 versions it crashes Explorer if it's applied when Explorer starts.
Use the Shell Flyout Positions mod.
Target:
WindowsInternal.ComposableShell.Experiences.Switcher.AltTab > Grid#ModalRootGrid > Border#BackgroundElement
Style:
Background=Transparent
Target:
WindowsInternal.ComposableShell.Experiences.Switcher.AltTab > Grid#ModalRootGrid > Border#BackgroundElement > WindowsInternal.ComposableShell.Experiences.Switcher.SwitchItemList
Style:
Background=<color>
Note
The inner element background is customized, and the outer element background is made transparent. Without this, Alt+Tab loses mouse interactivity and becomes unclickable.
Target:
Windows.UI.Xaml.Controls.Border#BackgroundDimmingLayer
Style:
Background=<color>
Targets:
Border#VirtualDesktopBarBackground
WindowsInternal.ComposableShell.Experiences.Switcher.VirtualDesktopBarElement > Grid#GridElement > Border#VirtualDesktopSwitcherBackground
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
To style the desktops in the bar, use the following target:
WindowsInternal.ComposableShell.Experiences.Switcher.VirtualDesktopElementThemed > Grid#MainGrid > Border#MainBorder
Styles:
Background=<color>
CornerRadius=<radius>
Target:
WindowsInternal.ComposableShell.Experiences.Switcher.VirtualDesktopBarElement#VirtualDesktopBar
Style:
Visibility=Collapsed
The brightness popup uses the same element.
Target:
Grid#ConfirmatorMainGrid
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
Target:
Windows.UI.Xaml.Shapes.Rectangle#HorizontalTrackRect
Style:
Height=<value>
Target:
WindowsInternal.ComposableShell.Experiences.TextInput.Common.InputSwitcher > ContentControl > ContentPresenter > Grid
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
Target:
WindowsInternal.ComposableShell.Experiences.TextInput.Common.InputSwitcher > ContentControl > ContentPresenter > Grid > Grid
Styles:
Background=Transparent
BorderBrush=Transparent
The first target is for the popup that appears when hovering over a window's maximize button, and the second target is for the popup that appears when moving a window to the top of the screen.
Targets:
Border#SnapPickerBorder
Border#SnapBarBorder
Styles:
Background=<color>
BorderBrush=<color>
BorderThickness=<thickness>
CornerRadius=<radius>
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're going to use Fill as an example, but this
also works for other properties that accept colors, like Background.
Fill=<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.
A color can also be a ThemeResource or StaticResource. There are many such
styles built into Windows.
Fill:=<SolidColorBrush Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />
Accent colors have different lightness available, like SystemAccentColorLight2
or SystemAccentColorDark1. The word Light or Dark is appended at the end
with a number ranging from 1 to 3. Check out the official Microsoft
docs
for all variations.
Fill:=<SolidColorBrush Color="{ThemeResource SystemAccentColorDark2}" Opacity="0.5" />
To use different colors in light and dark mode, define a theme-aware resource under Resource variables in the mod's settings:
MyColor@Dark=#18181B
MyColor@Light=#E5E7EB
Then use it in a style:
Fill:=<SolidColorBrush Color="{ThemeResource MyColor}" />
To have a fully transparent background, use the following style:
Fill=Transparent
In order to have an acrylic effect (a blurred background), you can use
AcrylicBrush. It comes with TintOpacity, which defines how much of the color
needs to be applied.
Fill:=<AcrylicBrush TintColor="Black" TintOpacity="0.8" />
You can also mix acrylic with a variation of an accent color for a more dynamic look that fits the current theme.
Fill:=<AcrylicBrush TintColor="{ThemeResource SystemAccentColorDark2}" TintOpacity="0.3" />
Note
Acrylic requires transparency effects to be turned on in the Windows settings,
under Personalization > Colors, and doesn't apply when battery saver is on. In
these cases FallbackColor is used instead, and without it the element is
invisible:
Fill:=<AcrylicBrush TintColor="Black" TintOpacity="0.8" FallbackColor="#202020" />
An alternative to Acrylic is the mod's own blur implementation called WindhawkBlur. It differs from Acrylic in that its blur radius, saturation and noise are customizable, and it keeps blurring when battery saver is on or transparency effects are off, unless FallbackColor is set.
Note
WindhawkBlur does not currently support color names (e.g. Red).
BlurAmount: Radius of blur effect (set to 30 to mimic Acrylic).TintLuminosityOpacity: Shifts pixel luminance towards the tint color's luminance. Range: 0.0 to 1.0.TintSaturation: Controls the saturation of the blurred content. 1.0 is unchanged, 0.0 is fully desaturated (grayscale).NoiseOpacity: Adds a procedural noise texture overlay. Controls how visible the noise is (0.0 to 1.0).NoiseDensity: Controls the 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 aThemeResource. If omitted, the blur effect is used regardless of those settings.
Fill:=<WindhawkBlur BlurAmount="10" TintColor="#80ff0000" />
Fill:=<WindhawkBlur BlurAmount="10" TintColor="#ff0000" TintOpacity="0.5" />
These examples set a blur that is tinted with red at 50% opacity. Both versions have the same effect.
TintColor: Hex color in#AARRGGBBor#RRGGBBformat that is applied to the blur.TintOpacity: Opacity of the color that overrides the alpha ofTintColor.
Tip
There is no need to specify a TintOpacity value if your TintColor has an alpha value.
<WindhawkBlur BlurAmount="10" TintColor="{ThemeResource SystemAccentColor}" TintOpacity="0.5"/>
TintColor: ThemeResource color, such asSystemAccentColor.TintOpacity: Overrides the opacity of the ThemeResource color.
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:
Fill:=<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:
Fill:=<ImageBrush Stretch="UniformToFill" ImageSource="<image>" />
Replace <image> with your own image, a URL or a local file path.
Note
An image URL needs an internet connection when the image is loaded, for example when Explorer starts. To avoid this, download the image and use a local file path. For a theme that uses online images, follow the manual installation steps on its page, then replace the URLs with local paths in the mod's settings.