I am attempting to construct a dynamic WPF menu with different appearance for the top level items and the subsequent level items. In particular, I would like my top level items to display a 32 pixel square image on top of the menu caption, and the subsequent items to display a 16 pixel image in the regular Icon location. (I posted a related question some days ago, that one was using templates instead of styles).
The XAML code below produces a menu with the following characteristics:
. All menu items bind to and display the 32 pixel icon, leading me to believe that only the second ItemContainerStyle is being used (the one not in the Resources section).
. The Command and CommandParameter properties bind correctly; when I click a menu item the command is executed.
. The Name property is not bound correctly, all Headers are empty strings. No binding errors are generated for this property in the Output window.
. The template information given in the Grid (which is supposed to apply to the top-level items) is never rendered.
Based on this example I believe that part of the problem may be that I have to move my Resources higher in the XAML tree, to the WrapPanel. When I do this, however, the StaticResources cannot be located in the menu.
How can I modify my menu to apply different styles (or templates -- I'm not picky!) to the top-level items and the other items?
<WrapPanel Height="Auto">
<Menu ItemsSource="{Binding DataContext.EventMenu.TopLevel, ElementName=UserControl}">
<Menu.Resources>
<Image x:Key="MenuIconResource16" Height="16" Width="16" Source="{Binding Icon16}" x:Shared="False" />
<Image x:Key="MenuIconResource32" Height="32" Width="32" Source="{Binding Icon32}" x:Shared="False" />
<HierarchicalDataTemplate x:Key="SubItemStyle" ItemsSource="{Binding Children}">
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="IsEnabled" Value="true"/>
<Setter Property="Command" Value="{Binding Command}" />
<Setter Property="CommandParameter" Value="{Binding EventType}"/>
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="Icon" Value="{StaticResource MenuIconResource16}"/>
<!--<Setter Property="ItemsSource" Value="{Binding Children}"/>-->
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
</HierarchicalDataTemplate>
</Menu.Resources>
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="IsEnabled" Value="true"/>
<Setter Property="Command" Value="{Binding Command}" />
<Setter Property="CommandParameter" Value="{Binding EventType}"/>
<Setter Property="Header" Value="{Binding Name}"/>
<Setter Property="Icon" Value="{StaticResource MenuIconResource32}"/>
<!--<Setter Property="ItemsSource" Value="{Binding Children}"/>-->
<Setter Property="ItemTemplate" Value="{StaticResource SubItemStyle}"></Setter>
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Width="32" Height="32" VerticalAlignment="Center" Source="{Binding Icon32}"/>
<TextBlock Grid.Row="1" Text="{Binding Name}"/>
</Grid>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
</Menu>
</WrapPanel>