0

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

enter image description here

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?

Sonhja
  • 8,230
  • 20
  • 73
  • 131
  • i'm not sure i understand what you want it to look like can you post a mock-up adjusted photpshop-ed image? – Rachel Gallen Jan 22 '13 at 17:58
  • Sorry Rachel, wasn't at work. That second article is more useful for my case. I edited what I want exactly to get. – Sonhja Jan 23 '13 at 08:19
  • It's part of an answer. I still don't know how to make the hover event. Could you make any suggestion? – Sonhja Jan 23 '13 at 09:02
  • or look at ths link http://stackoverflow.com/questions/2388429/how-to-set-mouseover-event-trigger-for-border-in-xaml or this http://social.msdn.microsoft.com/Forums/en/wpf/thread/052b5170-c3f9-49ea-b8e6-0bea4c3f9b82 – Rachel Gallen Jan 23 '13 at 09:07
  • Ok, that seems to be what I was looking for. If you post your answer, I will vote it ;) – Sonhja Jan 23 '13 at 09:47

1 Answers1

2

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

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81