WPF Ribbon obscures the titlebar

Question

I am making a WPF program in C# in Visual Studio 2013 and I am using the Ribbon component. So far I've only written XAML for the Ribbon and a few buttons on it, and have only modified the C# file by adding using System.Windows.Controls.Ribbon; and subclassing RibbonWindow instead of Window. I remembered to add a reference to the required .dll in Visual Studio for the Ribbon.

When I run the program, the titlebar is really covered up: enter image description here

Setting the Ribbon to have HorizontalAlignment="Left" makes it look like this: enter image description here

I'm pretty new to WPF, C# and Visual Studio, so I don't have any idea what's wrong here. I have pasted my XAML code below (omitting the tab groups and application menu):

<RibbonWindow
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" x:Class="SwaagPaiNT.MainWindow"
        Title="Swaag PaiNT" Height="350" Width="525">
    <Grid>
        <Custom:Ribbon HorizontalAlignment="Stretch" VerticalAlignment="Top">
            <Custom:Ribbon.HelpPaneContent>
                <Custom:RibbonButton Name="what" ToolTip="whachunee" />
            </Custom:Ribbon.HelpPaneContent>

            <Custom:Ribbon.QuickAccessToolBar>
                <Custom:RibbonQuickAccessToolBar>
                    <Custom:RibbonButton x:Name="SAVE" ToolTip="BLAZE IT"/>
                    <Custom:RibbonSplitButton x:Name="Undo">
                        <Custom:RibbonSplitMenuItem Header="CANNOT UNDO MORE" />
                    </Custom:RibbonSplitButton>
                </Custom:RibbonQuickAccessToolBar>
            </Custom:Ribbon.QuickAccessToolBar>

        </Custom:Ribbon>

    </Grid>
</RibbonWindow>

This is a Windows 7 Professional 32-bit system.

Eugene Podskal Eugene Podskal · Accepted Answer · 2014-06-24T19:13:44

But your problem is that everything is painted as it should be - Ribbon knows nothing about those close and minimize buttons - it is just given some space to be painted on.

To change its looks and behaviours either use templates, create a user control or directly subclass the Ribbon(it is not the usual way, but sometimes you really want to encapsulate your control).

<Window>
   <Grid>
       ...
       <MyRibbon Grid.Row="0" .../>
       <Ribbon Grid.Row="1" Template={StaticResource MyRibbonTemplate} .../>
   </Grid>
</Windows>

EDIT:

Sorry, I was a bit unattentive and never looked at RibbonWindow. I've actually never seen or used RibbonWindow. What I've written before was nearly completely wrong. Thank you for pointing it. Now to the problem.

Such behaviour indicates that the Ribbon control is not integrated with the RibbonWindow as it should be, so you could:

Try MSDN example in place of your code. I don't see any fundamental differences, but who knows. If it works - we will know that there is some simple problem in XAML or code-behind. If not - try next
Try to change the targeted .NET version(Try the highest possible).
Try to change the visual style in Windows(simplified to Aero or to Classic).
There are could be some problems with manually changed inheritance of your windows class to RibbonWindow . Window's code-behind file is actually partial class. I am not sure how it may work in such a way, but that's a possible direction to look in.

P.S.: I will give a try to it by myself later and write about any results.

EDIT:

I've downloaded ribbon controls libraries and tried the MSDN example in Windows 8.1 with Visual Studio 2013 for .NET 4.5 - everything worked fine. But when I changed the targeted framework to 4.0 the Ribbon control blackened the entire line with title. Nonetheless I'll try the example in Win 7 with VS2010.

EDIT:

Such code worked for me in Win7 VS2010 targeting .NET 4.0:

<ribbon:RibbonWindow x:Class="SwaagPaiNT.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        Title="MainWindow"
        x:Name="RibbonWindow"
        Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ribbon:Ribbon x:Name="Ribbon" Title="Ribbon Title">
            <ribbon:Ribbon.HelpPaneContent>
                <ribbon:RibbonButton />
            </ribbon:Ribbon.HelpPaneContent>
            <ribbon:Ribbon.QuickAccessToolBar>
                <ribbon:RibbonQuickAccessToolBar >
                    <ribbon:RibbonButton x:Name="QATButton1"/>
                    <ribbon:RibbonButton x:Name="QATButton2" 
                                         />
                </ribbon:RibbonQuickAccessToolBar>
            </ribbon:Ribbon.QuickAccessToolBar>
            <ribbon:Ribbon.ApplicationMenu>
                <ribbon:RibbonApplicationMenu >
                    <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
                                                      x:Name="MenuItem1"
                                                      />
                </ribbon:RibbonApplicationMenu>
            </ribbon:Ribbon.ApplicationMenu>
            <ribbon:RibbonTab x:Name="HomeTab" 
                              Header="Home">
                <ribbon:RibbonGroup x:Name="Group1" 
                                    Header="Group1">
                    <ribbon:RibbonButton x:Name="Button1"

                                         Label="Button1" />
                </ribbon:RibbonGroup>
            </ribbon:RibbonTab>
        </ribbon:Ribbon>
    </Grid>
</ribbon:RibbonWindow>

using Microsoft.Windows.Controls.Ribbon;

namespace SwaagPaiNT
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

The only real difference between your code and the shown above is in the

<RibbonWindow
 ...
 xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"

Your code uses xml schema to identify ribbon and not the clr-namespace as MSDN shows, also RibbonWindow is used without any namespace prefix.

I hope that it will help.

WPF Ribbon obscures the titlebar

1 Answers