Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Blackbox checkmark in checked menu item

Tags:

menuitem

wpf

xaml

I'm having a weird problem with MenuItem objects that have IsCheckable=True - a screenshot is worth a thousand words:

Blackbox checkmark in checked menu item

This looks very much like Check Mark Showing as a Black Box in Menu, except the accepted answer there, unless I misread it badly, suggests to tweak ToolBar.MenuStyleKey, which doesn't seem to be tweaking the right thing at all:

<Style x:Key="{x:Static ToolBar.MenuStyleKey}" TargetType="Menu">
    <Setter Property="Background" Value="Yellow" />
</Style>

Yay, a yellow menu... still blackbox checked menuitem

So, how do I get to that black box, and make it, say, GhostWhite?

like image 783
Mathieu Guindon Avatar asked Sep 16 '25 12:09

Mathieu Guindon

1 Answers

Works for me.

enter image description here

Exported the template per the instructions in the link you referenced.

Applied that style to the MneuItems.

<ToolBar>
    <Button Content="One"/>
    <Button Content="Two"/>
    <Menu>
        <MenuItem Header="Markets" Style="{DynamicResource MenuItemStyle1}">
            <MenuItem IsCheckable="True" Header="British" Style="{DynamicResource MenuItemStyle1}"/>
            <MenuItem IsCheckable="True" Header="Irish" Style="{DynamicResource MenuItemStyle1}"/>
        </MenuItem>
    </Menu>
</ToolBar>

Changed Background to Yellow in the template as such:

<Border x:Name="GlyphPanel" BorderBrush="#80DADADA" BorderThickness="1" Background="Yellow" Height="20" Margin="0,1" Visibility="Hidden" Width="20">

Just to make this example totally complete, below is the template that I exported:

<Window.Resources>
    <Style x:Key="MenuItemStyle1" TargetType="{x:Type MenuItem}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Margin" Value="0,1,0,0"/>
        <Setter Property="Padding" Value="8,3"/>
        <Setter Property="DockPanel.Dock" Value="Top"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Grid Background="Transparent" SnapsToDevicePixels="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                            <ColumnDefinition Width="14"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Margin="1,0"/>
                        <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                        <Border x:Name="GlyphPanel" BorderBrush="#80DADADA" BorderThickness="1" Background="Yellow" Height="20" Margin="0,1" Visibility="Hidden" Width="20">
                            <Path Data="M0,2.5L2.5,5 7,0.5" FlowDirection="LeftToRight" HorizontalAlignment="Center" Stroke="{TemplateBinding Foreground}" StrokeThickness="1.2" VerticalAlignment="Center"/>
                        </Border>
                        <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <TextBlock Grid.Column="2" HorizontalAlignment="Right" Margin="4,3,2,3" Text="{TemplateBinding InputGestureText}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Icon" Value="{x:Null}">
                            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsHighlighted" Value="True">
                            <Setter Property="BorderBrush" TargetName="Border" Value="#80DADADA"/>
                            <Setter Property="Background" TargetName="Border" Value="#210080FF"/>
                            <Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#90006CD9"/>
                            <Setter Property="Background" TargetName="GlyphPanel" Value="#FFEEF5FD"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Role" Value="TopLevelHeader">
                <Setter Property="Padding" Value="6,2,7,2"/>
                <Setter Property="Grid.IsSharedSizeScope" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type MenuItem}">
                            <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                <DockPanel x:Name="Header">
                                    <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                                    <Path x:Name="GlyphPanel" Data="M0,2.5L2.5,5 7,0.5" FlowDirection="LeftToRight" Margin="4,0,6,0" Stroke="{TemplateBinding Foreground}" StrokeThickness="1.2" Visibility="Collapsed" VerticalAlignment="Center"/>
                                    <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                    <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">
                                        <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
                                            <Border x:Name="SubMenuBorder" BorderBrush="#FFB6BDC5" BorderThickness="1" Background="#FFEEF5FD">
                                                <Grid>
                                                    <Rectangle Fill="#FFEEF5FD" HorizontalAlignment="Left" Height="1" Margin="0,-1,0,0" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=Header}"/>
                                                    <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                                        <Grid RenderOptions.ClearTypeHint="Enabled" Grid.IsSharedSizeScope="True">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                                                                <ColumnDefinition Width="*"/>
                                                            </Grid.ColumnDefinitions>
                                                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                                <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                                                            </Canvas>
                                                            <Rectangle Fill="#FFEEF5FD" Margin="0,1"/>
                                                            <ItemsPresenter x:Name="ItemsPresenter" Grid.ColumnSpan="2" KeyboardNavigation.DirectionalNavigation="Cycle" Margin="0,0,0,1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                                        </Grid>
                                                    </ScrollViewer>
                                                </Grid>
                                            </Border>
                                        </Themes:SystemDropShadowChrome>
                                    </Popup>
                                </DockPanel>
                            </Border>
                            <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="IsChecked" Value="True">
                                    <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="IsHighlighted" Value="True">
                                    <Setter Property="BorderBrush" TargetName="Border" Value="#80DADADA"/>
                                    <Setter Property="Background" TargetName="Border" Value="#210080FF"/>
                                </Trigger>
                                <Trigger Property="IsSubmenuOpen" Value="True">
                                    <Setter Property="BorderBrush" TargetName="Border" Value="#FFB6BDC5"/>
                                    <Setter Property="Background" TargetName="Border" Value="#FFEEF5FD"/>
                                </Trigger>
                                <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
                                    <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                                    <Setter Property="SnapsToDevicePixels" TargetName="Shdw" Value="True"/>
                                    <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </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>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="Role" Value="TopLevelItem">
                <Setter Property="Margin" Value="0,1"/>
                <Setter Property="Padding" Value="7,1,8,2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type MenuItem}">
                            <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                <DockPanel>
                                    <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                                    <Path x:Name="GlyphPanel" Data="M0,2.5L2.5,5 7,0.5" FlowDirection="LeftToRight" Margin="4,0,6,0" Stroke="{TemplateBinding Foreground}" StrokeThickness="1.2" Visibility="Collapsed" VerticalAlignment="Center"/>
                                    <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </DockPanel>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Icon" Value="{x:Null}">
                                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="IsHighlighted" Value="True">
                                    <Setter Property="BorderBrush" TargetName="Border" Value="#80DADADA"/>
                                    <Setter Property="Background" TargetName="Border" Value="#210080FF"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="Role" Value="SubmenuHeader">
                <Setter Property="DockPanel.Dock" Value="Top"/>
                <Setter Property="Padding" Value="8,3"/>
                <Setter Property="Grid.IsSharedSizeScope" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type MenuItem}">
                            <Grid Background="Transparent" SnapsToDevicePixels="True">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                                    <ColumnDefinition Width="14"/>
                                </Grid.ColumnDefinitions>
                                <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Margin="1,0"/>
                                <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                                <Border x:Name="GlyphPanel" BorderBrush="#80DADADA" BorderThickness="1" Background="#FF212121" Height="20" Margin="0,1" Visibility="Hidden" Width="20">
                                    <Path Data="M0,2.5L2.5,5 7,0.5" FlowDirection="LeftToRight" HorizontalAlignment="Center" Stroke="{TemplateBinding Foreground}" StrokeThickness="1.2" VerticalAlignment="Center"/>
                                </Border>
                                <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                <Path Grid.Column="3" DockPanel.Dock="Right" Data="M0,0L4,3.5 0,7z" Fill="{TemplateBinding Foreground}" Margin="4,0,6,0" VerticalAlignment="Center"/>
                                <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right">
                                    <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
                                        <Border x:Name="SubMenuBorder" BorderBrush="#FFB6BDC5" BorderThickness="1" Background="#FFEEF5FD" Grid.IsSharedSizeScope="True">
                                            <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                        <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                                                    </Canvas>
                                                    <Rectangle Fill="#FFEEF5FD" Margin="0,1"/>
                                                    <ItemsPresenter x:Name="ItemsPresenter" Grid.ColumnSpan="2" KeyboardNavigation.DirectionalNavigation="Cycle" Margin="0,0,0,1" 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="IsChecked" Value="True">
                                    <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="IsHighlighted" Value="True">
                                    <Setter Property="BorderBrush" TargetName="Border" Value="#80DADADA"/>
                                    <Setter Property="Background" TargetName="Border" Value="#210080FF"/>
                                    <Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#90006CD9"/>
                                    <Setter Property="Background" TargetName="GlyphPanel" Value="#FFEEF5FD"/>
                                </Trigger>
                                <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
                                    <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                                    <Setter Property="SnapsToDevicePixels" TargetName="Shdw" Value="True"/>
                                    <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </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>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
like image 89
Kory Gill Avatar answered Sep 18 '25 10:09

Kory Gill
Sign in to Comment

Related questions

Can you call a function in MainWindow.Xaml.cs from App.Xaml.cs?
Using Vector Graphics as Icon in WPF
Implenting ListCollectionView From ObservableCollection
C#/AvaloniaUI - OpenFolderDialog
WPF styles, create style page to be used across application in XAML
Create a square border, with image inside and width and height dependent to uniform grid colum
Difference between itempresenter, contenetpresenter, itemcontrol,contentcontrol

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!