WPF ribbon application menu placement wrong

Question

I have a WPF application which uses the Ribbon controls from Microsoft's System.Windows.Controls.Ribbon assembly. The application menu is rendering correctly on most of our machines, but on a Surface Pro the menu items are being positioned poorly. I would like to know why the Surface Pro is exhibiting different behavior, and what other steps I could try.

First, here is some simple XAML which can be used to reproduce the problem (but only on the Surface Pro):

<RibbonWindow x:Class="RibbonMenuTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <Ribbon DockPanel.Dock="Top" UseLayoutRounding="True" Background="#98C1F6" >
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu>
                    <RibbonApplicationMenuItem Header="Menu item 1">
                        <RibbonApplicationMenuItem Header="Menu item 1.1" />
                        <RibbonApplicationMenuItem Header="Menu item 1.2" />
                    </RibbonApplicationMenuItem>
                    <RibbonApplicationMenuItem Header="Menu item 2">
                        <RibbonApplicationMenuItem Header="Menu item 2.1" />
                        <RibbonApplicationMenuItem Header="Menu item 2.2" />
                    </RibbonApplicationMenuItem>
                    <RibbonApplicationMenuItem Header="Menu item 3" />
                    <RibbonApplicationMenuItem Header="Menu item 4" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
        </Ribbon>

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Main content area" />
    </DockPanel>
</RibbonWindow>

Everything renders just fine on our Windows 10 desktop machines:

But menus are positioned strangely on the Surface Pro (also running Windows 10):

At first I tried to reproduce the problem on my development machine by changing the DPI setting of my display (100% => 150%) to match the Surface. This did not work; the application still functioned normally.

Next, I tried overriding the placement of menu popups using a custom Style:

<RibbonApplicationMenuItem.Resources>
    <Style TargetType="Popup">
        <Setter Property="Placement" Value="Right" />
    </Style>
</RibbonApplicationMenuItem.Resources>

On the Surface, the menu appears to ignore the Placement property entirely. Using the same style I can adjust the HorizontalOffset and VerticalOffset properties, but it seems to ignore any changes I try to make to the PlacementTarget. I tried positioning the popups relative to the top-level window, but it seems to ignore my preferred placement target and always use the parent menu item.

Has anyone run into this issue before? And hopefully know how to work around it?

Answer 1

This is due to the handedness settings on the Pen options. (see this tutorial for the exact settings.)

In order to ignore/override the handedness settings, check this question: WPF Handedness with Popups .

Update: handeness settings for non tablets the configuration was moved check this link