Question

我正在尝试构建自定义菜单（意味着我想为菜单项设置模板）

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding Source={StaticResource Locator}, Path=Main}">
    <Window.Resources>
        <ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                <Grid VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                    <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="Icon" Value="{x:Null}">
                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                </Trigger>
                <Trigger Property="IsHighlighted" Value="True">
                    <Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                    <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsHighlighted" Value="True"/>
                        <Condition Property="IsEnabled" Value="False"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <HierarchicalDataTemplate DataType="{x:Type local:MenuItemViewModel}" 
                                  ItemsSource="{Binding MenuItems}"
                                  >
            <TextBlock Text="{Binding Caption}" />
        </HierarchicalDataTemplate>
    </Window.Resources>
    <Grid>
        <Menu ItemsSource="{Binding MenuItems}" 
              >
            <Menu.ItemContainerStyle>
                <Style TargetType="{x:Type MenuItem}">
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}" />
                </Style>
            </Menu.ItemContainerStyle>
        </Menu>
    </Grid>
</Window>

和视图模型

public class MainViewModel : ViewModelBase
    {
        public ObservableCollection<MenuItemViewModel> MenuItems { get; set; }

        public MainViewModel()
        {
            MenuItems = new ObservableCollection<MenuItemViewModel>
            {
                new MenuItemViewModel("File")
                {
                    MenuItems = new ObservableCollection<MenuItemViewModel>
                    {
                        new MenuItemViewModel("New"),
                        new MenuItemViewModel("Open"),
                        new MenuItemViewModel("Close"),
                    }
                },
                new MenuItemViewModel("Edit")
                {
                    MenuItems = new ObservableCollection<MenuItemViewModel>
                    {
                        new MenuItemViewModel("Cut"),
                        new MenuItemViewModel("Copy"),
                        new MenuItemViewModel("Paste"),
                    }
                },

            };

        }
    }

问题是我看到了第一个层次结构 - “文件”和“编辑” 但不是他们的孩子......

在窥探中我可以看到他们有孩子。

如果我删除这一行：

<Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}" />

它也按预期工作...... 问题是我需要为菜单项设置模板......

Answer 1

您的自定义模板中没有任何内容可显示子项。每当您想要创建自定义控件模板时，都应首先查找example template以确保您没有遗漏任何重要内容。

在example template中，您会注意到它包含以下内容：

<StackPanel  
    IsItemsHost="True" 
    KeyboardNavigation.DirectionalNavigation="Cycle" />

任何ItemsControl（MenuItem扩展）都需要Panel元素作为其ItemsHost。因此，请在模板中的某处添加此元素。

如果所有其他方法都失败了，请尝试完全按原样使用示例模板。然后，您可以使用它来更好地理解它。

自定义菜单内容

1 个答案: