Question

我有一个WPF菜单，我使用控件模板设置了样式。然后客户端想要使用图像而不是文本作为顶级导航项。

没问题，我为每个顶级项目创建了一个控件模板，并在每个MenuItem上设置我的Template属性以匹配下面的自定义模板。我有一个触发器，可以在翻转时更改图像。

我的问题是当您点击菜单项时应该有一个不再下拉的子菜单项。

这些命令会触发没有子级的顶级项目。一旦我从带有子项的菜单项中删除指定模板的代码，我就会看到带有下拉列表的文本版本。

我需要做些什么才能保留基于图像的顶级菜单项并保留下拉菜单？

提前致谢。

    <Menu Grid.Row="0" Grid.Column="0" Name="uxMenu" Margin="0 2 0 0">
        <MenuItem Header="Home" Name="uxHome" Command="cmds:NavigationCommands.HomeViewNavigationCommand"  Template="{DynamicResource HomeButtonTemplate}"/>
                <MenuItem Header="Admin" Name="uxAdmin" Template="{DynamicResource MenuExitButtonTemplate}">
                    <MenuItem Header="_Setup">
                        <MenuItem Header="_Overview" Command="cmds:NavigationCommands.MenuAdminSetupOverviewNavigationCommand"/>
                        <MenuItem Header="_Cameras" Command="cmds:NavigationCommands.MenuAdminSetupCameraNavigationCommand" />
                    </MenuItem>
       </MenuItem>
    </Menu>




    <ControlTemplate x:Key="HomeButtonTemplate" TargetType="{x:Type MenuItem}">
    <Grid >
        <Image x:Name="myimage" Source="/Images/Navigation/home_off.png" Width="100" Height="52"  />
    </Grid>
    <ControlTemplate.Triggers >
        <Trigger Property="Button.IsMouseOver" Value="True">
            <Setter TargetName="myimage" Property="Source" Value="/Images/Navigation/home_on.png" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

回应H.B的帖子......

我确实有一大堆控制模板，我目前正用它来设置我的菜单样式。因此，如果我想为每个顶级标题指定不同的控件模板，我将不得不为每个标题设置一组全新的控件模板？

我不确定要使用的确切语法，尤其是x：Key和TargetType属性。

例如。我的TopLevelHeader和SubmenuHeader控件模板的当前代码如下所示。（从你提到的'menutemplatingpage'复制'）

  <!-- TopLevelHeader (children)-->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="MenuItem">
    <Border Name="Border">
        <Grid>

            <ContentPresenter Margin="0 24 0 14" ContentSource="Header" RecognizesAccessKey="True" />
            <Popup 
                Name="Popup"
                Placement="Bottom"
                IsOpen="{TemplateBinding IsSubmenuOpen}"
                AllowsTransparency="True" 
                Focusable="False"
                PopupAnimation="Fade">
                <Border 
                  Name="SubmenuBorder"
                  SnapsToDevicePixels="True"
                  Background="{StaticResource WindowBackgroundBrush}"
                  BorderBrush="{StaticResource SolidBorderBrush}"
                  BorderThickness="1" >
                    <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="false">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter TargetName="Border" Property="Background" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="#fff"/>

        </Trigger>

        <Trigger Property="IsHighlighted" Value="true">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter TargetName="Border" Property="Background" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>

        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
            <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
            <Setter TargetName="SubmenuBorder" Property="Padding" Value="10"/>
        </Trigger>

        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
        </Trigger>

    </ControlTemplate.Triggers>
</ControlTemplate>

 <!-- SubmenuHeader -->

<ControlTemplate  x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="MenuItem">
    <Border Name="Border" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
                <ColumnDefinition Width="13"/>
            </Grid.ColumnDefinitions>
            <ContentPresenter 
                Name="Icon"
                Margin="6,0,6,0"
                VerticalAlignment="Center"
                ContentSource="Icon"/>
            <ContentPresenter 
                Name="HeaderHost"
                Grid.Column="1"
                ContentSource="Header"
                RecognizesAccessKey="True"/>
            <TextBlock x:Name="InputGestureText"
                Grid.Column="2"
                Text="{TemplateBinding InputGestureText}"
                Margin="5,2,2,2"
                DockPanel.Dock="Right"/>
            <Path 
                Grid.Column="3"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Data="M 0 0 L 0 7 L 4 3.5 Z" 
                Fill="{StaticResource GlyphBrush}" />
            <Popup 
                Name="Popup"
                Placement="Right"
                HorizontalOffset="-4" 
                IsOpen="{TemplateBinding IsSubmenuOpen}"
                AllowsTransparency="True" 
                Focusable="False"
                PopupAnimation="Fade">
                <Border 
                  Name="SubmenuBorder"
                  SnapsToDevicePixels="True"
                  Background="{StaticResource WindowBackgroundBrush}"
                  BorderBrush="{StaticResource SolidBorderBrush}"
                  BorderThickness="1" >
                    <StackPanel  
                        IsItemsHost="True" 
                        KeyboardNavigation.DirectionalNavigation="Cycle" />
                </Border>
            </Popup>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="Icon" Value="{x:Null}">
            <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsHighlighted" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
        </Trigger>
        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
            <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4"/>
            <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

因此，如果我添加我的新控件模板，其中包含“HomeButtonTemplate”键，如我的帖子顶部所示，我将不得不添加一个新的部分（以及所有其他ControlTemplates用于SubmenuItem之类的东西等）。

这些新的ControlTemplates如何知道它们属于同一组控件模板？我觉得我没有正确地问这个。

感谢您提供任何建议。

Answer 1

您通过指定自己的模板完全删除现有模板（这相当复杂），您的模板不再提供必要的功能。控件模板中有一部分用名称PART_Popup标识，用于显示子项。

检查this page是否有链接（Default WPF themes），您可以在其中下载包含模板的默认样式，以查看模板的外观。

另请查看menu templating page，它可以让您了解模板的复杂程度。

Answer 2

这可能有点晚，但是我最近遇到了同样的问题。对我有用的是像这样创建一个StackPanel

<StackPanel ClipToBounds="True"
            Orientation="Horizontal"
            IsItemsHost="True" />

在Border内部的ControlTemplate内部。

留下一些类似的东西。

<ControlTemplate TargetType="Menu">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="#252525"
                            BorderThickness="1" 
                            CornerRadius="5">

                        <StackPanel ClipToBounds="True"
                                    Orientation="Horizontal"
                                    IsItemsHost="True" />
                    </Border>
                </ControlTemplate>

当我将模板应用于我的MenuItem时，它在单击时不再显示下拉列表

2 个答案: