如何更改 WPF Window 标题栏背景

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>

Answer 1

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