Try this code:
XAML
<Grid>
<Grid.Resources>
<Style x:Key="MyMenuItem"
BasedOn="{StaticResource {x:Type MenuItem}}"
TargetType="{x:Type MenuItem}">
<EventSetter Event="Click" Handler="headerLogoutTime_Click" />
<EventSetter Event="MouseEnter" Handler="headerMin_MouseEnter" />
<Setter Property="Background" Value="#FF004165" />
</Style>
</Grid.Resources>
<Menu Height="23" Name="menu1" Width="171" Margin="10,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Background="#FF004165">
<MenuItem Header="Settings">
<MenuItem x:Name="headerLogoutTime"
Header="LogOut Time: 00 Min"
Background="#FF004165">
<MenuItem x:Name="header10Min"
Header="10 Min"
Style="{StaticResource MyMenuItem}" />
<MenuItem x:Name="header20Min"
Header="20 Min"
Style="{StaticResource MyMenuItem}" />
<MenuItem x:Name="header30Min"
Header="30 Min"
Style="{StaticResource MyMenuItem}" />
<MenuItem x:Name="header40Min"
Header="40 Min"
Style="{StaticResource MyMenuItem}" />
<MenuItem x:Name="header50Min"
Header="50 Min"
Style="{StaticResource MyMenuItem}" />
</MenuItem>
<MenuItem Header="LogOut" Background="#FF004165" />
</MenuItem>
</Menu>
</Grid>
Code-behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void headerLogoutTime_Click(object sender, RoutedEventArgs e)
{
SetMenuItemHeader(sender as MenuItem);
}
private void headerMin_MouseEnter(object sender, MouseEventArgs e)
{
SetMenuItemHeader(sender as MenuItem);
}
private void SetMenuItemHeader(MenuItem menuItem)
{
var sb = new StringBuilder();
if (menuItem != null)
{
headerLogoutTime.Header = "";
headerLogoutTime.Header = sb.Append("LogOut Time: ").Append(headerLogoutTime.Header).Append(menuItem.Header);
}
}
}
Clarification
In MyMenuItem
Style we define a Click and MouseEnter handlers for all MenuItems, what contains in headerLogoutTime
, here it also we set the Background color.
In headerLogoutTime_Click
and in headerMin_MouseEnter
handlers, with help of StringBuilder
setting new value for MenuItem Header. Class StringBuilder
chosen to enhance performance for working with strings.
Edit: add line as separator
To display the line, as in your picture, use Separator
control with Style:
<Style x:Key="SeparatorStyleKey"
TargetType="{x:Type Separator}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Background" Value="White" />
<Setter Property="Height" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Separator}">
<Rectangle SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Fill="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And use like this:
<MenuItem Header="Settings">
<MenuItem x:Name="headerLogoutTime"
Header="LogOut Time: 00 Min"
Background="#FF004165">
<MenuItem x:Name="header10Min"
Header="10 Min"
Style="{StaticResource MyMenuItem}" />
<Separator Style="{StaticResource SeparatorStyleKey}" />
<MenuItem x:Name="header20Min"
Header="20 Min"
Style="{StaticResource MyMenuItem}" />
<Separator Style="{StaticResource SeparatorStyleKey}" />
<MenuItem x:Name="header30Min"
Header="30 Min"
Style="{StaticResource MyMenuItem}" />
<Separator Style="{StaticResource SeparatorStyleKey}" />
<MenuItem x:Name="header40Min"
Header="40 Min"
Style="{StaticResource MyMenuItem}" />
<Separator Style="{StaticResource SeparatorStyleKey}" />
<MenuItem x:Name="header50Min"
Header="50 Min"
Style="{StaticResource MyMenuItem}" />
</MenuItem>
<MenuItem Header="LogOut" Background="#FF004165" />
</MenuItem>