Image in TopLevelItemStyle

2 posts, 0 answers
  1. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 28 Aug 2013 Link to this post

    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>

  2. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 28 Aug 2013 Link to this post

    Never mind. I have figured it out
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top