I am currently looking at the RadMenu and specifically your Customisation example from the Demos and was wondering if its possible to have a different image for each of the TopLevelItem's
From the demos
<Style x:Key="TopLevelItemStyle" TargetType="telerik:RadMenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadMenuItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Highlighted">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="HighlightVisual" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="HighlightVisual" Fill="{StaticResource TopLevelItemMouseOver}" Opacity="0" />
<Image Source="/EPMS UI;component/Assets/Images/Diagnostics.png" Width="180" Height="100" Margin="5"/>
<!--<TextBlock x:Name="Text" Text="{TemplateBinding Header}" TextDecorations="None" Foreground="{StaticResource TopLevelItemForeground}" FontWeight="Bold" Margin="20 6 40 6" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="14"/>-->
<Path x:Name="DropDownArrow" Fill="{StaticResource TopLevelItemForeground}" Data="M0,0 L2,0 1,1" Stretch="Uniform" Width="7" Height="5" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="8 0 20 0" />
<Popup x:Name="PART_Popup">
<Border x:Name="PopupContent" BorderBrush="{StaticResource TopLevelPopupBorder}" BorderThickness="1" Background="{StaticResource TopLevelPopupBackground}" Padding="6">
<Border Background="{StaticResource TopLevelInnerBackground}" BorderThickness="1" BorderBrush="{StaticResource TopLevelInnerBorderBrush}">
<ItemsPresenter />
</Border>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can see that I have replaced the original TextBlock with and Image control and if I hard code it the menu appear as I need it.
<Image Source="/EPMS UI;component/Assets/Images/Diagnostics.png" Width="180" Height="100" Margin="5"/>
But I need different images for each of the top level menu items (People, Diagnostics, Engine Data etc)
Is this possible?
<telerik:RadMenu Style="{StaticResource MenuStyle}">
<telerik:RadMenuItem Header="People">
<telerik:RadMenuItem.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="340" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</telerik:RadMenuItem.ItemsPanel>
<telerik:RadMenuGroupItem Header="People" Style="{StaticResource MenuGroupItemStyle}">
<telerik:RadMenuItem Icon="/Epms Ui;component/Assets/Images/users.png" Style="{StaticResource IconItemStyle}" Tag="User Maintenance">
<telerik:RadMenuItem.Header>
<StackPanel>
<TextBlock Text="User Maintenance" Style="{StaticResource SubHeader}" />
<TextBlock Text="Allows the creation of user accounts and the resetting of user passwords" Style="{StaticResource ParagraphStyle}" />
</StackPanel>
</telerik:RadMenuItem.Header>
</telerik:RadMenuItem>
</telerik:RadMenuGroupItem>
</telerik:RadMenuItem>
<telerik:RadMenuItem Header="Diagnostics">
<telerik:RadMenuItem Header="Audit List"/>
<telerik:RadMenuItem Header="Label Print Queue"/>
</telerik:RadMenuItem>..
<telerik:RadMenuItem Header="Engine Data">
<telerik:RadMenuItem Header="Engine Types"/>
<telerik:RadMenuItem Header="Engine Labels"/>
<telerik:RadMenuItem Header="Engine Numbers"/>
<telerik:RadMenuItem Header="Engine Characteristics"/>
<telerik:RadMenuItem Header="Mainline Results"/>
<telerik:RadMenuItem Header="Six Cylinder line Results"/>
</telerik:RadMenuItem>
<telerik:RadMenuItem Header="SAP">
<telerik:RadMenuItem Header="Import SAP Batches"/>
<telerik:RadMenuItem Header="SAP Interface Status"/>
<telerik:RadMenuItem Header="Re-order Batches"/>
<telerik:RadMenuItem Header="Re-order Six Cylinder Batches"/>
<telerik:RadMenuItem Header="Build Plan Monitor"/>
</telerik:RadMenuItem>
<telerik:RadMenuItem Header="Schedules">
<telerik:RadMenuItem Header="SAP Schedule"/>
</telerik:RadMenuItem>
<telerik:RadMenuItem Header="Reporting">
<telerik:RadMenuItem Header="Documents"/>
</telerik:RadMenuItem>
</telerik:RadMenu>