如何在WPF MenuItem复选框中设置IsThreeState = True？

Question

I'm looking to have a MenuItem whose internal CheckBox has the property "IsThreeState" set to true. I want to bind it to a bool? in my ViewModel.

After looking into it a bit, I've found that IsChecked is a plain old bool.

My first instinct is to add an attached bool? "IsCheckedThreeState" property to the MenuItem, but I still can't figure out how to get around the fact that the internal CheckBox is bound to the non-nullable IsChecked.

If there is no easier way, I could create a new control template and modify the CheckBox directly, but I think that would also require sub-classing MenuItem to adjust the IsChecked to be nullable.

So, will I have to subclass/customize the MenuItem template to get the functionality I want, or is there an easier way that I'm not thinking of. Thanks for any help you might be able to provide.

Answer 1

Alright, so I've done some more digging.

The Control Template for the MenuItem doesn't even have a internal CheckBox control. The MenuItem uses it's own IsChecked property, and it shows or hides an internal Path control to indicate it's state.

So, I altered the default Control Template. I replaced the Path with a CheckBox, and I rewired the triggers appropriately:

<ControlTemplate x:Key="CustomMenuItemControlTemplate" TargetType="{x:Type MenuItem}">
    <Grid SnapsToDevicePixels="True" MinWidth="225" MinHeight="26">
        <Rectangle x:Name="OuterBorder" RadiusY="2" RadiusX="2"/>
        <Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Margin="1" RadiusY="1" RadiusX="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
        <Rectangle x:Name="InnerBorder" Margin="2"/>
        <DockPanel>
            <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
            <CheckBox x:Name="MenuCheckBox" Margin="7,4" Visibility="Hidden" VerticalAlignment="Center" IsThreeState="True" />
            <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" />
        </DockPanel>
        <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" HorizontalOffset="1" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">
            <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
                <Border x:Name="SubMenuBorder" BorderBrush="#FF959595" BorderThickness="1" Background="WhiteSmoke">
                    <ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                        <Grid RenderOptions.ClearTypeHint="Enabled">
                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                <Rectangle x:Name="OpaqueRect" Fill="WhiteSmoke" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                            </Canvas>
                            <Rectangle Fill="#FFF1F1F1" HorizontalAlignment="Left" Margin="1,2" RadiusY="2" RadiusX="2" Width="28"/>
                            <Rectangle Fill="#FFE2E3E3" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
                            <Rectangle Fill="White" HorizontalAlignment="Left" Margin="30,2,0,2" Width="1"/>
                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                        </Grid>
                    </ScrollViewer>
                </Border>
            </Themes:SystemDropShadowChrome>
        </Popup>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSuspendingPopupAnimation" Value="True">
            <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
        </Trigger>
        <Trigger Property="Icon" Value="{x:Null}">
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsCheckable" Value="True">
            <Setter Property="Visibility" TargetName="MenuCheckBox" Value="Visible"/>
            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
            <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
            <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="True">

            <Setter Property="Fill" TargetName="Bg">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#0462c9f5" Offset="0"/>
                        <GradientStop Color="#1C62c9f5" Offset="0.75"/>
                        <GradientStop Color="#3062c9f5" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Stroke" TargetName="OuterBorder" Value="#C062c9f5"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="#FF9A9A9A"/>
        </Trigger>
        <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
            <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
            <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

I have this in it's own Resource Dictionary. You'll have to add a reference in your project to "PresentationFramework.Aero" and the following xmlns:

xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

Then, I wire it all up in a style:

<Style TargetType="MenuItem">
    <Style.Resources>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="IsChecked" Value="{Binding IsSelected}" />
        </Style>
    </Style.Resources>
    <Setter Property="Template" Value="{StaticResource CustomMenuItemControlTemplate}" />
    <Setter Property="IsCheckable" Value="True" />
    <Setter Property="IsChecked" Value="{Binding ToggleIsSelected}" />
    <Setter Property="StaysOpenOnClick" Value="True" />
</Style>

The final piece of the puzzle is the bindings. I have two properties now:

1) IsSelected - a bool? that I'm binding to the internal CheckBox's IsChecked property

2) ToggleIsSelected - a bool which I'm binding to the MenuItem's IsChecked property

Having these two bindings allows the user to click anywhere in the MenuItem to toggle the CheckBox, without having any binding errors if IsSelected is null. The properties are defined as:

public bool? IsSelected
{
    get
    {
        return _isSelected;
    }
    set
    {
        if (value == _isSelected)
            return;
        _isSelected = value ?? false;
        OnPropertyChanged();
        OnPropertyChanged("ToggleIsSelected");
    }
}

and

public bool ToggleIsSelected
{
    get
    {
        return IsSelected ?? false;
    }
    set
    {
        if (value == IsSelected)
            return;
        IsSelected = value;
    }
}

One potential downside to doing it this way is that the users can't toggle the CheckBox to it's null state. In my case, I only want to program to set it to null, so it works for me. If you need the users to toggle null, remove the ToggleIsSelected property from your ViewModel, and the associated setter:

<Setter Property="IsChecked" Value="{Binding ToggleIsSelected}" />

...and change the IsSelected property to:

public bool? IsSelected
{
    get
    {
        return _isSelected;
    }
    set
    {
        if (value == _isSelected)
            return;
        _isSelected = value;
    OnPropertyChanged();
    }
}

This will also remove the ability to click anywhere to toggle, so your users will have to check the CheckBox directly... unless you come up with some other way to implement it.

I know that this is a long answer... but I figured someone else might have a need for this. Might as well save them the time if I can. If you can see any room for improvements, please let me know.

Answer 2

The simplest option is probably to insert a checkbox through the Icon property.

<MenuItem Header="..." StaysOpenOnClick="True" Click="MenuItem_ToggleCheckBox">
    <MenuItem.Icon>
        <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" IsThreeState="True" />
    </MenuItem.Icon>
</MenuItem>

In the Click event handler, you'll need to manually update the check box (or some property to which the check box is bound).

Answer 3

If you want to keep the original MenuItem check style and only want to display null values, not let the user set them, this can be done with converters:

1. A two-way converter ThreeStateToBooleanConverter that changes false/null/true to false/false/true (and false/true to false/true the other way), which is used when binding the MenuItem to the bool? property.
2. A one-way converter IsNullToVisibilityConverter that changes null to Visible, and anything else to Collapsed, which can be used to bind the Visibility of whatever you wish to show in the Icon of the MenuItem when the value is null.