title: Styled MenuItem on WPF
body: <p>I'm developing a menu on WPF. I have this menu til now:</p>
  
  <p><img src="https://i.stack.imgur.com/1AJBF.png" alt="enter image description here"></p>
  
  <p>When the menu is hovered, it looks like <code>Users</code> menuItem. This is the code behind:</p>
  
  <pre><code> &lt;Menu Grid.Column="0" Name="menuNavigation" &gt;
              &lt;MenuItem Header="Users" &gt;
                  &lt;MenuItem Header="Register user"&gt;
                      &lt;MenuItem ToolTip="Register new user on database." /&gt;
                  &lt;/MenuItem&gt;
                  &lt;MenuItem Header="Admin users"&gt;
                      &lt;MenuItem ToolTip="Update or delete a user." /&gt;
                  &lt;/MenuItem&gt;
              &lt;/MenuItem&gt;
              &lt;MenuItem Header="Identify"&gt;
                  &lt;MenuItem ToolTip="Start an identification." /&gt;
              &lt;/MenuItem&gt;
              &lt;MenuItem Header="Authenticate"&gt;
                  &lt;MenuItem ToolTip="Start an authentication." /&gt;
              &lt;/MenuItem&gt;
              &lt;MenuItem Header="Cameras"&gt;
                  &lt;MenuItem ToolTip="Manage connected cameras." /&gt;
              &lt;/MenuItem&gt;
          &lt;/Menu&gt;
  </code></pre>
  
  <p>I want that light blue border to disappear, and I was trying to simulate a special effect. When I hover it, I want a kind of white parenthesis surrounding the word, like emphasizing it. </p>
  
  <p>Can anybody give me an idea on how to start with this?</p>
  
  <p><strong>EDIT:</strong>
  I could access the <code>IsMouseOver</code> event, but it seems to ignore me. I have this styling now:</p>
  
  <pre><code>    &lt;!-- Menu navigation properties --&gt;
  &lt;Style TargetType="Menu"&gt;
      &lt;Setter Property="Background" Value="{DynamicResource TopMenuGradient}" /&gt;
      &lt;Setter Property="HorizontalAlignment" Value="Right" /&gt;
      &lt;Setter Property="Foreground" Value="White" /&gt;
      &lt;Setter Property="FontFamily" Value="Calibri" /&gt;
      &lt;Setter Property="FontSize" Value="18" /&gt;
      &lt;Setter Property="FontWeight" Value="Bold" /&gt;
      &lt;Setter Property="Height" Value="50" /&gt;
  &lt;/Style&gt;
  &lt;!-- MenuItem Style --&gt;
  &lt;Style TargetType="MenuItem"&gt;
      &lt;Setter Property="BorderThickness" Value="0" /&gt;
      &lt;Setter Property="Height" Value="50" /&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True" &gt;
              &lt;Setter Property="Foreground" Value="LightGray" /&gt;
              &lt;Setter Property="Background" Value="White" /&gt;
          &lt;/Trigger&gt;
      &lt;/Style.Triggers&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>I could remove the light blue border, but I want to change the <code>Background</code> property, but the <code>MenuItem</code> style seems to ignore me... partly. I mean: <code>Foreground</code> works... but not the <code>Background</code>! What's wrong?</p>