Mutually exclusive checkable menu items?

Question

Given the following code:

<MenuItem x:Name="MenuItem_Root" Header="Root">
    <MenuItem x:Name="MenuItem_Item1" IsCheckable="True" Header="item1" />
    <MenuItem x:Name="MenuItem_Item2" IsCheckable="True" Header="item2"/>
    <MenuItem x:Name="MenuItem_Item3" IsCheckable="True" Header="item3"/>
</MenuItem>

In XAML, is there a way to create checkable menuitem's that are mutually exclusive? Where is the user checks item2, item's 1 and 3 are automatically unchecked.

I can accomplish this in the code behind by monitoring the click events on the menu, determining which item was checked, and unchecking the other menuitems. I'm thinking there is an easier way.

Any ideas?

Answer 1

I find that I get mutually exclusive menu items when binding MenuItem.IsChecked to a variable.

But it has one quirk: If you click the selected menu item, it gets invalid, shown by the usual red rectangle. I solved it by adding a handler for MenuItem.Click that prevents unselecting by just setting IsChecked back to true.

The code... I'm binding to an enum type, so I use an enum converter that returns true if the bound property is equal to the supplied parameter. Here is the XAML:

    <MenuItem Header="Black"
              IsCheckable="True"
              IsChecked="{Binding SelectedColor, Converter={StaticResource EnumConverter}, ConverterParameter=Black}"
              Click="MenuItem_OnClickDisallowUnselect"/>
    <MenuItem Header="Red"
              IsCheckable="True"
              IsChecked="{Binding SelectedColor, Converter={StaticResource EnumConverter}, ConverterParameter=Red}"
              Click="MenuItem_OnClickDisallowUnselect"/>

And here is the code behind:

    private void MenuItem_OnClickDisallowUnselect(object sender, RoutedEventArgs e)
    {
        var menuItem = e.OriginalSource as MenuItem;
        if (menuItem == null) return;

        if (! menuItem.IsChecked)
        {
            menuItem.IsChecked = true;
        }
    }

Answer 2

Several years after i see this post with the keywords i wrote... i thought there was an easy solution, in wpf... Perhaps it's me, but i think it's a bit special to have a such massive arsenal for a so little thing as accepted solution. I don't even talk about the solution with 6likes i didn't understood where to click to have this options.

So perhaps it's really no elegant at all... But here a simple solution. What it do is simple.. a loop to all elements contained by the parent, to put it at false. The most of time people split this part from the others parts, of course it's only correct in this case.

private void MenuItem_Click_1(object sender, RoutedEventArgs e)
{
    MenuItem itemChecked = (MenuItem)sender;
    MenuItem itemParent = (MenuItem)itemChecked.Parent;

    foreach (MenuItem item in itemParent.Items)
    {
        if (item == itemChecked)continue;

        item.IsChecked = false;
    }
}

that's all and easy, xaml is a classic code with absolutaly nothing particular

<MenuItem Header="test">
    <MenuItem Header="1"  Click="MenuItem_Click_1" IsCheckable="True" StaysOpenOnClick="True"/>
    <MenuItem Header="2"  Click="MenuItem_Click_1" IsCheckable="True"  StaysOpenOnClick="True"/>
</MenuItem>

Of course you could have a need of the click method, it's not a problem, you can make a method that accept an object sender and each of your click method will use this method. It's old, it's ugly but for the while it works. And i have some problems to imagine so much code line for a so little thing, it's probably me that have a problem with xaml, but it seems incredible to have to do this to obtains to just have only one menuitem selected.

Answer 3

Adding this at the bottom since I don't have the reputation yet...

As helpful as Patrick's answer is, it doesn't ensure that items cannot be unchecked. In order to do that, the Checked handler should be changed to a Click handler, and changed to the following:

static void MenuItemClicked(object sender, RoutedEventArgs e)
{
    var menuItem = e.OriginalSource as MenuItem;
    if (menuItem.IsChecked)
    {
        foreach (var item in ElementToGroupNames)
        {
            if (item.Key != menuItem && item.Value == GetGroupName(menuItem))
            {
                item.Key.IsChecked = false;
            }
        }
    }
    else // it's not possible for the user to deselect an item
    {
        menuItem.IsChecked = true;
    }
}

Answer 4

Yes, this can be done easily by making every MenuItem a RadioButton. This can be done by Editing Template of MenuItem.

1. Right-Click the MenuItem in the Document-Outline left pane > EditTemplate > EditCopy. This will add the code for editing under Window.Resources.

2. Now, you have to do only two-changes which are very simple.

   a. Add the RadioButton with some Resources to hide its circle portion.

   b. Change BorderThickness = 0 for MenuItem Border part.

   These changes are shown below as comments, rest of the generated style should be used as is :

   <Window.Resources>
           <LinearGradientBrush x:Key="MenuItemSelectionFill" EndPoint="0,1" StartPoint="0,0">
               <GradientStop Color="#34C5EBFF" Offset="0"/>
               <GradientStop Color="#3481D8FF" Offset="1"/>
           </LinearGradientBrush>
           <Geometry x:Key="Checkmark">M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z</Geometry>
           <ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
               <Grid SnapsToDevicePixels="true">
                   <Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
                   <Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2"/>
      <!-- Add RadioButton around the Grid 
      -->
                   <RadioButton Background="Transparent" GroupName="MENUITEM_GRP" IsHitTestVisible="False" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource AncestorType=MenuItem}}">
                       <RadioButton.Resources>
                           <Style TargetType="Themes:BulletChrome">
                               <Setter Property="Visibility" Value="Collapsed"/>
                           </Style>
                       </RadioButton.Resources>
      <!-- Add RadioButton Top part ends here
       -->
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                               <ColumnDefinition Width="4"/>
                               <ColumnDefinition Width="*"/>
                               <ColumnDefinition Width="37"/>
                               <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                               <ColumnDefinition Width="17"/>
                           </Grid.ColumnDefinitions>
                           <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
   
       <!-- Change border thickness to 0 
       -->    
                           <Border x:Name="GlyphPanel" BorderBrush="#CDD3E6" BorderThickness="0" Background="#E6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
                               <Path x:Name="Glyph" Data="{StaticResource Checkmark}" Fill="#0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
                           </Border>
                           <ContentPresenter Grid.Column="2" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                           <TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}"/>
                       </Grid>
                   </RadioButton>
       <!-- RadioButton closed , thats it !
       -->
               </Grid>
             ...
       </Window.Resources>
   

3. Apply the Style ,

   <MenuItem IsCheckable="True" Header="Open" Style="{DynamicResource MenuItemStyle1}"
   

Answer 5

A small addition to the @Patrick answer.

As @MK10 mentioned, this solution allows user to deselect all items in a group. But the changes he suggested doesn't work for me now. Maybe, the WPF model was changed since that time, but now Checked event doesn't fired when an item is unchecked.

To avoid it, I would suggest to process the Unchecked event for MenuItem.

I changed these procedures:

        private static void OnGroupNameChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!(d is MenuItem menuItem))
                return;

            var newGroupName = e.NewValue.ToString();
            var oldGroupName = e.OldValue.ToString();
            if (string.IsNullOrEmpty(newGroupName))
            {
                RemoveCheckboxFromGrouping(menuItem);
            }
            else
            {
                if (newGroupName != oldGroupName)
                {
                    if (!string.IsNullOrEmpty(oldGroupName))
                    {
                        RemoveCheckboxFromGrouping(menuItem);
                    }
                    ElementToGroupNames.Add(menuItem, e.NewValue.ToString());
                    menuItem.Checked += MenuItemChecked;
                    menuItem.Unchecked += MenuItemUnchecked; // <-- ADDED
                }
            }
        }

        private static void RemoveCheckboxFromGrouping(MenuItem checkBox)
        {
            ElementToGroupNames.Remove(checkBox);
            checkBox.Checked -= MenuItemChecked;
            checkBox.Unchecked -= MenuItemUnchecked;   // <-- ADDED
        }

and added the next handler:

    private static void MenuItemUnchecked(object sender, RoutedEventArgs e)
    {
        if (!(e.OriginalSource is MenuItem menuItem))
            return;

        var isAnyItemChecked = ElementToGroupNames.Any(item => item.Value == GetGroupName(menuItem) && item.Key.IsChecked);
        if (!isAnyItemChecked)
            menuItem.IsChecked = true;
    }

Now the checked item remains checked when user clicks it second time.

Answer 6

Here is yet another way – not easy by any stretch but it is MVVM compatible, bindable and highly unit testable. If you have the freedom to add a Converter to your project and don’t mind a little garbage in the form of a new list of items every time the context menu opens, this works really well. It meets the original question of how to provide a mutually exclusive set of checked items in a context menu.

I think if you want to extract all of this into a user control you could make it into a reusable library component to reuse across your application. Components used are Type3.Xaml with a simple grid, one text block and the context menu. Right-click anywhere in the grid to make the menu appear.

A value converter named AllValuesEqualToBooleanConverter is used to compare each menu item’s value to the current value of the group and show the checkmark next to the menu item that is currently selected.

A simple class that represent your menu choices is used for illustration. The sample container uses Tuple with String and Integer properties that make is fairly easy to have a tightly coupled human readable snippet of text paired with a machine-friendly value. You can use strings alone or String and an Enum to keep track of the Value for making decisions over what is current. Type3VM.cs is the ViewModel that is assigned to the DataContext for Type3.Xaml. However you contrive to assign your data context in your existing application framework, use the same mechanism here. The application framework in use relies on INotifyPropertyChanged to communicate changed values to WPF and its binding goo. If you have dependency properties you may need to tweak the code a little bit.

The drawback to this implementation, aside from the converter and its length, is that a garbage list is created every time the context menu is opened. For single user applications this is probably ok but you should be aware of it.

The application uses an implementation of RelayCommand that is readily available from the Haacked website or any other ICommand-compatible helper class available in whatever framework you are using.

public class Type3VM : INotifyPropertyChanged
    {
        private List<MenuData> menuData = new List<MenuData>(new[] 
        {
            new MenuData("Zero", 0),
            new MenuData("One", 1),
            new MenuData("Two", 2),
            new MenuData("Three", 3),
        });

        public IEnumerable<MenuData> MenuData { get { return menuData.ToList(); } }

        private int selected;
        public int Selected
        {
            get { return selected; }
            set { selected = value; OnPropertyChanged(); }
        }

        private ICommand contextMenuClickedCommand;
        public ICommand ContextMenuClickedCommand { get { return contextMenuClickedCommand; } }

        private void ContextMenuClickedAction(object clicked)
        {
            var data = clicked as MenuData;
            Selected = data.Item2;
            OnPropertyChanged("MenuData");
        }

        public Type3VM()
        {
            contextMenuClickedCommand = new RelayCommand(ContextMenuClickedAction);
        }

        private void OnPropertyChanged([CallerMemberName]string propertyName = null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

    public class MenuData : Tuple<String, int>
    {
        public MenuData(String DisplayValue, int value) : base(DisplayValue, value) { }
    }

<UserControl x:Class="SampleApp.Views.Type3"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Views="clr-namespace:SampleApp.Views"
             xmlns:Converters="clr-namespace:SampleApp.Converters"
             xmlns:ViewModels="clr-namespace:SampleApp.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             d:DataContext="{d:DesignInstance ViewModels:Type3VM}"
             >
    <UserControl.Resources>
        <Converters:AllValuesEqualToBooleanConverter x:Key="IsCheckedVisibilityConverter" EqualValue="True" NotEqualValue="False" />
    </UserControl.Resources>
    <Grid>
        <Grid.ContextMenu>
            <ContextMenu ItemsSource="{Binding MenuData, Mode=OneWay}">
                <ContextMenu.ItemContainerStyle>
                    <Style TargetType="MenuItem" >
                        <Setter Property="Header" Value="{Binding Item1}" />
                        <Setter Property="IsCheckable" Value="True" />
                        <Setter Property="IsChecked">
                            <Setter.Value>
                                <MultiBinding Converter="{StaticResource IsCheckedVisibilityConverter}" Mode="OneWay">
                                    <Binding Path="DataContext.Selected" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Views:Type3}}"  />
                                    <Binding Path="Item2" />
                                </MultiBinding>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Command" Value="{Binding Path=DataContext.ContextMenuClickedCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Views:Type3}}}" />
                        <Setter Property="CommandParameter" Value="{Binding .}" />
                    </Style>
                </ContextMenu.ItemContainerStyle>
            </ContextMenu>
        </Grid.ContextMenu>
        <Grid.RowDefinitions><RowDefinition Height="*" /></Grid.RowDefinitions>
        <Grid.ColumnDefinitions><ColumnDefinition Width="*" /></Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" Text="Right Click For Menu" />
    </Grid>
</UserControl>

public class AreAllValuesEqualConverter<T> : IMultiValueConverter
{
    public T EqualValue { get; set; }
    public T NotEqualValue { get; set; }

    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        T returnValue;

        if (values.Length < 2)
        {
            returnValue = EqualValue;
        }

        // Need to use .Equals() instead of == so that string comparison works, but must check for null first.
        else if (values[0] == null)
        {
            returnValue = (values.All(v => v == null)) ? EqualValue : NotEqualValue;
        }
        else
        {
            returnValue = (values.All(v => values[0].Equals(v))) ? EqualValue : NotEqualValue;
        }

        return returnValue;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

[ValueConversion(typeof(object), typeof(Boolean))]
public class AllValuesEqualToBooleanConverter : AreAllValuesEqualConverter<Boolean>
{ }