Custom Style/Template question

[Patpop01]

Hi all,

This is my first post here, since I am just starting out WPF.
I wanted to create my own custom style menu but I ran into a few problems.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:sys="clr-namespace:System;assembly=mscorlib" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Page.Resources>
        <Style x:Key="InformMenu" TargetType="{x:Type MenuItem}">
            <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <!--Apply the background and set the BorderColor, Thickness and Radius -->
                        <Border x:Name="Border" Background="LightGray" BorderBrush="Black" BorderThickness="1" CornerRadius="3">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
                                <ColumnDefinition x:Name="Col3" Width="14"/>
                            </Grid.ColumnDefinitions>


                                <!-- Content for the menu text etc -->
                                <ContentPresenter Grid.Column="1"
                                          Margin="{TemplateBinding Padding}"
                                          x:Name="HeaderHost"
                                          RecognizesAccessKey="True"
                                          ContentSource="Header"/>

                                <!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
                                <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Top" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                                    <Border x:Name="SubMenuBorder" Background="Transparent" CornerRadius="0" BorderBrush="Transparent" BorderThickness="0" Padding="0,0,0,0">
                                        <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="true">
                                            <!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
                                        </Grid>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>

                        <!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
                        <ControlTemplate.Triggers>
                            <!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
                            <!-- TopLevel Menu Item with PopUp -->
                            <Trigger Property="Role" Value="TopLevelHeader">
                                <Setter Property="Padding" Value="5,0,5,0"/>
                                <!-- Set the placement value to orient popup direction -->
                                <Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
                                <Setter Property="MinWidth" Value="0" TargetName="Col0"/>
                                <Setter Property="Width" Value="40" TargetName="Col3"/>
                            </Trigger>

                            <!-- Role = TopLevelItem :  this is a child menu item from the top level without any child items-->
                            <!-- TopLevel Menu Item with no PopUp (empty) -->
                            <Trigger Property="Role" Value="TopLevelItem">
                                <Setter Property="Padding" Value="5,0,5,0"/>
                            </Trigger>

                            <!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
                            <Trigger Property="Role" Value="SubmenuHeader">
                                <Setter Property="DockPanel.Dock" Value="Top"/>
                                <Setter Property="Padding" Value="0,2,0,2"/>
                            </Trigger>

                            <!-- Role = SubMenuItem : this is a child menu item which has children-->
                            <Trigger Property="Role" Value="SubmenuItem">
                                <Setter Property="DockPanel.Dock" Value="TOP"/>
                                <Setter Property="Padding" Value="0,2,0,2"/>
                            </Trigger>

                            <!-- Using the system colors for the Menu Highlight and IsEnabled-->
                            <Trigger Property="IsHighlighted" Value="true">
                                <!-- Set the MenuItem background Color when Mouse Hoover -->
                                <Setter Property="Background" Value="Darkgray" TargetName="Border"/>
                                <!-- Set the MenuItem text Color when Mouse Hoover -->
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Page.Resources>

    <StackPanel HorizontalAlignment="Center">
        <Menu>

            <MenuItem Style="{StaticResource InformMenu}" Header="_File" >
                <MenuItem Style="{StaticResource InformMenu}" Header="_New..." />
                <MenuItem Style="{StaticResource InformMenu}" Header="_Open..." />
                <MenuItem Style="{StaticResource InformMenu}" Header="_Save" />
                <MenuItem Style="{StaticResource InformMenu}" Header="_Save As..." />
                <MenuItem Style="{StaticResource InformMenu}" Header="_Exit" />
            </MenuItem>
        </Menu>
    </StackPanel>

</Page>

When I take a look at this in the XAMP editor (VS) I see nice rounded menu items.



But when I run the program I get a black square behind them, as shown in the next picture.



Any ideas on how to fix this?

I also noticed there is a slight shift between, in my example the File item and the popup. Can I get rid of this?
Is there also a way to have the submenu items borders overlap? So I get a one pixel separation instead of the two rounded borders now touching eachother and thus giving me 2 pixels?

Hope I made myself clear, since English is not my native language,
Thanks