WPF WindowChrome: Edges of maximized Window are out of the screen

Question

I use WindowChrome to customize a Window. When I maximize the Window, then the edges are out of the screen. I use the following code to fix this:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="50" CornerRadius="0" GlassFrameThickness="0" NonClientFrameEdges="None" ResizeBorderThickness="5" UseAeroCaptionButtons="False" />
    </WindowChrome.WindowChrome>

    <Grid>  
        <Grid.Style>
            <Style TargetType="{x:Type Grid}">
                <Setter Property="Margin" Value="0" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Maximized">
                        <Setter Property="Margin" Value="{x:Static SystemParameters.WindowResizeBorderThickness}" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
        <Border BorderThickness="2" BorderBrush="Blue" Background="Yellow" />
    </Grid>

</Window>

My problem: How can I get the correct number of pixels, so that the edges are not out of the screen.

SystemParameters.WindowResizeBorderThickness contains not the correct value.

Aphesis

This might be useful: #2967718 – Midrib

This is useful: #4671429 – Midrib

Answer 1

The WindowChrome will basically overlap by the size of ResizeBorderThickness when maximized.

If you want your Window completely visible while maximized just use the WindowChrome ResizeBorderThickness (5px) as Margin in your Grid style:

<Setter Property="Margin" Value="5" />

---

Otherwise if you want your Border's BorderThickness not to be visible while the window is maximized, you should use your Border's BorderThickness (2px) as Margin in addition to the WindowChrome ResizeBorderThickness (5px) in your Grid style. Then the Margin would be 7px.

Zulazulch

This doesn't seem to be correct. I get an overlap of 8 pixels even though my ResizeBorderThickness is 3 (and I even tried 0 before I got here). That overlap seems to be originating from something else. – Fluor

@Arda, in tests using the OP's example, it seems that once maximised, Windows ignores the ResizeBorderThickness. Setting margin to 7 worked for me, while 8 was just 1px too big. – Agle

Answer 2

Example of how to increase border thickness when a window is maximised. Otherwise, due to oddities of WindowChrome, part of the border will disappear.

This example also strips out the standard window header, so you have to add your own minimize/maximize/close buttons.

<Window ResizeMode="CanResizeWithGrip"
        WindowStyle="SingleBorderWindow">
    <!-- Remove window header and border. Use with ResizeMode="CanResizeWithGrip" and WindowStyle="SingleBorderWindow". -->
    <WindowChrome.WindowChrome>
        <WindowChrome     
            CaptionHeight="1"  
            CornerRadius ="0"
            ResizeBorderThickness="4"         
            GlassFrameThickness="0">
        </WindowChrome>
    </WindowChrome.WindowChrome>            
    <Border BorderThickness="1">     
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <!-- Add to avoid border disappearing when window is maximised -->
                    <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource AncestorType=Window}}" 
                                 Value="Maximized">
                        <Setter Property="Margin" Value="10"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding WindowState, RelativeSource={RelativeSource AncestorType=Window}}" 
                                 Value="Normal">
                        <Setter Property="Margin" Value="0"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Grid>
           <!-- Window XAML here. -->
        <Grid>
     </Border>
 </Window>

Midrib

Exactly what I needed! One small drawback: the corner radius does not seem to work any more. Thanks for this solution. – Matthieu

Answer 3

Based on the OP's original example, they were almost there...

When the window is maximised, Windows seems to ignore the ResizeBorderThickness value. Using <Setter Property="Margin" Value="7" /> seems to work, but this value may need to be changed depending on the operating system (I tested this on Windows 10).

I recommend making a couple of small tweaks (see code below), such as adding WindowStyle="None" and ResizeMode="CanResize" to Window, as well as moving the Style out into either Window.Resources, Application.Resources or even a ResourceDictionary, changing the style's TargetType to "{x:Type Panel}" and using a key name (eg: x:Key="WindowMainPanelStyle"), as this will prevent the style automatically being applied to any child Grid elements, as well as allowing the style to be used with any elements that inherit from Panel (such as Border, DockPanel, Grid, StackPanel, etc).

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    WindowStyle="None"
    ResizeMode="CanResize">

<WindowChrome.WindowChrome>
    <WindowChrome CaptionHeight="50" ResizeBorderThickness="5" />
</WindowChrome.WindowChrome>

<Window.Resources>
    <Style TargetType="{x:Type Panel}" x:Key="WindowMainPanelStyle">
        <Setter Property="Margin" Value="0" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=WindowState}" Value="Maximized">
                <Setter Property="Margin" Value="7" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid Style="{StaticResource WindowMainPanelStyle}">
    <Border BorderThickness="2" BorderBrush="Blue" Background="Yellow" />
</Grid>

</Window>

Agle