WPF: MenuItem icon in the wrong place when using data template

问题

I have the following code:

<Menu>
    <MenuItem ItemsSource="{Binding SomethingMenuItems}" Header="Something"/>
</Menu>

Where MenuItems is a collection of objects of type SomethingMenuItem.

I also have:

<DataTemplate DataType="{x:Type SomethingMenuItem}">
    <MenuItem Header="{Binding OrderTypeName}">
        <MenuItem.Icon>
            <Image Source="{Binding IconName}"/>
        </MenuItem.Icon>
    </MenuItem>
</DataTemplate>

I'd expect to get (I get something like this when I hardcode the menu items):

What I get instead is:

What am I doing wrong?

回答1:

You might want to use ItemContainerStyle instead of DataTemplate. You have to style the container of the data item than just providing a template for data item.

With your DataTemplate, you basically displaying another nested MenuItem as content for each MenuItem generated for your Menu Something, and your inner MenuItem has the image in the correct place. I am attaching VisualTree from Snoop here for your reference.

Below is the Style for the container of the data item (in this case a MenuItem):

<MenuItem ItemsSource="{Binding SomethingMenuItems}" 
          Header="Something">
    <MenuItem.Resources>
        <Image Source="{Binding IconPath}" x:Key="IconImage" x:Shared="False"/>
        <Style TargetType="MenuItem" >
            <Setter Property="Header" Value="{Binding Name}" />
            <Setter Property="Icon" Value="{StaticResource IconImage}" />
        </Style>
    </MenuItem.Resources>
</MenuItem>

You can see no nested MenuItems when you apply the above style, have added image here

With the above style applied, this is how the Menu looks:

Refer to this MSDN page to know more about ItemContainerStyle.

回答2:

So, sthotakura's answer set me on the right track, but the code he posted didn't quite work because the style got applied to the parent menuitem as well.

In case someone else has a similar problem and stumbles on this question, here's the code that works:

<MenuItem ItemsSource="{Binding SomethingMenuItems}" 
          Header="Something">
    <MenuItem.ItemContainerStyle>
        <Style TargetType="MenuItem" >
            <Style.Resources>
                <Image Source="{Binding IconPath}" x:Key="IconImage" x:Shared="False"/>
            </Style.Resources>
            <Setter Property="Header" Value="{Binding Name}" />
            <Setter Property="Icon" Value="{StaticResource IconImage}" />
        </Style>
    </MenuItem.ItemContainerStyle>
</MenuItem>

来源：https://stackoverflow.com/questions/19965464/wpf-menuitem-icon-in-the-wrong-place-when-using-data-template

标签

wpf

menuitem