How to add a non-selectable context menu item as a title in WPF ContextMenu control

Question

I have in my UI some symbols (that represent electric equipments). I implemented a context menu that allows the user to perform some actions.

I would like to add a non-selectable title label at the top of the context menu;

this item should not be selected or highlighted with the mouse cursor

Like in this image :

How can I do this ??

<UserControl.ContextMenu>
    <ContextMenu>

        <MenuItem Header="Start" IsEnabled="{Binding ControlPanelViewModel.IsStartEnabled}" Command="{Binding Path=ControlPanelViewModel.StartEscalatorCommand}"/>
        <MenuItem Header="Stop" IsEnabled="{Binding ControlPanelViewModel.IsStopEnabled}" Command="{Binding Path=ControlPanelViewModel.StopEscalatorCommand}"/>

        <Separator/>

        <MenuItem x:Name="OpenControl" Header="Control panel..." Command="{Binding OpenControlPanelCommand}">
            <MenuItem.Icon>
                <Path Data="M19,4C20.11,4 21,4.9 21,6V18A2,2 0 0,1 19,20H5C3.89,20 3,19.1 3,18V6A2,2 0 0,1 5,4H19M19,18V8H5V18H19Z" Fill="Black" Margin="-5"/>
            </MenuItem.Icon>
        </MenuItem>
    </ContextMenu>
</UserControl.ContextMenu>

Answer 1

You can add the title to the ControlTemplate of the ContextMenu. You can get the default ControlTemplate for the ContextMenu using the solution here, and then modify it to add the title. I've done this below:

<UserControl.ContextMenu>
    <ContextMenu>
        <ContextMenu.Template>
            <ControlTemplate TargetType="ContextMenu" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
                <mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw" SnapsToDevicePixels="True">
                    <Border BorderThickness="{TemplateBinding Border.BorderThickness}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="ContextMenuBorder">
                        <ScrollViewer Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=FrameworkElement, ResourceId=MenuScrollViewer}}" Name="ContextMenuScrollViewer" Margin="1,0,1,0" Grid.ColumnSpan="2">
                            <StackPanel>
                                <Label>Your title goes here</Label>
                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                    <Canvas Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
                                        <Rectangle Fill="{x:Null}" Name="OpaqueRect" Width="Auto" Height="Auto" />
                                    </Canvas>
                                    <Rectangle RadiusX="2" RadiusY="2" Fill="#FFF1F1F1" Width="28" Margin="1,2,1,2" HorizontalAlignment="Left" />
                                    <Rectangle Fill="#FFE2E3E3" Width="1" Margin="29,2,0,2" HorizontalAlignment="Left" />
                                    <Rectangle Fill="#FFFFFFFF" Width="1" Margin="30,2,0,2" HorizontalAlignment="Left" />
                                    <ItemsPresenter Name="ItemsPresenter" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Cycle" />
                                </Grid>
                            </StackPanel>
                        </ScrollViewer>
                    </Border>
                </mwt:SystemDropShadowChrome>
                <ControlTemplate.Triggers>
                    <Trigger Property="ContextMenuService.HasDropShadow">
                        <Setter Property="FrameworkElement.Margin" TargetName="Shdw">
                            <Setter.Value>
                                <Thickness>0,0,5,5</Thickness>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw">
                            <Setter.Value>
                                <Color>#71000000</Color>
                            </Setter.Value>
                        </Setter>
                        <Trigger.Value>
                            <s:Boolean>True</s:Boolean>
                        </Trigger.Value>
                    </Trigger>
                    <Trigger Property="ScrollViewer.CanContentScroll" SourceName="ContextMenuScrollViewer">
                        <Setter Property="Canvas.Top" TargetName="OpaqueRect">
                            <Setter.Value>
                                <Binding Path="VerticalOffset" ElementName="ContextMenuScrollViewer" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Canvas.Left" TargetName="OpaqueRect">
                            <Setter.Value>
                                <Binding Path="HorizontalOffset" ElementName="ContextMenuScrollViewer" />
                            </Setter.Value>
                        </Setter>
                        <Trigger.Value>
                            <s:Boolean>False</s:Boolean>
                        </Trigger.Value>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ContextMenu.Template>

        <MenuItem Header="Start" IsEnabled="{Binding ControlPanelViewModel.IsStartEnabled}" Command="{Binding Path=ControlPanelViewModel.StartEscalatorCommand}"/>
        <MenuItem Header="Stop" IsEnabled="{Binding ControlPanelViewModel.IsStopEnabled}" Command="{Binding Path=ControlPanelViewModel.StopEscalatorCommand}"/>

        <Separator/>

        <MenuItem x:Name="OpenControl" Header="Control panel..." Command="{Binding OpenControlPanelCommand}">
            <MenuItem.Icon>
                <Path Data="M19,4C20.11,4 21,4.9 21,6V18A2,2 0 0,1 19,20H5C3.89,20 3,19.1 3,18V6A2,2 0 0,1 5,4H19M19,18V8H5V18H19Z" Fill="Black" Margin="-5"/>
            </MenuItem.Icon>
        </MenuItem>
    </ContextMenu>
</UserControl.ContextMenu>

The key modification was to wrap the Grid in a StackPanel and add a Label with your title above the Grid. Because the default ControlTemplate uses Aero, you'll need to reference PresentationFramework.Aero in your project.