WPF MenuItem Header 和 HeaderTemplate

WPF MenuItem Header and HeaderTemplate

提问by Kai Wang

I want to bind a list of KeyValuePair to a list of MenuItems. I thought I should use MenuIten.HeaderTemplate, but it didn't work. I only got blank headers.

我想将 KeyValuePair 列表绑定到 MenuItems 列表。我想我应该使用 MenuIten.HeaderTemplate，但它没有用。我只有空白标题。

            <MenuItem 
                Header="Template" 
                ItemsSource="{Binding Path=Samples}">
                <MenuItem.ItemTemplate>
                    <DataTemplate>
                        <MenuItem>
                            <MenuItem.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Path=Key}" FontWeight="Bold"/>
                                        <TextBlock Text="{Binding Path=Value}" FontStyle="Italic" Margin="5,0,0,0"/>
                                    </StackPanel>
                                </DataTemplate>
                            </MenuItem.HeaderTemplate>                            </MenuItem>
                    </DataTemplate>
                </MenuItem.ItemTemplate>
            </MenuItem>

Then I replaced MenuItem.HeaderTemplate with MenuItem.Header, it worked.

然后我用 MenuItem.Header 替换了 MenuItem.HeaderTemplate，它起作用了。

            <MenuItem 
                Header="Template" 
                ItemsSource="{Binding Path=Samples}">
                <MenuItem.ItemTemplate>
                    <DataTemplate>
                        <MenuItem>
                            <MenuItem.Header>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Path=Key}" FontWeight="Bold"/>
                                    <TextBlock Text="{Binding Path=Value}" FontStyle="Italic" Margin="2,0,0,0"/>
                                </StackPanel>
                            </MenuItem.Header>
                        </MenuItem>
                    </DataTemplate>
                </MenuItem.ItemTemplate>
            </MenuItem>

Can anyone explain to me why HeaderTemplate doesn't work here?

谁能向我解释为什么 HeaderTemplate 在这里不起作用？

采纳答案by Micah

Because the HeaderTemplate doesn't have access to the data being bound to the menu item.

因为 HeaderTemplate 无权访问绑定到菜单项的数据。

回答by Kai Wang

Micah is correct. In the first approach I told the menu item how to template itself but never told it what data it binds to! The following works:

弥迦是对的。在第一种方法中，我告诉菜单项如何对自身进行模板化，但从未告诉它绑定到哪些数据！以下工作：

            <MenuItem 
            Header="Template" 
            ItemsSource="{Binding Path=Samples}">
            <MenuItem.ItemTemplate>
                <DataTemplate>
                    <MenuItem Header="{Binding}">
                        <MenuItem.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Path=Key}" FontWeight="Bold"/>
                                    <TextBlock Text="{Binding Path=Value}" FontStyle="Italic" Margin="5,0,0,0"/>
                                </StackPanel>
                            </DataTemplate>
                        </MenuItem.HeaderTemplate>
                     </MenuItem>
                </DataTemplate>
            </MenuItem.ItemTemplate>
        </MenuItem>

回答by Artru

The purpose of the Templateis to add some elements to the VisualTree. DataTemplate is used for the sub-items ([Sub]MenuItem, ListBoxItem in ListBox, and so on) and is applied to the items holder, it is contrary to the ControlTemplate, wich is applied to the control itself. What you actually did by this

模板的目的是向 VisualTree 添加一些元素。DataTemplate 用于子项（[Sub]MenuItem、ListBox 中的 ListBoxItem 等）并应用于项目持有者，它与 ControlTemplate 相反，它应用于控件本身。你实际上做了什么

<MenuItem 
            Header="Template" 
            ItemsSource="{Binding Path=Samples}">
            <MenuItem.ItemTemplate>
                <DataTemplate>
                       ....
   </DataTemplate>
  </MenuItem.ItemTemplate>
</MenuItem>

is telling "I want take MenuItem contentand Insert the data, wich must be visualized". And then insert this insted dots:

正在告诉“我想获取 MenuItem内容并插入数据，必须可视化”。然后插入这个插入点：

 <MenuItem Header="{Binding}">... </MenuItem>

So you are inserting additional menu item to the currently iterating menu item. I can't see the point. Next is more clear:

因此，您将附加菜单项插入到当前迭代的菜单项中。我看不出重点。接下来就更清楚了：

 <MenuItem Header="Template" ItemsSource="{Binding Samples}">
         <MenuItem.Resources>
            <Style TargetType="{x:Type MenuItem}">
               <Setter Property="Command" Value="{Binding SomeCommand}" />
            </Style>            
        </MenuItem.Resources>
       <MenuItem.ItemTemplate>
          <DataTemplate>
              <TextBlock Text="{Binding Name}" />
          </DataTemplate>             
       </MenuItem.ItemTemplate>
    </MenuItem>

回答by Thomas Levesque

The HeaderTemplate definition should be a DataTemplate, not direct UI content :

HeaderTemplate 定义应该是一个 DataTemplate，而不是直接的 UI 内容：

...
<MenuItem.HeaderTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Path=Key}" FontWeight="Bold"/>
            <TextBlock Text="{Binding Path=Value}" FontStyle="Italic" Margin="2,0,0,0"/>
        </StackPanel>
    </DataTemplate>
</MenuItem.HeaderTemplate>
...