Problems with styled context menuitem

Question

I have code (below) that should produce a styled context menu. Unfortunately the menu item also shows a "white" bit that shouldn't be there (see below). I have tried styling it out but it doesn't work. Any help would be appreciated

    <Style TargetType="ContextMenu">
        <Setter Property="Background" Value="{StaticResource backgroundDark}" />
        <Setter Property="BorderBrush" Value="{StaticResource highlight}" />
        <Style.Resources>
            <Style TargetType="MenuItem">
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="Transparent" />
                <Style.Triggers>
                    <Trigger Property="IsHighlighted" Value="True">
                        <Setter Property="Foreground" Value="{StaticResource highlightLight}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Style.Resources>
    </Style>

Answer 1

you will want to override the

StackPanel Margin of MenuItems

and then override with the same value the ItemsPanel

so basically you can just add 2 simple styles in addition to your style.

I have added a sample:

<Grid>
    <Grid.Resources>
        <ItemsPanelTemplate x:Key="GlobalMenuItemPanelTemplate">
            <StackPanel Margin="-25,0,0,0" Background="White"/>
        </ItemsPanelTemplate>
        <Style TargetType="{x:Type ContextMenu}">
            <Setter Property="ItemsPanel" Value="{StaticResource GlobalMenuItemPanelTemplate}"/>
        </Style>
    </Grid.Resources>
    <Label Background="Bisque" Content="Right Click it" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Label.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Menu item 1" />
                <MenuItem Header="Menu item 2" />
                <Separator />
                <MenuItem Header="Menu item 3" />
            </ContextMenu>
        </Label.ContextMenu>
    </Label>
</Grid>