5

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?

enter image description here

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.

gReX
  • 1,060
  • 1
  • 20
  • 35
  • Based on the links you provided it looks like it's just that, 'a known issue'. Another poster said not to use the RibbonWindow since it's terribly outdated. After looking at some of the issues that RibbonWindow has, it looks like Microsoft has closed a lot of them and set them to "won't fix", despite them being relatively serious issues. It might be that the RibbonWindow is on it's way to being deprecated. – Danielle Nov 23 '15 at 15:44
  • At least RibbonWindow is not deprecated yet. Following the links, there is not description of the "border-bug". Only: * The window content (client area) is cropped when the window is in Maximized mode. * The window border is too thin. * QuickAccessToolbar does not have enough “margin” to the top. * The window title is blurry and does not have enough “margin” to the top. – gReX Nov 24 '15 at 13:00
  • https://connect.microsoft.com/VisualStudio/Feedback/Details/1263145 – gReX Nov 24 '15 at 13:02
  • @GregorValentin What exactly do you need from RibbonWindow features? It is maybe easier to extend the Window class for your needs. With a custom template there is pretty much you can do. – christoph Nov 26 '15 at 08:52
  • Is use the RibbonTabs, Contextual-RibbonTabs, RibbonGroups, RibbonButtons and other controls from the library. The ribbon window react to window resizes. I don't like the Idea to re-implement this stuff. – gReX Nov 26 '15 at 09:55

1 Answers1

2

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:

enter image description here

Community
  • 1
  • 1
Vatsan
  • 1,163
  • 9
  • 15
  • 1
    very nice. It works with my Sample Project :-). Instead setting the Boarder to Wheat I Bind it to {DynamicResource {x:Static SystemColors.ActiveBorderBrush}}. Checking the influence to my styles. – gReX Nov 27 '15 at 09:30