WPF WindowChrome causing flickering on resize

Question

I'm using WindowChrome to restyle my window in an easy fast way but the problem is there is flickering when resizing the window, especially when resizing from left to right.

<Window x:Class="View.Settings"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="570" Width="800" WindowStartupLocation="CenterOwner"
    Background="{StaticResource DarkGrayBackground}" ResizeMode="CanResize" 
    WindowStyle="SingleBorderWindow"
    Title="Settings"
    WindowState="Normal">
<WindowChrome.WindowChrome>
    <WindowChrome 
        CaptionHeight="0"
        CornerRadius="0"
        GlassFrameThickness="1"
        UseAeroCaptionButtons="False"
        ResizeBorderThickness="5"
        NonClientFrameEdges="None"/>
</WindowChrome.WindowChrome>

<Border BorderBrush="Black" BorderThickness="1">
    <DockPanel HorizontalAlignment="Stretch" LastChildFill="True" Margin="0,0,0,0" VerticalAlignment="Stretch">
        <!--TitleBar-->
        <Border DockPanel.Dock="Top" BorderBrush="{StaticResource GrayBorder}" BorderThickness="0,0,0,1">
            <Grid Height="40" Background="{StaticResource WhiteBackground}">
                <DockPanel LastChildFill="False">
                    <Image DockPanel.Dock="Left" Margin="0,0,5,0" ></Image>
                    <Label DockPanel.Dock="Left" Content="{DynamicResource settings}" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
                    <Button DockPanel.Dock="Right" Style="{StaticResource CloseButton}" x:Name="CloseBtn"/>
                </DockPanel>
            </Grid>
        </Border>
        <!--Left Menu-->
        <Border DockPanel.Dock="Left" Width="180" Background="{StaticResource GrayBackground}" BorderBrush="{StaticResource GrayBorder}" BorderThickness="0,0,1,0">
            <DockPanel Margin="0,40,0,0"  Width="180" LastChildFill="False">
                <Button DockPanel.Dock="Top" Style="{StaticResource BigGrayButton}" 
                            Content="{DynamicResource general}"/>
            </DockPanel>
        </Border>
        <!--Bottom bar-->
        <Border DockPanel.Dock="Bottom" BorderBrush="{StaticResource GrayBorder}" BorderThickness="0,1,0,0" Height="40" Background="{StaticResource WhiteBackground}">
            <DockPanel LastChildFill="False">

            </DockPanel>
        </Border>
        <!--Main Page-->
        <ScrollViewer Background="{StaticResource DarkGrayBackground}" IsTabStop="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top">
            <DockPanel LastChildFill="False" Margin="10,0,10,10">
                <Label DockPanel.Dock="Top" Height="40" FontSize="16" FontWeight="SemiBold" VerticalContentAlignment="Center" Content="{DynamicResource general}"/>
                <Frame DockPanel.Dock="top" x:Name="MainFrame"></Frame>
            </DockPanel>
        </ScrollViewer>
    </DockPanel>
</Border>

When this part WindowChrome is removed everything goes back to normal.

Leffler

I noticed the same problem today in an application that I have a similar styling applied to. Will be interested to see what the solutions might be. – Devinne

Me too, I have the same effect. – Tunstall

Why is GlassFrameThickness="1" here, if aero buttons is disabled? Also ResizeBorderThickness="5" can probably cause the resize issue – Wingspread

Same problem here. Will be interesting to see the solution! – Tinctorial

Have you tried running it NOT in debug mode? Having a debugger attached often makes stuff flicker on resize – Besprent

@dymanoid, the provided XAML does illustrate the problem. Run it, keep an eye on the right-most border and then resize from left to right (some flickering) and back to left (more flickering). – Tinctorial

@l33t, if by "flickering" you mean the default DWM behavior of WPF, there's a good reading on SO - there's no way to fix it. I have no other issues besides that on my system. – Levenson

That's what I'm observing here. Not sure if this is what the OP is referring to. – Tinctorial

Answer 1

Your Problem is caused by the property NonClientFrameEdges which is set to NONE. This property Gets or sets a value that indicates which edges of the window frame are not owned by the client and At least one edge must belong to the client.

So change your code to:

NonClientFrameEdges="Right"

This will solve your problem.

Contradiction

Nice work! I changed it to "Bottom" and that actually looked a little better for my application. – Nathalie

This adds weird blank space when it's set to other value than None – Huckleberry

Not really a solution I'd say. – Huckleberry

as mentioned by @Konrad, this adds a white border on the side of the window specified for NonClientFrameEdges. so if your window border is already white, the solution will work for you (since you won't notice this artifact). sadly my window border is black, so this is not useful for me. – Zoon

@Zoon if you're still looking for a solution, IIRC ControlzEx fixes all of these issues with some hacks: github.com/ControlzEx/ControlzEx#windowchromebehavior – Huckleberry