Thick border on the right and on the left

Question

My RibbonWindow Desktop Application shows a thick black border on both sides in Windows 10. You can reproduce this by a simple WPF Application showing a RibbonWindow. The border is not showing on Windows 8.x.

Does anybody know, how to remove the border?

Some guy asked a similar question on msdn, and the answer 'it's a known issue'. But following the provided link I can't find any specific.

So can anybody help me out of this?

Edit: the color of the borders is black, if the window is not active. If the window is active, the border get the color from the customized windows accent color.

Answer 1

Consider using WindowChrome with GlassFrameThickness = GlassFrameCompleteThickness.

This is not an ideal solution - you'd have to carefully make room for the window title as well as the maximize, minimize and close buttons. That said, it does get rid of the border problem you are dealing with.

For an example of how to manage the layout of content when WindowChrome is in use, see this SO answer.

Here is a complete XAML that should also help:

<RibbonWindow x:Class="RibbonTest.MainWindow"
        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"
        xmlns:local="clr-namespace:RibbonTest"
              xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"
        mc:Ignorable="d"
        Title="RibbonWindow" Height="350" Width="525">
    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="{x:Static shell:WindowChrome.GlassFrameCompleteThickness}"/>
    </WindowChrome.WindowChrome>
    <Window.Template>
        <ControlTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>

                <!-- Opacity of < 1.0 helps show the minimize, maximize and close buttons -->
                <Border Grid.Row="0" Background="Wheat" Opacity="0.8">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>


                        <!-- Window Title - Center Aligned -->
                        <TextBlock 
                            Grid.Column="1"
                            TextAlignment="Center" 
                            VerticalAlignment="Center"
                            Text="{Binding Title, RelativeSource={RelativeSource TemplatedParent}}" />

                    </Grid>
                </Border>

                <!-- This is the Window's main content area -->
                <!-- Top margin 44 = WindowChrome ResizeBorderThickness (4) + CaptionHeight(40) -->
                <!-- Bottom margin 1 is somewhat arbitrary -->
                <Border Grid.Row="1" Background="White" Opacity="0.5">
                    <ContentPresenter Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                </Border>
            </Grid>
        </ControlTemplate>
    </Window.Template>
    <Grid>
        <Border Background="Cyan" BorderBrush="BlanchedAlmond" BorderThickness="5">
            <Label FontSize="80" HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</Label>
        </Border>
    </Grid>
</RibbonWindow>

The resulting RibbonWindow would look something like this: