Why does my MenuItem have an Icon when I have overridden the DataTemplate?

问题

I have successfully implement a WPF menu where the top-level items are drawn as large buttons and the lower level items are drawn as standard menu items (see my previous questions here and here).

In my original attempt at this my lower-level item template (SubItemTemplate in the example below) contained an image and a textblock. The result was something that looked like a normal menu item with an empty Icon area and the image next to the text in the text part of the menu item. I was not expecting to see the icon area in the visual display since I thought that the entire visual display would be determined by the contents of my template. The top-level template (TopLevelItemTemplate) does not have any empty icon area visible.

When I removed my image from teh lower-level template and replaced it with a style-setter for the Icon property, I got the display that I wanted.

I do not understand how and why the Icon property exists on my lower-level item DataTemplate.

Here's my code. The property HasParent is used to distinguish menu items that are not top-level (that is, the ones that are drawn with the SubItemTemplate). The section I don't understand is the DataTrigger.

Why is there an Icon property available inside that trigger?

<UserControl.Resources>
    <Image x:Key="MenuIconResource16" Height="16" Width="16" Source="{Binding Icon32}" x:Shared="False" />

    <HierarchicalDataTemplate x:Key="TopLevelItemTemplate" ItemsSource="{Binding Children}">
        <StackPanel VerticalAlignment="Bottom" Orientation="Vertical">
            <Image Width="32" Height="32" VerticalAlignment="Center" Source="{Binding Icon32}" ToolTip="{Binding UserHint}" />
            <TextBlock Text="{Binding Name}"/>
        </StackPanel>
    </HierarchicalDataTemplate>
    <HierarchicalDataTemplate x:Key="SubItemTemplate" ItemsSource="{Binding Children}">
        <TextBlock Text="{Binding Name}"/>
    </HierarchicalDataTemplate>
</UserControl.Resources>

<WrapPanel Height="Auto">
   <Menu ItemsSource="{Binding DataContext.EventMenu.TopLevel, ElementName=UserControl}" ItemTemplateSelector="{StaticResource MenuItemTemplateSelector}">
       <Menu.ItemContainerStyle>
           <Style TargetType="{x:Type MenuItem}">
               <Setter Property="Command" Value="{Binding Command}" />
               <Setter Property="CommandParameter" Value="{Binding EventType}"/>
               <Style.Triggers>
                   <DataTrigger Binding="{Binding HasParent}" Value="true">
                       <Setter Property="Icon" Value="{StaticResource MenuIconResource16}"/>
                   </DataTrigger>
               </Style.Triggers>
           </Style>
       </Menu.ItemContainerStyle>
   </Menu>
</WrapPanel>

回答1:

I thought that the entire visual display would be determined by the contents of my template.

@dkozl noted the difference between DataTemplate and Template -- that is the important distinction. A data template is a XAML fragment that the owning control uses as part of the overall control, which may or may not include other (customizable or hard-coded) visual elements, and/or other data templates. The control template is where this visual structure of the control is defined. If you set/override a control template, then your expectation of not seeing any other visual content, will hold true.

The top-level template (TopLevelItemTemplate) does not have any empty icon area visible.

The other thing to note here is that the default style for Menu defines multiple control templates for its MenuItems. These templates are applied depending on the role "TopLevelHeader", "TopLevelItem", "SubmenuHeader", and "SubmenuItem". So you will see different behavior for these different menu items. Take a look at the default styles/templates, which should be illuminating (although they are kind of complex).

Why is there an Icon property available inside that trigger?

A style trigger has the capability of modifying any dependency property of the control it is applied to. Since the style trigger in question is being applied to the MenuItem control, it can modify the Icon dependency property, which is owned by that control.

来源：https://stackoverflow.com/questions/27746792/why-does-my-menuitem-have-an-icon-when-i-have-overridden-the-datatemplate