How to change a default style or color of a standard control?

Last few weeks I’ve answered several questions on StackOverflow which came down to the same phrases:

• How to change the default style of control X?
• How to change the default color on control Y?
• Why does control Z look like that by default?

Notice the keyword “default”. All standard XAML controls in Windows 10 UWP have default styles (as they did in previous XAML versions as well). You can find these styles on MSDN, but I always forget the link and sometimes you don’t have internet connectivity. The good news is that these styles are available on your disk as well under this location:

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic\generic.xaml
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml

Styles for Windows 8.1 are installed in a different location:

C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design\generic.xaml

The path contains the SDK version, so newer SDKs will bring their own generic.xaml file. Update: added the paths for 10586 and 14393 as well. It’s best to always look at the latest version (or the version you’re targeting) because sometimes specific controls do change between version. An example of this is the visual tree of a GridView that is simplified comparing to the Windows 8/8.1 SDK, bringing performance gains. Dragging around your old tweaked styles for too long might make you skip on these performance gains, so always think twice before overriding default styles for very small changes (or re-apply your changes on newer SDK version styles).

You can change the styles in Visual Studio or Blend for Visual Studio using the built-in context menu or manually add the XAML to your page or resource dictionary. Both ways result in a new copy overriding the default styles defined in generic.xaml under the Windows Kits directory.

Example

In Windows 10, GridView and ListView headers have a thin line under the header’s title. If you want to keep the Windows 8.1 look & feel, you’ll have to dig in the default styles.

<!-- Default style for Windows.UI.Xaml.Controls.ListViewHeaderItem -->
<Style TargetType="ListViewHeaderItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Margin" Value="0,0,0,4"/>
    <Setter Property="Padding" Value="12,8,12,0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewHeaderItem">
                <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="ContentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
                               StrokeThickness="0.5"
                               Height="1"
                               VerticalAlignment="Bottom"
                               HorizontalAlignment="Stretch"
                               Margin="12,8,12,0"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You’ll notice that the default style for ListViewHeaderItem (and similar for GridViewHeaderItem) has both a ContentPresenter and Rectangle in the ControlTemplate. Since the StrokeThickness is a fixed value and not bound to the control’s dependency properties, you’ll have to override the default style and remove the Rectangle if you want to get rid of the thin line.

Bonus

You can use generic.xaml not only to edit existing styles, but also to find how a control works (at least everything related to layout) or which system-defined brushes and colors exist.

Next to the generic.xaml there’s also a themeresources.xaml, defining all styles for the different themes: Default (Dark), Light and HighContrast.