This is a migrated thread and some comments may be shown as answers.

Image in TopLevelItemStyle

1 Answer 103 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Phil asked on 28 Aug 2013, 02:18 PM
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>

1 Answer, 1 is accepted

Sort by
0
Phil
Top achievements
Rank 1
answered on 28 Aug 2013, 02:34 PM
Never mind. I have figured it out
Tags
Menu
Asked by
Phil
Top achievements
Rank 1
Answers by
Phil
Top achievements
Rank 1
Share this question
or