Show default window buttons on WPF Window using Wi

Question

I have found that using WindowChrome on a WPF Window can make me put content wherever I want in the Window, which is a great thought. Now I can finally make the title bar have the same color as the rest of my application.

However, I still like the default minimize/maximize/close buttons that appear on a non styled Window.

Is there any way I can style my Window using WindowChrome yet still preserve the default buttons?

<Style x:Key="MainWindow" TargetType="{x:Type Window}">
    <Setter Property="WindowChrome.WindowChrome">
        <Setter.Value>
            <WindowChrome CaptionHeight="30" ResizeBorderThickness="5" />
        </Setter.Value>
    </Setter>
</Style>

<Window Style="{StaticResource MainWindow}">
    <Grid Background="Black">
        <MyContent />
    </Grid>
</Window>

This makes a big black window (great!) but without any min/max/close buttons as they are hidden behind the Grid (not so great). The buttons are still clickable, though, so they're obviously there.

Answer 1

Before Windows 10 was introduced, you can customize your Window.Template by adding Margin property on your outside Border. Just like the code below.

<Window.Template>
    <ControlTemplate TargetType="Window">
        <Border Background="#3FFFFFFF">
            <AdornerDecorator Margin="8 10 8 8">
                <Border>
                    <ContentPresenter/>
                </Border>
            </AdornerDecorator>
        </Border>
    </ControlTemplate>
</Window.Template>
<WindowChrome.WindowChrome>
    <WindowChrome UseAeroCaptionButtons="True" GlassFrameThickness="8 30 8 8"/>
</WindowChrome.WindowChrome>

The code above does these things:

1. Use WindowChrome to make our controls showing above windows none client areas.
2. Avoid our controls covering the window caption buttons.
3. If you would like to show some controls above the caption bar, set it's Margin property to negative numbers such as 0 -30 0 0.

But after Windows 10, especially the Windows 10 Creators Update, you can no longer show windows default buttons with an acceptable window style. It would always show a themed border around, ugly!

<WindowChrome NonClientFrameEdges="Left,Bottom,Right" UseAeroCaptionButtons="True" GlassFrameThickness="8 30 8 8"/>

The code above may work in earlier versions of Windows 10. I mean, not as ugly as that on Creators Update.

Answer 2

Is there any way I can style my Window using WindowChrome yet still preserve the default buttons?

No, I don't think so. You can set the GlassFrameThickness property to 0 to disable the buttons and then you will have to create your own custom ones I am afraid. You could refer to the following project for some examples: https://wpfwindow.codeplex.com/.

If you want Window 10 style caption buttons you could use the Segoe MDL2 Assets font family:

<Style x:Key="CaptionButtonStyle" 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>

<Style x:Key="MinimizeButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
    <Setter Property="Content" Value="&#xE949;"/>
</Style>

<Style x:Key="MaximizeButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
    <Setter Property="Content" Value="&#xE739;"/>
</Style>

<Style x:Key="RestoreButtonStyle" TargetType="Button" BasedOn="{StaticResource CaptionButtonStyle}">
    <Setter Property="Content" Value="&#xE923;"/>
</Style>