The QAT is drawing on top of the WindowChrome.IconSource

Ribbon for WPF Forum

Posted 9 years ago by Eric P
Version: 15.1.0622

I am trying to put together a user interface that has a ribbon that is very similar to the Office 2013 layout. The key points we would like are the following.

  • Backstage File tab that fills the whole window. (See image below).

  • Quick Access Toolbar next to the application icon
  • Application name on the main title bar centered
  • Application Icon similar to Visual Studio 2013
  • Custom controls added next to the minimize button.

So far I have tried to use the RibbonWindow and the WindowChrome to achieve this. Previous posts have said that if the root object in the XMAL is the standard WPF Window class then we can define a WindowChrome object in XAML to achieve most of this. If the root object is the RibbonWindow, then it has its own WindowChrome and setting another WindowChrome in XAML can cause problems.

First I tried to use the standard WPF window and define the WindowChrome using the following XAML.

<Window Title=”MyAppName” .... >

    <DataTemplate x:Key="TitleBarContentTemplate">
      <Button Style="{DynamicResource {x:Static themes:SharedResourceKeys.WindowTitleBarButtonBaseStyleKey}}"
              themes:ThemeProperties.IsActive="{Binding IsActive, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
              ToolTip="Help" ToolTipService.InitialShowDelay="500">
            <ContentControl Content="{StaticResource appbar_question}">
                <ScaleTransform ScaleX="0.3" ScaleY="0.3" />

    <themes:WindowChrome IconMargin="0" TitleBarContentTemplate="{StaticResource TitleBarContentTemplate}">
            <ScaleTransform ScaleX="0.35" ScaleY="0.35" />
            <BitmapImage UriSource="/Images/Metro/dark/appbar.globe.png" />


The approach above adds the application icon (appbar.globe.png) in the upper left corner (correctly transformed), the application name next to that, the question mark next to the main minimize button, a whole row for the Quick Access Toolbar (which we do not like), and a backstage under the File Tab. The problem is that the backstage does not use the whole window like it’s shown in the example image and the QAT is using its own full row.

Next I tried to change the root object from a standard WPF Window to the Actipro RibbonWindow and I moved the TitleBarContentTemplete to the App.xaml resources. I also added the following XAML Image Resource in the App.xaml resources.

<Image x:Key="ChromeImage" Source="/Images/Metro/dark/appbar.globe.png">
    <ScaleTransform ScaleX="0.35" ScaleY="0.35" />

 In the code-behind of the MainWindow I have the following.

public partial class MainWindow : RibbonWindow {
  publc MainWindow(){
    var chrome = WindowChrome.GetChrome(this);
    chrome.TitleBarContentTemplate = (DataTemplate)App.Current.Resources["TitleBarContentTemplate"];
    chrome.IconSource = ((Image)App.Current.Resources["ChromeImage"]).Source;

 You also have to add the ApplicationName for the RibbonWindow because the standard WPF Window uses a property called Title.

<ribbon:RibbonWindow ApplicationName=”MyAppName” .... >

Now when I run the app its much closer to what we are looking for. The only real visual issues are that the ScaleTransform is not being used for the chrome.IconSource because it just wants an ImageSource that (as far as I know) can not include any kind of Transform. The Transform is defined at the Image level and the WindowChrome.IconSource is only an ImageSource object.

The second issue is that the WindowChrome.IconSource is not only huge but the Quick Access Toolbar is drawing directly on top of the image in the upper left corner of the main RibbonWindow. Basically the QAT is drawing directly on top of the application image. As a test I changed the appbar.globe.png (which is 76x76 pixels) to a much smaller 16x16 PNG that does not need to be scaled down, the QAT is still drawing on top of the application icon. 

So how do I get the WindowChrome.IconSource set in code to a PNG that needs to be scaled down to fit and how do I get the QAT to not draw on top of the WindowChome.IconSource image? I have set the RibbonWindow.Icon property to an ICO file and it does draw in the upper left cornder and the QAT is next to it not on top of it but its drawn very small. I think the WindowChrome.IconSource looks better but I am not sure how to get the QAT next to the WindowChrome.IconSource.



Comments (3)

Posted 9 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Eric,

The RibbonWindow.Icon property (not the WindowChrome.IconSource property) is what is designed to show up properly in a RibbonWindow for the icon area.  I believe the RibbonWindow template doesn't scale the image you supply though, so you want to use an image that is 16x16.  If you use that property with a 16x16 capable icon then it should show correctly and have the QAT in the correct position.

If you see any problems with that approach then please make a new simple sample project that shows the issue, and email that to our support address in a renamed .zip file extension so it doesn't get spam blocked.  Please reference this thread in your email.  Thanks!

Actipro Software Support

Posted 9 years ago by Eric P

Posted 9 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Eric,

What you stated above is correct.  RibbonWindow has a customized set of window templates that are designed for windows that contain a Ribbon.  They are meant to have a 16x16 icon that lies next to the QAT.  Using a larger icon won't work with the current RibbonWindow arrange logic.  If you are using Ribbon, I would recommend sticking with the RibbonWindow instead of a normal Window.

Actipro Software Support

The latest build of this product (v24.1.2) was released 3 months ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.