WPF Menuitem Border

Question

I've run into a problem trying to implement a Menu and can't figure out what is going on. I'm trying to make a single-layer menu using the Menu control. Here is my menu code:

<Menu DockPanel.Dock="Top" Height="22" Name="menu1" VerticalAlignment="Top" Background="#FF325170">
    <MenuItem Header="Featured" Style="{StaticResource menuItemStyle}" />
    <MenuItem Header="Search" Style="{StaticResource menuItemStyle}" />
</Menu>

And my style for my MenuItems is as follows:

<Style x:Key="menuItemStyle" TargetType="{x:Type MenuItem}">
  <Style.Triggers>
    <Trigger Property="MenuItem.IsMouseOver" Value="true">
      <Setter Property = "Foreground" Value="Red"/>
    </Trigger>
  </Style.Triggers>
</Style>

When I mouseover the menu items, there is a Border that appears, and I can't figure out for the life of me how to remove this border. Any suggestions?

Answer 1

For a lot of the built-in WPF control styles, you need to override the ControlTemplate.

Here is the MSDN page that provides the Menu ControlTemplate, with instructions on how to use it -- basically you are inserting local copies of all the styles for the Menu control, which then override the default control look and feel.

To address your problem you should be able to just insert this style:

<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
  <Setter Property="OverridesDefaultStyle" Value="True"/>
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Menu}">
        <!--Here is where you change the border thickness to zero on the menu-->
        <Border BorderThickness="0">
          <StackPanel ClipToBounds="True" Orientation="Horizontal"
                      IsItemsHost="True"/>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>