How to show default buttons on WPF customized title bar using WindowChrome

Question

I'm following the article Restyle Your Window where the author is showing maximize button on title bar as character #. But I would like to show it a default button as shown below:

Currently my customized title bar looks like the following:

Question: How can we modify the following xaml to achieve the above? I am thinking may be we only need to modify following tag:

<Button x:Name="btnRestore" Click="MaximizeRestoreClick" Content="#"
                                    DockPanel.Dock="Right" WindowChrome.IsHitTestVisibleInChrome="True" />

MyWindowStyle.xaml:

<ResourceDictionary x:Class="WPFtest.WindowStyle"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
                    xmlns:local="clr-namespace:WPFtest">

    <Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome CaptionHeight="30" CornerRadius="4" GlassFrameThickness="0" NonClientFrameEdges="None" ResizeBorderThickness="5" UseAeroCaptionButtons="False" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="Background" Value="Gray" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Window}">
                    <Grid>
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="5,30,5,5">
                            <AdornerDecorator>
                                <ContentPresenter />
                            </AdornerDecorator>
                        </Border>

                        <DockPanel Height="20" VerticalAlignment="Top" LastChildFill="False">
                            <TextBlock Margin="5,0,0,0" VerticalAlignment="Center" DockPanel.Dock="Left" FontSize="12" Foreground="White"
                                       Text="{TemplateBinding Title}" />

                            <Button x:Name="btnClose" Click="CloseClick" Content="X" DockPanel.Dock="Right"
                                    WindowChrome.IsHitTestVisibleInChrome="True" />

                            <Button x:Name="btnRestore" Click="MaximizeRestoreClick" Content="#"
                                    DockPanel.Dock="Right" WindowChrome.IsHitTestVisibleInChrome="True" />

                            <Button x:Name="btnMinimize" VerticalContentAlignment="Bottom" Click="MinimizeClick"
                                    Content="_" DockPanel.Dock="Right" WindowChrome.IsHitTestVisibleInChrome="True" />
                        </DockPanel>

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Answer 1

You cannot show the default buttons when you define a custom chrome window style, but you could easily style your custom buttons to look like the default ones.

Use the Segoe MDL2 Assets font family as I suggested here:

<Button x:Name="btnMinimize" Content="&#xE949;"
                Padding="0 1 1 0"
                VerticalContentAlignment="Bottom"
                Click="MinimizeClick" DockPanel.Dock="Right"
                WindowChrome.IsHitTestVisibleInChrome="True">
    <Button.Template>
        <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" 
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   RenderOptions.ClearTypeHint="Auto"
                                   TextOptions.TextRenderingMode="Aliased"
                                   TextOptions.TextFormattingMode="Display"
                                   Margin="{TemplateBinding Padding}"/>
            </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>
    </Button.Template>
</Button>