Styled MenuItem on WPF

Question

I'm developing a menu on WPF. I have this menu til now:

When the menu is hovered, it looks like Users menuItem. This is the code behind:

 <Menu Grid.Column="0" Name="menuNavigation" >
            <MenuItem Header="Users" >
                <MenuItem Header="Register user">
                    <MenuItem ToolTip="Register new user on database." />
                </MenuItem>
                <MenuItem Header="Admin users">
                    <MenuItem ToolTip="Update or delete a user." />
                </MenuItem>
            </MenuItem>
            <MenuItem Header="Identify">
                <MenuItem ToolTip="Start an identification." />
            </MenuItem>
            <MenuItem Header="Authenticate">
                <MenuItem ToolTip="Start an authentication." />
            </MenuItem>
            <MenuItem Header="Cameras">
                <MenuItem ToolTip="Manage connected cameras." />
            </MenuItem>
        </Menu>

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.

Can anybody give me an idea on how to start with this?

EDIT: I could access the IsMouseOver event, but it seems to ignore me. I have this styling now:

    <!-- Menu navigation properties -->
<Style TargetType="Menu">
    <Setter Property="Background" Value="{DynamicResource TopMenuGradient}" />
    <Setter Property="HorizontalAlignment" Value="Right" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontFamily" Value="Calibri" />
    <Setter Property="FontSize" Value="18" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Height" Value="50" />
</Style>
<!-- MenuItem Style -->
<Style TargetType="MenuItem">
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Height" Value="50" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True" >
            <Setter Property="Foreground" Value="LightGray" />
            <Setter Property="Background" Value="White" />
        </Trigger>
    </Style.Triggers>
</Style>

I could remove the light blue border, but I want to change the Background property, but the MenuItem style seems to ignore me... partly. I mean: Foreground works... but not the Background! What's wrong?

Answer 1

this is s helpful link from codeproject. Regarding the hover, a WPF Grid control supports both the MouseEnter and MouseLeave events. You should be able to hook up event handlers for both.

Also look at this