WPF Button with ContextMenu under left click

Question

I have small problem with ContextMenu.

<Window.Resources>
    <Style x:Key="ButtonWithContextMenuStyle" TargetType="Button">
        <Setter Property="Background" Value="#cbeb00" />
        <Setter Property="Foreground" Value="#505050" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="4" Background="{TemplateBinding Background}"
                            BorderThickness="0">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#aaaaaa"/>
                            <Setter Property="Foreground" Value="#dcff00"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ContextMenu">
            <Setter.Value>
                <ContextMenu>
                    <MenuItem Command="{Binding EditUserCommand}" Header="{DynamicResource EditUserContextMenuMW}"/>
                    <MenuItem Command="{Binding OpenHistoryCommand}" Header="{DynamicResource ConversationHistoryContextMenuMW}"/>
                    <MenuItem Command="{Binding OpenHistoryCommand}" Header="{DynamicResource BuyCreditContextMenuMW}"/>
                    <Separator />
                    <MenuItem Command="{Binding LogoutCommand}" Header="{DynamicResource LogoutContextMenuMW}"/>
                </ContextMenu>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Click" >
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
                                <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

When I click right mouse button, everything work correctly. ContextMenu opens and i can invoke Command on MenuItem.

I would like to see the same behavior when I click the left mouse button. However, only the ContextMenu opens, and I can not call Command.

Can someone tell me what am I doing wrong?

The problem is that the context menu doesn't lie in same Visual tree as that of its placement target: stackoverflow.com/a/21356695/5147720 — Jose

Olaru Mircea Olaru Mircea · Accepted Answer · 2015-06-16T08:32:04

<Window x:Class="ContextMenuMouseDownStack.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<StackPanel Margin="10">
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
                                    <DiscreteBooleanKeyFrame KeyTime="0:0:2" Value="True"/>
                                </BooleanAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <Button Content="Click!" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Button.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Menu item 1" Click="MenuItem_Click"/>
                <MenuItem Header="Menu item 2" />
                <Separator />
                <MenuItem Header="Menu item 3" />
            </ContextMenu>
        </Button.ContextMenu>
    </Button>
</StackPanel>

In this example, which resembles yours, the Click event does the job as it should. Indeed, i don't have a Command there but a simple code behind handler. It reaches it in both ways, right or left mouse click. Just for testing, can you try a simple handler there?

Update 1:

It also works in both ways for me with :

<EventTrigger RoutedEvent="PreviewMouseDown">

Update 2

It seems that your Storyboard is ruining the things:

I've changed that with a Popup like this:

    <Popup x:Name="btnMenuPopup" Placement="Mouse" StaysOpen="False">
        <Border BorderBrush="Black" BorderThickness="2" CornerRadius="2">
            <Menu>
                <MenuItem Header="Menu item 1" Command="{Binding EditCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"/>
                <MenuItem Header="Menu item 2" />
                <Separator />
                <MenuItem Header="Menu item 3" />
                <Menu.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </Menu.ItemsPanel>
            </Menu>
        </Border>
    </Popup>

For this to be fast i've added a click event on the button which will open the Popup.

 private void Button_Click(object sender, RoutedEventArgs e)
 {
   btnMenuPopup.IsOpen = true;
 }

And now it should work.

Here is the Command for the Popup:

  Command="{Binding CommandShowPopup}" CommandParameter="{Binding ElementName=btnMenuPopup}"

Command implementation:

public class CommandShowPopup : ICommand
{
    public bool CanExecute(object parameter)
    {
        return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        (parameter as Popup).IsOpen = true;
    }
}

WPF Button with ContextMenu under left click

2 Answers