How to underline MenuItem.Header property during mouse over? - wpf

Question

I have a standard Menu with a couple of toplevel MenuItems + children. The controltemplate looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="Foreground" Value="{DynamicResource LinkTextColorBrush}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border BorderThickness="0">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border x:Name="SubmenuBorder" SnapsToDevicePixels="True" BorderThickness="1" Background="GhostWhite">
<Border.BorderBrush>
<SolidColorBrush Color="{Binding Source={StaticResource CstBorderLightGrey}, Path=Color}" />
</Border.BorderBrush>
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None" />
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Foreground" Value="{DynamicResource HotLinkTextColorBrush}" />
<Setter Property="BorderBrush" TargetName="Border" Value="Transparent" />
<Setter Property="Background" TargetName="Border" Value="White" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4" />
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border x:Name="SubmenuBorder" SnapsToDevicePixels="True" BorderThickness="1" Background="GhostWhite">
<Border.BorderBrush>
<SolidColorBrush Color="{Binding Source={StaticResource CstBorderLightGrey}, Path=Color}" />
</Border.BorderBrush>
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None" />
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Foreground" Value="{DynamicResource HotLinkTextColorBrush}" />
<Setter Property="BorderBrush" TargetName="Border" Value="Transparent" />
<Setter Property="Background" TargetName="Border" Value="White" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4" />
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ResourceDictionary>
There are some minor adjustments left but apart from that it works fine. But i'm having one problem, I need to make the toplevelitems underlined during mouseover. I've been searching for information about this for a long time and i've come up with nothing so far.

Answer 1

You can just use the MenuItem.Header property to add a TextBlock with an underline to the menu item header section:
<MenuItem>
<MenuItem.Header>
<TextBlock Text="{Binding YourHeaderProperty}" TextDecorations="Underline" />
</MenuItem.Header>
</MenuItem>
It's worth pointing out that you may confuse your users when you do this, because underlined text usually means that it is a hyper link.
UPDATE >>>
You just need to rearrange the code a little and add a DataTrigger to make the change:
<MenuItem>
<MenuItem.Header>
<TextBlock Text="rtuwruhey5uje5yu">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextDecorations" Value="None" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={
RelativeSource AncestorType={x:Type MenuItem}}}"
Value="True">
<Setter Property="TextDecorations" Value="Underline" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</MenuItem.Header>
</MenuItem>