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
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.
But I need different images for each of the top level menu items (People, Diagnostics, Engine Data etc)
Is this possible?
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>