How to prevent the ribbon's application menu from opening outside the window?

Question

We've encountered an issue with the application menu in our program, where the application menu opens in an unexpected location depending where the window is located.

Initially, the application menu would open directly down and to the left of the ribbon's application menu button. We implemented the solution outlined in this question, and that caused the application menu to open in the direction we wanted (down and to the right).

Unfortunately, there's a side effect. As mentioned above, the application menu opens in an unexpected location when the windows is located near the edge of a monitor, though the specifics differ depending upon the screen configuration:

On a single-monitor system, this will occur when the window is aligned with the screen's right edge.
On a multi-monitor system, this happens when the window is within 20 pixels of the left edge of any screen except the left-most.

In either case, the application menu will open to the left of the application window, separated from the window by at least 50 pixels.

Below is a stripped-down application that exhibits the above behavior.

The main window:

<Window
        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"
        xmlns:Example="clr-namespace:Ribbon_Example"
        xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        x:Class="Ribbon_Example.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
      <Ribbon>         
         <Ribbon.ApplicationMenu>
            <RibbonApplicationMenu>
               <RibbonApplicationMenu.Resources>
                  <Example:NegativeIntegerConverter x:Key="NegativeIntegerConverter" />

                  <Style TargetType="Popup">
                     <Setter Property="Placement" Value="Left" />
                     <Setter Property="HorizontalOffset"
                             Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=RibbonApplicationMenu},
                                             Path=Width,
                                             Converter={StaticResource ResourceKey=NegativeIntegerConverter}}" />
                  </Style>
               </RibbonApplicationMenu.Resources>

               <RibbonApplicationMenuItem Header="New..." />
               <RibbonApplicationMenuItem Header="Open..." />
               <RibbonApplicationMenuItem Header="Close" />
               <RibbonApplicationMenuItem Header="Save" />
               <RibbonApplicationMenuItem Header="Save As..." />               
            </RibbonApplicationMenu>
         </Ribbon.ApplicationMenu>
      </Ribbon>
    </Grid>
</Window>

The type converter from the aformentioned question:

using System;
using System.Globalization;
using System.Windows.Data;

namespace Ribbon_Example
{
    class NegativeIntegerConverter : IValueConverter
    {
        public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
        {
            return -1 * System.Convert.ToInt32( value );
        }

        public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture )
        {
            return -1 * System.Convert.ToInt32( value );
        }
    }
}

A picture's worth a thousand words, so here's an example of the multi-monitor version of this problem.

What might we be doing wrong?

netaholic · Answer 1 · 2015-09-23T15:18:20.860

0

UPDATE Here is how it looks to me:

I've ran your code and simply changing yours

                  <Style TargetType="Popup">
                     <Setter Property="Placement" Value="Left" />
                     <Setter Property="HorizontalOffset"
                             Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=RibbonApplicationMenu},
                                             Path=Width,
                                             Converter={StaticResource ResourceKey=NegativeIntegerConverter}}" />
                  </Style>

to

  <Style TargetType="Popup">
        <Setter Property="Placement" Value="Relative" />
  </Style>

fixed for me the behaviour, that you've showed. I'm also running on duo-monitor PC

edited Sep 23 '15 at 15:18

answered Sep 23 '15 at 15:05

netaholic

1,345
10
22

1

Unfortunately, this change causes the application menu to open to the left (outside the window frame) in the normal case (when near a screen's center point). When at the screen's left edge, the application menu will still open to the left of the window, but be left-aligned with that screen's edge. This is the original behavior that we ran into. How does this appear for you? – Amelamise Sep 23 '15 at 15:14
@Amelamise can you test if adding `` helps? – netaholic Sep 23 '15 at 15:19
That's bizarre. Looking at both of your screenshots, our code and references are identical, yet the behavior is entirely different. – Amelamise Sep 23 '15 at 15:30
I just tried the FlowDirection property - I believe that refers to the language's flow direction, rather than the menu's. In either case, the menu still opened to the left. – Amelamise Sep 23 '15 at 15:33
@Amelamise the incorrect behaviour is actually corect. When you set `Placement` to`Left` then a popup will try to appear to the left of a parent control if there is enought space. And converter doesn't fix it, it just moves popup x coordinate to the width of parent. By setting `Placement` to `Bottom`, `Relative` or `Right` your popup should work fine. Can you check if it is so? – netaholic Sep 23 '15 at 15:43
Relative, Left, and Right all give the same result - the application menu is to the left of the application button, but they share an edge. Bottom also goes off to the left, but the application menu is positioned such that the application button is in the menu's top-right corner. – Amelamise Sep 23 '15 at 15:56
Well, thats very weitd. Can you share a project? – netaholic Sep 23 '15 at 16:01
@Amelamise I've run your project without any edits on 2 PCs, one with single monitor and one with duo-monitors, and there were no issues, no matter where I've placed the window – netaholic Sep 23 '15 at 16:55
Strange. I wonder what the difference is. Regardless, thanks for all the testing! – Amelamise Sep 23 '15 at 17:14
Adding this line to @netaholic 's fix worked for me: `` Maybe you need to increase those values to match your exact situation. – Double_A Mar 30 '23 at 08:03

How to prevent the ribbon's application menu from opening outside the window?

1 Answers1