How to change WPF Window Title Bar Background

Question

How to change the background color of wpf window title bar. I used the following code, but it didnt work. I cannot see the close button when i change the color of the grid.

Current

Wanted

<Style x:Key="StandardStyle" TargetType="{x:Type Window}">
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome />
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Window}">
                    <Grid Background="Yellow">
                        <Border  
                            Margin="50"
                           >
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Border>
                        <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}"   
                               VerticalAlignment="Top" HorizontalAlignment="Left"   
                               Margin="36,8,0,0" Foreground="Red"/>
                        <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}"  
                           VerticalAlignment="Top" HorizontalAlignment="Left"  
                           Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(WindowChrome.WindowChrome).ResizeBorderThickness}"   
                           Width="100"  
                           WindowChrome.IsHitTestVisibleInChrome="True"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The short answer is: you have to hide the default Window title bar and create your own in order to customize it. Here's an answer talking about that: https://stackoverflow.com/a/9978757/4317797 — Michal Diviš, Jul 04 '22 at 12:28

score 2 · Accepted Answer · answered Jul 04 '22 at 12:40

When you extend your own content into the non-client area of a window using the WindowChrome class, you should define custom captions button yourself:

<Style x:Key="StandardStyle" TargetType="{x:Type Window}">
    <Setter Property="WindowChrome.WindowChrome">
        <Setter.Value>
            <WindowChrome UseAeroCaptionButtons="False" />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Window}">
                <Grid Background="Yellow">
                    <Border  
                            Margin="50"
                           >
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </Border>
                    <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}"   
                               VerticalAlignment="Top" HorizontalAlignment="Left"   
                               Margin="36,8,0,0" Foreground="Red"/>
                    <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}"  
                           VerticalAlignment="Top" HorizontalAlignment="Left"  
                           Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(WindowChrome.WindowChrome).ResizeBorderThickness}"   
                           Width="100"  
                           WindowChrome.IsHitTestVisibleInChrome="True"/>
                    <Button Content="&#xE106;"
                                WindowChrome.IsHitTestVisibleInChrome="True"
                                    HorizontalAlignment="Right" VerticalAlignment="Top"
                                    Command="{x:Static ApplicationCommands.Close}">
                        <Button.Style>
                            <Style TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid x:Name="LayoutRoot" Background="Transparent" Width="44" Height="30">
                                                <TextBlock x:Name="txt" Text="{TemplateBinding Content}" FontFamily="Segoe MDL2 Assets" FontSize="10" 
                                                                   Foreground="#999999" HorizontalAlignment="Center" VerticalAlignment="Center"
                                                                   RenderOptions.ClearTypeHint="Auto" TextOptions.TextRenderingMode="Aliased"  TextOptions.TextFormattingMode="Display"/>
                                            </Grid>
                                            <ControlTemplate.Triggers>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter TargetName="LayoutRoot" Property="Background" Value="#E5E5E5"/>
                                                    <Setter TargetName="txt" Property="Foreground" Value="#000000"/>
                                                </Trigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Button.Style>
                    </Button>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You also need to implement the command/event handler(s): https://stackoverflow.com/a/61784021/7252182

Are there any resources that explain more about this approach? Will it be possible to further customize the WindowChrome class with contentable header? Also, I face an issue with this where if WindowState is made fullscreen it just messes up the design. — Shameel Mohamed, Feb 09 '23 at 17:53

How to change WPF Window Title Bar Background

1 Answers1