如何根据子菜单中选择的值更改MenuItem标头?

时间:2014-04-06 17:23:43

标签: c# wpf xaml menu menuitem

<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时,它应该附加使用标题注销时间,当我们将鼠标悬停在任何项目上时应该显示给我们,如何执行此操作?我想要完成图像中显示的内容。请帮助

1 个答案:

答案 0 :(得分:0)

试试这段代码:

<强> 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样式中,我们为所有MenuItem定义了Click和MouseEnter处理程序,headerLogoutTime中包含的内容,此处我们还设置了背景颜色。

headerLogoutTime_ClickheaderMin_MouseEnter处理程序中,StringBuilder帮助设置MenuItem标头的新值。选择了类StringBuilder来提高使用字符串的性能。

<强> Edit: add line as separator

要显示该行,请在图片中使用Separator控件和样式:

<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>