13

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.

HmH
  • 389
  • 3
  • 14
  • 1
    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. – Rob Goodwin Aug 04 '18 at 02:39
  • Me too, I have the same effect. – IngoB Jan 16 '19 at 08:54
  • Why is `GlassFrameThickness="1"` here, if aero buttons is disabled? Also `ResizeBorderThickness="5"` can probably cause the resize issue – Pavel Anikhouski Feb 22 '19 at 09:52
  • Same problem here. Will be interesting to see the solution! – l33t Feb 25 '19 at 08:48
  • Have you tried running it NOT in debug mode? Having a debugger attached often makes stuff flicker on resize – Jonas B Feb 26 '19 at 09:17
  • @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). – l33t Feb 26 '19 at 14:47
  • 1
    @l33t, if by "flickering" you mean the default DWM behavior of WPF, there's a good reading [on SO](https://stackoverflow.com/questions/53000291/how-to-smooth-ugly-jitter-flicker-jumping-when-resizing-windows-especially-drag) - there's no way to fix it. I have no other issues besides that on my system. – dymanoid Feb 26 '19 at 15:19
  • That's what I'm observing here. Not sure if this is what the OP is referring to. – l33t Feb 26 '19 at 15:21

1 Answers1

5

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.

Pvria Ansari
  • 406
  • 4
  • 20
  • Nice work! I changed it to "Bottom" and that actually looked a little better for my application. – Jason Stevenson Mar 01 '19 at 00:30
  • 1
    This adds weird blank space when it's set to other value than None – Konrad Jul 04 '19 at 12:01
  • 1
    Not really a solution I'd say. – Konrad Jul 04 '19 at 12:01
  • 3
    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. – larsbw Nov 15 '19 at 10:27
  • @larsbw if you're still looking for a solution, IIRC ControlzEx fixes all of these issues with some hacks: https://github.com/ControlzEx/ControlzEx#windowchromebehavior – Konrad Nov 15 '19 at 10:39