Enable highlighting of MenuItem outside of ContentPresenter

Question

I've been at it for a while and it's driving me crazy. Here's my problem... I have a Menu and it uses the default template in which I've altered colors upon highlighting, default state, etc. So, there's no point posting it here -- it's virtually exact same thing (and it's a lot of template code).

What my problem is the spacing between the MenuItems created by the template's Marginproperty. It is template-binded with the padding property and produces a (2, 3, 2, 3) margin all around the ContentPresenter of the template.

I want to keep that property and need it to separate the items; however, mousing over only activates highlighted state when the mouse is over the ContentPresenter and nothing else. So, the "button" feel won't actuate until I mouse over the words themselves. ContentPresenter does not have padding, so I'm not sure how to deal with it. I tried editing the triggers that came with the template to work on other parts, but it doesn't work (they don't fire off).

The triggers that come with the template only work with the ContentPresenter. I tried wrapping it in ContentControl to see if I can gain Padding, but the binding for Padding doesn't work, only for margin... not sure why (it shows up in the Properties, but the addition of padding is not visible):

<ContentControl SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                Padding="{TemplateBinding Padding}">
    <ContentPresenter ContentSource="Header" RecognizesAccessKey="True"/>
</ContentControl>

I also tried replacing ContentPresenter with ContentControl altogether, but once again suffered from Padding not binding properly and manual Padding didn't do anything either. Something is overwriting it, perhaps.

Any idea how I can actuate triggers in the empty space between those MenuItems? The way I've been dealing with it is by adding whitespace into my MenuItem headers... and that's just absurd.

Here's my template:

<LinearGradientBrush x:Key="MenuItemSelectionFill" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#34C5EBFF" Offset="0"/>
    <GradientStop Color="#3481D8FF" Offset="1"/>
</LinearGradientBrush>

<Geometry x:Key="Checkmark">M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z</Geometry>

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
    <Grid SnapsToDevicePixels="true" Background="#FFEFF6FB" HorizontalAlignment="Stretch">
        <Rectangle x:Name="Bg"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                <ColumnDefinition Width="4"/>
                <ColumnDefinition/>
                <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                <ColumnDefinition Width="17"/>
            </Grid.ColumnDefinitions>
            <!--<ContentPresenter x:Name="Icon" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="1,12" ContentSource="Icon" Height="0"/>
            <Border x:Name="GlyphPanel" Width="Auto" Visibility="Hidden" Margin="1" Height="Auto" CornerRadius="3" Background="#FFEFF6FB" BorderThickness="1" BorderBrush="#FFEFF6FB">
                <Path x:Name="Glyph" Width="9" Height="11" FlowDirection="LeftToRight" Fill="#0C12A1" Data="{StaticResource Checkmark}"/>
            </Border>-->
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Margin="{TemplateBinding Padding}" ContentSource="Header" Grid.Column="2"/>
            <TextBlock Grid.Column="3" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}"/>
        </Grid>
    </Grid>

    <ControlTemplate.Triggers>
        <!--<Trigger Property="Icon" Value="{x:Null}">
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>-->
        <!--<Trigger Property="IsChecked" Value="true">
            <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>-->
        <Trigger Property="IsHighlighted" Value="true">
            <Setter Property="Fill" TargetName="Bg" Value="#FFC0E5FF"/>
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#FF9A9A9A"/>
            <!--<Setter Property="Background" TargetName="GlyphPanel" Value="#EEE9E9"/>
            <Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#DBD6D6"/>
            <Setter Property="Fill" TargetName="Glyph" Value="#848589"/>-->
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<LinearGradientBrush x:Key="MenuItemPressedFill" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#28717070" Offset="0"/>
    <GradientStop Color="#50717070" Offset="0.75"/>
    <GradientStop Color="#90717070" Offset="1"/>
</LinearGradientBrush>

<SolidColorBrush x:Key="SubMenuBackgroundBrush" Color="#FFEFF6FB"/>

<Geometry x:Key="UpArrow">M 0,4 L 3.5,0 L 7,4 Z</Geometry>

<Style x:Key="MenuScrollButton" BasedOn="{x:Null}" TargetType="{x:Type RepeatButton}">
    <Setter Property="ClickMode" Value="Hover"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <DockPanel Background="Transparent" SnapsToDevicePixels="true">
                    <Rectangle x:Name="R1" Width="1" Fill="Transparent" DockPanel.Dock="Right"/>
                    <Rectangle x:Name="B1" Height="1" Fill="Transparent" DockPanel.Dock="Bottom"/>
                    <Rectangle x:Name="L1" Width="1" Fill="Transparent" DockPanel.Dock="Left"/>
                    <Rectangle x:Name="T1" Height="1" Fill="Transparent" DockPanel.Dock="Top"/>
                    <ContentPresenter x:Name="ContentContainer" VerticalAlignment="Center" Margin="2,2,2,2" HorizontalAlignment="Center"/>
                </DockPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Fill" TargetName="R1" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
                        <Setter Property="Fill" TargetName="B1" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
                        <Setter Property="Fill" TargetName="L1" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"/>
                        <Setter Property="Fill" TargetName="T1" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"/>
                        <Setter Property="Margin" TargetName="ContentContainer" Value="3,3,1,1"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<MenuScrollingVisibilityConverter x:Key="MenuScrollingVisibilityConverter"/>

<Geometry x:Key="DownArrow">M 0,0 L 3.5,4 L 7,0 Z</Geometry>

<Style x:Key="{ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}" BasedOn="{x:Null}" TargetType="{x:Type ScrollViewer}">
    <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid SnapsToDevicePixels="true">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Grid.Row="1">
                        <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}"/>
                    </Border>
                    <RepeatButton Style="{StaticResource MenuScrollButton}" Grid.Row="0" Focusable="false" Command="{x:Static ScrollBar.LineUpCommand}" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="0">
                        <RepeatButton.Visibility>
                            <MultiBinding FallbackValue="Visibility.Collapsed" Converter="{StaticResource MenuScrollingVisibilityConverter}" ConverterParameter="0">
                                <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>
                                <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>
                                <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                                <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                            </MultiBinding>
                        </RepeatButton.Visibility>
                        <Path Data="{StaticResource UpArrow}" Fill="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
                    </RepeatButton>
                    <RepeatButton Style="{StaticResource MenuScrollButton}" Grid.Row="2" Focusable="false" Command="{x:Static ScrollBar.LineDownCommand}" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="0">
                        <RepeatButton.Visibility>
                            <MultiBinding FallbackValue="Visibility.Collapsed" Converter="{StaticResource MenuScrollingVisibilityConverter}" ConverterParameter="100">
                                <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>
                                <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>
                                <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                                <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                            </MultiBinding>
                        </RepeatButton.Visibility>
                        <Path Data="{StaticResource DownArrow}" Fill="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
                    </RepeatButton>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
    <Grid SnapsToDevicePixels="true">
        <Rectangle x:Name="OuterBorder"/>
        <Rectangle x:Name="Bg"/>
        <DockPanel>
            <!--<ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
            <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="0" Visibility="Collapsed" VerticalAlignment="Center"/>-->
            <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="0,1"/>
        </DockPanel>
        <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="0" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="0">
            <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
                <Border x:Name="SubMenuBorder" Background="{StaticResource SubMenuBackgroundBrush}">
                    <ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                        <Grid RenderOptions.ClearTypeHint="Enabled">
                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                <Rectangle x:Name="OpaqueRect" Fill="{StaticResource SubMenuBackgroundBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                            </Canvas>
                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                        </Grid>
                    </ScrollViewer>
                </Border>
            </Themes:SystemDropShadowChrome>
        </Popup>
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsSuspendingPopupAnimation" Value="true">
            <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
        </Trigger>
        <!--<Trigger Property="Icon" Value="{x:Null}">
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>-->
        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
            <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
            <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
        </Trigger>
        <Trigger Property="IsHighlighted" Value="true">
            <Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
            <Setter Property="Foreground" Value="Black"/>
            <!--<Setter Property="Stroke" TargetName="Bg" Value="#90717070"/>-->
            <!--<Setter Property="Stroke" TargetName="OuterBorder" Value="#50FFFFFF"/>-->
            <!--<Setter Property="Stroke" TargetName="InnerBorder" Value="#50FFFFFF"/>-->
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="true">
            <!--<Setter Property="Stroke" TargetName="Bg" Value="#E0717070"/>-->
            <Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
            <Setter Property="Foreground" Value="Black"/>
            <!--<Setter Property="Stroke" TargetName="InnerBorder" Value="#50747272"/>-->
        </Trigger>
        <Trigger Property="IsSubmenuOpen" Value="true">
            <Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Fill" TargetName="OuterBorder" Value="{x:Null}"/>
            <Setter Property="Stroke" TargetName="OuterBorder" Value="{x:Null}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#FF9A9A9A"/>
            <!--<Setter Property="Fill" TargetName="GlyphPanel" Value="#848589"/>-->
        </Trigger>
        <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false">
            <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
            <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
    <Grid SnapsToDevicePixels="true">
        <Rectangle x:Name="Bg"/>
        <DockPanel>
            <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
            <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/>
            <ContentPresenter ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        </DockPanel>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="Icon" Value="{x:Null}">
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsHighlighted" Value="true">
            <Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="true">
            <Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
            <Setter Property="Foreground" Value="Black"/>
            <!--<Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuItemPressedFill}"/>-->
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#FF9A9A9A"/>
            <Setter Property="Fill" TargetName="GlyphPanel" Value="#848589"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Geometry x:Key="RightArrow">M 0,0 L 4,3.5 L 0,7 Z</Geometry>

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
    <Grid SnapsToDevicePixels="true">
        <Rectangle x:Name="Bg"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                <ColumnDefinition Width="4"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="37"/>
                <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                <ColumnDefinition Width="17"/>
            </Grid.ColumnDefinitions>
            <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
            <Border x:Name="GlyphPanel" BorderBrush="#CDD3E6" BorderThickness="1" Background="#E6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
                <Path x:Name="Glyph" Data="{StaticResource Checkmark}" Fill="#0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
            </Border>
            <ContentPresenter Grid.Column="2" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            <TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}" Visibility="Collapsed"/>
            <Path Grid.Column="5" Data="{StaticResource RightArrow}" Fill="{TemplateBinding Foreground}" Margin="4,0,0,0" VerticalAlignment="Center"/>
        </Grid>
        <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3">
            <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
                <Border x:Name="SubMenuBorder">
                    <ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                        <Grid RenderOptions.ClearTypeHint="Enabled">
                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                <Rectangle x:Name="OpaqueRect" Fill="{StaticResource SubMenuBackgroundBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                            </Canvas>
                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                        </Grid>
                    </ScrollViewer>
                </Border>
            </Themes:SystemDropShadowChrome>
        </Popup>
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsSuspendingPopupAnimation" Value="true">
            <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
        </Trigger>
        <Trigger Property="IsHighlighted" Value="true">
            <Setter Property="Fill" TargetName="Bg" Value="#FFEFF6FB"/>
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>
        <Trigger Property="Icon" Value="{x:Null}">
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
            <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
            <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#FF9A9A9A"/>
            <Setter Property="Background" TargetName="GlyphPanel" Value="#EEE9E9"/>
            <Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#DBD6D6"/>
            <Setter Property="Fill" TargetName="Glyph" Value="#848589"/>
        </Trigger>
        <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false">
            <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
            <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Answer 1

The problem is in the MenuItem template with the ResourceID TopLevelItemTemplateKey.

Note that in this template no background is set for the transparent areas of the menu item. Technically speaking, the background in these areas is not transparent, it is null - not setting a background will for many UI elements let the mouse hit test fail in regions without content (hit-testing is not done pixel-by-pixel but rather by specific UIElement.InputHitTest method implementations).

Setting the background explicitly to "Transparent" on the outermost UI element in your template will fix this issue:

<ControlTemplate
    x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey,
           TypeInTargetAssembly={x:Type MenuItem}}"
    TargetType="{x:Type MenuItem}"
>

    <!-- ### FIX: SETTING THE GRID BACKGROUND TO "TRANSPARENT" ### -->

    <Grid Background="Transparent" SnapsToDevicePixels="true">
        <Rectangle x:Name="Bg"/>
        ...
    </Grid>
</ControlTemplate>

(If you want to know more about hit testing in WPF, read here in the MSDN documentation.)