How to remove border from menuitem? - wpf

Question

I have created code using mutil menuitem, but I can not remove the border.
.
How can I remove the menuitem border WPF?
Code MainWindow.xaml below
<Window x:Class="TestMutilColumnMenu.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestMutilColumnMenu"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="MenuItem1" TargetType="{x:Type MenuItem}">
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="Margin" Value="1,1,1,1"/>
</Style>
</Window.Resources>
<Menu>
<MenuItem x:Name="tesst" Header="nane" >
<MenuItem.ItemsPanel>
<ItemsPanelTemplate>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</MenuItem.ItemsPanel>
<MenuItem Grid.Row="0" Grid.Column="0" Header="Item 1" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="1" Grid.Column="0" Header="Item 2" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="2" Grid.Column="0" Header="Item 3" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="3" Grid.Column="0" Header="Item 4" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="0" Grid.Column="1" Header="Item 5" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="1" Grid.Column="1" Header="Item 6" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="2" Grid.Column="1" Header="Item 7" Style="{StaticResource MenuItem1}">
<MenuItem.Icon>
<Image Source="/res/Image.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Grid.Row="3" Grid.Column="1" Header="Item 8" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="0" Grid.Column="2" Header="Item 9" Style="{StaticResource MenuItem1}"></MenuItem>
<MenuItem Grid.Row="1" Grid.Column="2" Header="Item 10" Style="{StaticResource MenuItem1}"></MenuItem>
</MenuItem>
</Menu>
</Window>

Answer 1

Define a custom ControlTemplate for the root MenuItem. This is the default one except for the Width of the Rectange which I have changed from 1 to 0:
<MenuItem x:Name="tesst" Header="nane" >
<MenuItem.Template>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" SnapsToDevicePixels="true"
BorderThickness="{TemplateBinding Control.BorderThickness}"
Background="{TemplateBinding Control.Background}"
BorderBrush="{TemplateBinding Control.BorderBrush}">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" ContentSource="Icon"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="Center"
HorizontalAlignment="Center" Width="16" Height="16" Margin="3"/>
<Path x:Name="GlyphPanel" Data="M 0,0 L 4,3.5 L 0,7 Z" FlowDirection="LeftToRight" Margin="3"
Visibility="Collapsed" VerticalAlignment="Center" Fill="{TemplateBinding Control.Foreground}"/>
<ContentPresenter Grid.Column="1" ContentSource="Header" RecognizesAccessKey="true"
Margin="{TemplateBinding Control.Padding}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
Placement="Bottom"
IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
PlacementTarget="{Binding ElementName=templateRoot}">
<Border x:Name="SubMenuBorder" Background="#FFF0F0F0" BorderBrush="#FF999999" BorderThickness="1" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Height="0" Width="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Name="OpaqueRect" Height="{Binding ElementName=SubMenuBorder, Path=ActualHeight}"
Width="{Binding ElementName=SubMenuBorder, Path=ActualWidth}"
Fill="{Binding ElementName=SubMenuBorder, Path=Background}"/>
</Canvas>
<Rectangle HorizontalAlignment="Left" Width="0" Margin="29,2,0,2" Fill="#FFD7D7D7"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle"
KeyboardNavigation.TabNavigation="Cycle" Grid.IsSharedSizeScope="true"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="MenuItem.IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="PART_Popup" Property="Popup.PopupAnimation" Value="None"/>
</Trigger>
<Trigger Value="{x:Null}" Property="MenuItem.Icon">
<Setter TargetName="Icon" Property="UIElement.Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="MenuItem.IsChecked" Value="true">
<Setter TargetName="GlyphPanel" Property="UIElement.Visibility" Value="Visible"/>
<Setter TargetName="Icon" Property="UIElement.Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="MenuItem.IsHighlighted" Value="true">
<Setter TargetName="templateRoot" Value="#3D26A0DA" Property="Border.Background"/>
<Setter TargetName="templateRoot" Value="#FF26A0DA" Property="Border.BorderBrush"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="false">
<Setter TargetName="templateRoot" Value="#FF707070" Property="TextElement.Foreground"/>
<Setter TargetName="GlyphPanel" Value="#FF707070" Property="Shape.Fill"/>
</Trigger>
<Trigger SourceName="SubMenuScrollViewer" Property="ScrollViewer.CanContentScroll" Value="false">
<Setter TargetName="OpaqueRect" Value="{Binding ElementName=SubMenuScrollViewer, Path=VerticalOffset}" Property="Canvas.Top"/>
<Setter TargetName="OpaqueRect" Value="{Binding ElementName=SubMenuScrollViewer, Path=HorizontalOffset}" Property="Canvas.Left"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</MenuItem.Template>
<MenuItem.ItemsPanel>
...