- Introduction
- Themes
- Explorer frame container height
- Tab
- Navigation Bar
- Command Bar
- Details view
- Home Page
- Gallery Page
- Desktop context menu
- Transforms
- Colors
This is a collection of commonly requested file explorer styling customizations for Windows 11. It is intended to be used with the Windows 11 File Explorer 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 File Explorer Styler" mod.
After installing the mod, open its Settings tab and adjust the styles according to your preferences.
Some customizations are best to be 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 taskbar styling
guide,
The Windows 11 notification center styling
guide.
How to find targets using UWPSpy.
If you're looking for a customization that is not listed here, please open an issue.
If you have a file explorer 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 File Explorer Styler mod. The following themes are available:
| Link | Screenshot |
|---|---|
| Minimal Explorer11 |  |
| Tabless |  |
| NoCommandBar |  |
| MicaBar |  |
The height of the explorer frame container which includes the tabs, the address bar, and the command bar, set to zero to use the default height.
Target:
Grid#TabContainer > ContentPresenter > StackPanel > TextBlock
Style:
Foreground=Magenta
Target:
TabViewItem > Grid#LayoutRoot > Canvas > Microsoft.UI.Xaml.Shapes.Path#SelectedBackgroundPath
Style:
Fill=#00FFFF
Target:
TabViewItem > Grid#LayoutRoot
Style:
Visibility=Collapsed
Target:
Button#CloseButton
Style:
Visibility=Collapsed
Target:
Button#AddButton
Style:
Visibility=Collapsed
Target:
Grid#TabContainer > Viewbox#IconBox
Style:
Visibility=Collapsed
Target:
Grid#NavigationBarControlGrid
Style:
Background:=<SolidColorBrush Color="Grey" TintOpacity="0.4"/>
Targets:
Grid#CommandBarControlRootGrid
CommandBar#FileExplorerCommandBar
Style:
Background=Transparent
Target:
Grid#DetailsViewControlRootGrid
Style:
Background=#FFFF00
Target:
StackPanel#DetailsViewThumbnail
Style:
Background=#FFFF00
Target:
Grid#HomeViewRootGrid
Style:
Background=#FFFF00
Targets:
FileExplorerExtensions.GalleryViewControl#GalleryViewControl > Grid
FileExplorerExtensions.GalleryViewControl#GalleryViewControl > Grid > Grid#GalleryRootGrid
Style:
Background=Transparent
Target:
CommandBarOverflowPresenter#SecondaryItemsControl > Grid#LayoutRoot > Border
Style:
BorderBrush=#00FFFF
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 gonna 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 end with
a number ranging from 1-3. Check out the official Microsoft
docs
for all variations.
Fill:=<SolidColorBrush Color="{ThemeResource SystemAccentColorDark2}" Opacity="0.5" />
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, this 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 current theme.
Fill:=<AcrylicBrush TintColor="{ThemeResource SystemAccentColorDark2}" TintOpacity="0.3" />
An alternative to Acrylic is the mod's own blur implementation called WindhawkBlur. It differs from Acrylic because it has a customizable blur radius and has fewer bugs (e.g. ramensoftware/windhawk-mods#742).
Fill:=<WindhawkBlur BlurAmount="10" TintColor="#80ff0000" />
This example sets a blur that is tinted with red at 50% opacity.
BlurAmount: Radius of blur effect (set to 30 to mimic Acrylic).TintColor: Hex color in#AARRGGBBformat that is applied to the blur.ThemeResourcecolors and color names (e.g.Red) are currently not supported.
Note
Unfortunately I haven't figured this out yet. If you have any info please contribute by making a pull request.
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.
