如何根据在其子菜单中选择的值更改菜单项标题
本文关键字：标题 菜单项 选择 何根 菜单 | 更新日期: 2023-09-27 17:57:11
<Window x:Class="MenuKinect.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" Width="14"/>
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<!--<Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" BorderThickness="1" Padding="2,2,2,2">-->
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
<!--</Border>-->
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="MinWidth" Value="0" TargetName="Col0"/>
<Setter Property="Width" Value="Auto" TargetName="Col3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<!--<Setter Property="Background" Value="Red" TargetName="Border"/>-->
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<!--<Setter Property="Background" Value="Red" />-->
<Setter Property="Foreground" Value="#FFa4ddfa"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Menu Height="23" Name="menu1" Width="171" Margin="10,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Background="#FF004165">
<!--<Menu.BitmapEffect>
<DropShadowBitmapEffect />
</Menu.BitmapEffect>-->
<MenuItem Header="Settings">
<MenuItem x:Name="headerLogoutTime" Header="LogOut Time" Background="#FF004165" Click="headerLogoutTime_Click">
<MenuItem x:Name="header10Min" Header="10 Min" Background="#FF004165" ></MenuItem>
<MenuItem x:Name="header20Min" Header="20 Min" Background="#FF004165" ></MenuItem>
<MenuItem x:Name="header30Min" Header="30 Min" Background="#FF004165" ></MenuItem>
<MenuItem x:Name="header40Min" Header="40 Min" Background="#FF004165" ></MenuItem>
<MenuItem x:Name="header50Min" Header="50 Min" Background="#FF004165" ></MenuItem>
</MenuItem>
<MenuItem Header="LogOut" Background="#FF004165"></MenuItem>
</MenuItem>
</Menu>
</Grid>
</Window>
几乎已经根据给定的图片制作了我的代码，我使用了菜单和子菜单，现在我想像上图一样，当我选择子菜单的任何项目即 10、20 或 30 时，它应该附加标题 logouttime，并且应该在我们悬停在任何项目上时显示给我们，怎么做呢？我想完全按照图像中显示的操作。.请帮忙
试试这段代码：
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
在MyMenuItem样式中，我们为所有菜单项定义了一个单击和鼠标输入处理程序，其中包含headerLogoutTime，在这里我们还设置了背景颜色。
在headerLogoutTime_Click和headerMin_MouseEnter处理程序中，借助StringBuilder为菜单项标题设置新值。选择类StringBuilder以提高处理字符串的性能。
Edit: add line as separator
若要显示线条（如图片所示），请将Separator控件与 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>
并像这样使用：
<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>