How to remove the "button" effect for a menu item (WPF)

Question

Hi,

When the mouse is over a menu item (first level) it displays a 3D button effect. How can this be removed?

Thanks.

---

EDIT:

Tried

<Style TargetType="MenuItem">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="Transparent">
            <Setter Property="BorderThickness" Value="0">
        </Trigger>
    </Style.Triggers>
</Style>

with no effect.

The menu XAML:

<Window x:Class="UCWPF.Window3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:conv="clr-namespace:UCWPF.Converters"
    Title="Window3" Height="600" Width="600"
    Background="{StaticResource WindowBackgroundBrush}"
    >

<StackPanel Style="{StaticResource WindowContainerStyle}">
    <Menu>
        <MenuItem Header="New" Icon="{StaticResource ImageNew}" />
        <MenuItem Header="Open" Icon="{StaticResource ImageOpen}" />
        <MenuItem Header="Save" Icon="{StaticResource ImageSave}" />
        <MenuItem Header="Export" Icon="{StaticResource ImageExport}" />
    </Menu>
...

And here's the screenshot:

---

EDIT 2:

With great power comes great ... complexity :(.

It looks like the whole menu template should be redefined to achieve my purpose. The 3D effect is given by a MenuItem child border (identified with Snoop) which, on mouse over, sets its BorderStyle to raised. I don't know if that border style can be touched inside the <Style TargetType="MenuItem"> element, any feedback would be greatly appreciated.

Answer 1

<Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Style.Triggers>
  <Trigger Property="Role" Value="TopLevelHeader">
    <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}"/>
    <Setter Property="Grid.IsSharedSizeScope" Value="true"/>
  </Trigger>
</Style.Triggers>

  <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
<Border Name="Border" >
  <Grid>
    <ContentPresenter
      Margin="6,3,6,3"
      ContentSource="Header"
      RecognizesAccessKey="True" />
    <Popup
      Name="Popup"
      Placement="Bottom"
      IsOpen="{TemplateBinding IsSubmenuOpen}"
      AllowsTransparency="True"
      Focusable="False"
      PopupAnimation="Fade">
      <Border
        Name="SubmenuBorder"
        SnapsToDevicePixels="True"
        Background="{DynamicResource NormalBrush}"
        BorderBrush="{StaticResource SolidBorderBrush}"
        BorderThickness="1" >
        <ScrollViewer CanContentScroll="True"
          Style="{StaticResource MenuScrollViewer}">
          <StackPanel
          IsItemsHost="True"
          KeyboardNavigation.DirectionalNavigation="Cycle" />
        </ScrollViewer>
      </Border>
    </Popup>
  </Grid>
</Border>
<ControlTemplate.Triggers>
  <Trigger Property="IsSuspendingPopupAnimation" Value="true">
    <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
  </Trigger>
  <Trigger Property="IsHighlighted" Value="true">
    <Setter TargetName="Border" Property="Background" Value="{StaticResource NormalBrush}"/>
    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
  </Trigger>
  <!--Snippettoplevelheader-->
  <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
    <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
    <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
  </Trigger>
  <!--/Snippettoplevelheader-->
  <Trigger Property="IsEnabled" Value="False">
    <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
  </Trigger>
</ControlTemplate.Triggers>

The trigger IsHighlighted defines the style when the mouse is over, if you remove the trigger, nothing is displayed when the mouse is moved over the top menu

See http://msdn.microsoft.com/en-us/library/ms771597%28VS.85%29.aspx for more control styling examples