Menu not closing after clicking a MenuItem with a bound command in WPF

Question

I have a customized Menu and MenuItems and each MenuItem has an specific command bound to it. My problem is that when I click on any MenuItem, the command executes but the Menu is not closed.

Here's an example of the Menu with one MenuItem

<Menu Background="#f4f4f4" x:Name="ExportMenu">
<Menu.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical" Background="#f4f4f4"/>
    </ItemsPanelTemplate>
</Menu.ItemsPanel>
    <MenuItem x:Name="CopyItem" Header="Copy" Style="{DynamicResource MainMenuItem}"
                CommandParameter="{Binding Data.CurrentPlotVMs, Source={StaticResource Proxy}}"
                Command="{Binding Data.ExporterVM.CopyGraphicPlotsCommand, Source={StaticResource Proxy}}" Click="CopyItem_Click">
    <MenuItem.Icon>
        <TextBlock Text="" FontSize="15" FontFamily="../Icons/#icons"/>
    </MenuItem.Icon>
</MenuItem>
</Menu>

And here's my customized style

<Style x:Key="MainMenuItem" TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FontFamily" Value="Open Sans"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="StaysOpenOnClick" Value="False"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type MenuItem}">
            <Border x:Name="templateRoot" BorderThickness="0" Background="#f4f4f4" SnapsToDevicePixels="True" Padding="0,10,10,10">
                <Grid VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter x:Name="Icon" 
                                      Grid.Column="0"
                                      Content="{TemplateBinding Icon}" 
                                      ContentSource="Icon" 
                                      HorizontalAlignment="Center" Height="16" Width="16"
                                      Margin="5,0,5,0"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                      VerticalAlignment="Center"/>
                    <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                      Content="{TemplateBinding Header}" 
                                      Grid.Column="1" 
                                      ContentStringFormat="{TemplateBinding HeaderStringFormat}" 
                                      ContentSource="Header" 
                                      Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="templateRoot" Property="Background" Value="{StaticResource ResourceKey=FrSkyBlue}"/>
                    <Setter Property="Foreground" Value="{StaticResource FrWhite}"/>
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Maybe I'm setting wrong a property or doing something else wrong, I'm kinda new to WPF and MVVM.

What does `CopyItem_Click` do? Why do you need a command _and_ a click handler? — Haukinger, Nov 25 '16 at 08:12
Its just changing the visibility of an icon, the menu has an icon that changes depending of the item clicked. Each item has a command bound that does the desired action for my project, the click event was just handling the visibility of the icons in the view. — Fabricio Monsalve, Nov 25 '16 at 21:56

score 0 · Answer 1 · edited May 23 '17 at 12:30

You cannot use Click event and Command for the same Button/Control:

I assume that in method CopyItem_Click() You are closing the menu - You have to decide if You are using the MVVM model or this is simple XAML app without this pattern.

If this is simplier version, You can handle this in the Click method:

private void CopyItem_Click(object sender, ...)
{
    var cmd = CopyItem.Command;
    var param = CopyItem.CommandParameter;

    if(cmd != null && cmd.CanExecute(param))
        cmd.Execute(param);

    // add the code for closing menu
}

The other aproach for the case is using MVVM model. You should completely avoid using Click event handling and instead push this in a command. Command itself will do the work and have to close the menu after.

public RelayCommand MyCommand 
{ 
    get; 
    private set; 
}

public MainViewModel() 
{ 
    MyCommand = new RelayCommand(ExecuteMyCommand); 
} 

private void ExecuteMyCommand() 
{ 
    // Do the work You expect

    // Close the menu
}

Some src:

Close Window from ViewModel

Thanks for the clarification, I wasn't closing the menu in CopyItem_Click, I was just changing the visibility of an icon in the view. But I understand now that I can't have a command and a Click event together if I'm working with MVVM, I will have to manage another way to handle the visibility of the icons. — Fabricio Monsalve, Nov 25 '16 at 22:01

Menu not closing after clicking a MenuItem with a bound command in WPF

1 Answers1