How do I place contextMenu under button in this code? - wpf

Question

I would like to get buttons like in AX, where some buttons only open a menu with more menu items underneath. I have found the code below and it works fine. But when I left-click on the button, it shows the context menu where the mouse pointer is. When I right-click on the button, it shows the context menu exactly under the button nicely. I would like the left-click to work like the right-click.
The problem is that ContextMenuService.Placement="Bottom" is only working when I right-click.
<Button Name="MainButton" Content="Button with ContextMenu" Width="150" Height="30" ContextMenuService.Placement="Bottom">
<Button.ContextMenu>
<ContextMenu x:Name="MainContextMenu" PlacementRectangle="{Binding RelativeSource={RelativeSource self}}">
<MenuItem Header="Do A" />
<MenuItem Header="Do B" />
<MenuItem Header="Do C" />
</ContextMenu>
</Button.ContextMenu>
<Button.Triggers>
<EventTrigger SourceName="MainButton" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainContextMenu" Storyboard.TargetProperty="(ContextMenu.IsOpen)">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<system:Boolean>True</system:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

Answer 1

Using a Storyboard for setting a single property value is pretty odd. This works, but looks somewhat ugly.
But this is also the reason why your ContextMenuService.Placement="Bottom" setting doesn't work: you just don't invoke the ContextMenuService for opening the context menu via the Storyboard, so the PlacementTarget won't be set to your button.
I'd suggest you to create a simple attached property and re-use it in your views:
static class ContextMenuTools
{
public static readonly DependencyProperty OpenOnLeftClickProperty =
DependencyProperty.RegisterAttached(
"OpenOnLeftClick",
typeof(bool),
typeof(ContextMenuTools),
new PropertyMetadata(false, OpenOnLeftClickChanged));
public static void SetOpenOnLeftClick(UIElement element, bool value)
=> element.SetValue(OpenOnLeftClickProperty, value);
public static bool GetOpenOnLeftClick(UIElement element)
=> (bool)element.GetValue(OpenOnLeftClickProperty);
private static void OpenOnLeftClickChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is IInputElement element && (bool)e.NewValue)
{
element.PreviewMouseLeftButtonDown += ElementOnMouseLeftButtonDown;
}
}
private static void ElementOnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (sender is UIElement element
&& ContextMenuService.GetContextMenu(element) is ContextMenu contextMenu)
{
contextMenu.Placement = ContextMenuService.GetPlacement(element);
contextMenu.PlacementTarget = element;
contextMenu.IsOpen = true;
}
}
}
Usage might look like this:
<Button Content="Button with ContextMenu" ContextMenuService.Placement="Bottom"
yourNS:ContextMenuTools.OpenOnLeftClick="True">
<Button.ContextMenu>
<ContextMenu x:Name="MainContextMenu">
<MenuItem Header="Do A" />
</ContextMenu>
</Button.ContextMenu>
</Button>
Note the yourNS namespace - this is a XAML namespace mapped to the CLR namespace where the attached property class ContextMenuTools is located, e.g.:
xmlns:yourNS="clr-namespace:WpfApp1"
You could also use this attached property on any WPF control implementing IInputElement, not only on buttons.

Answer 2

This should do the trick instead of using a Button
<Menu>
<MenuItem Header="Options">
<MenuItem Header="Do A"/>
<MenuItem Header="Do B"/>
<MenuItem Header="Do C"/>
</MenuItem>
</Menu>