Using MouseEnter/MouseLeave events with ContextMenus

Question

I have a ContextMenu on a Button that I'd like to open on a MouseEnter event, instead of on the default right-click event. Here's my XAML:

<Button Content="Button" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave">
    <Button.ContextMenu>
        <ContextMenu>
            .... context menu items ....
        </ContextMenu>
    </Button.ContextMenu>
</Button>

And the associated event handlers:

private void Button_MouseEnter(object sender, MouseEventArgs e)
{  
    backButtonContextMenu.Placement = PlacementMode.Bottom;
    backButtonContextMenu.IsOpen = true;
    Console.WriteLine("MouseEnter called");
}

private void Button_MouseLeave(object sender, MouseEventArgs e)
{  
    backButtonContextMenu.IsOpen = false;
    Console.WriteLine("MouseLeave called");
}

Pretty straight forward. Unfortunately, while hovering over the button, these two methods get called infinitely, alternating back and forth. Here's an example of the output in my console:

MouseEnter called
MouseLeave called
MouseEnter called
MouseLeave called
MouseEnter called
MouseLeave called
MouseEnter called
MouseLeave called
  ... etc. ...

I'm assuming this has something to do with the ContextMenu stealing the focus when it's open, or perhaps laying down some kind of invisible "helper" backdrop to detect when it needs to be closed. Does anyone have an explanation for this behavior, and is there a way to avoid it? It's a pretty simple effect, from a UI standpoint.

Answer 1

it's going into a cycle cos when the ContextMenu is invoked the Button looses mouse over which then closes the ContextMenu and now the mouse over again returns to the Button and you got your loop.

you could just go:

private void Button_MouseLeave(object sender, MouseEventArgs e) {
  if (backButtonContextMenu.IsMouseOver)
    return;
  backButtonContextMenu.IsOpen = false;
  Debug.WriteLine("MouseLeave called");
}

however now you got the issue of having to close the menu at another moment.

In such cases when I'd need a menu like a ContextMenu but not in it's default behavior, I'd tend to go for a Popup.

say the same thing with a Popup:

<StackPanel>
  <Button x:Name="button"
          Content="Button" />
  <Button x:Name="button2"
          Content="Button 2" />
  <Popup Placement="Right"
          PlacementTarget="{Binding ElementName=button}">
    <Menu>
      <MenuItem Header="AAA" />
    </Menu>
    <Popup.Style>
      <Style TargetType="{x:Type Popup}">
        <Setter Property="IsOpen"
                Value="True" />
        <Style.Triggers>
          <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
              <Condition Binding="{Binding RelativeSource={RelativeSource Self},
                                            Path=PlacementTarget.IsMouseOver}"
                          Value="False" />
              <Condition Binding="{Binding RelativeSource={RelativeSource Self},
                                            Path=IsMouseOver}"
                          Value="False" />
            </MultiDataTrigger.Conditions>
            <Setter Property="IsOpen"
                    Value="False" />
          </MultiDataTrigger>
        </Style.Triggers>
      </Style>
    </Popup.Style>
  </Popup>
</StackPanel>

You can ofc tweak it's conditions to what you need.