Vertical Menu with Large Icons and No Text

2 posts, 0 answers
  1. Michael
    Michael avatar
    12 posts
    Member since:
    May 2008

    Posted 24 Jun 2010 Link to this post

    I'm trying to make a menu that displays vertically along the side of the screen and displays only icons.  The icons are relatively large - 100px by 100px or so, each subitem will also be icons and only tooltips as text.  I'm having a lot of trouble with this and am wondering what I'm doing wrong.  I'm new to using this control so apologies if this is rudimentary.

    Here is my code

           <telerik:RadMenu Orientation="Vertical">  
                <telerik:RadMenu.Items> 
                    <telerik:RadMenuItem Header="Item 1">  
                        <telerik:RadMenuItem.Items> 
                            <telerik:RadMenuItem Header="Item 1 - 1">  
                                <telerik:RadMenuItem.Icon> 
                                    <Grid> 
                                        <Border VerticalAlignment="Center"   
                                                HorizontalAlignment="Center"   
                                                BorderBrush="Red"   
                                                Width="30"   
                                                Height="30"   
                                                BorderThickness="2"></Border> 
                                    </Grid> 
                                </telerik:RadMenuItem.Icon> 
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem  Header="Item 1 - 2">  
                                <telerik:RadMenuItem.Icon> 
                                    <Image Height="101" HorizontalAlignment="Left" Name="Image1" Stretch="None" Width="101" Source="/RadControlsSilverlightApp1;component/images/arrivals.jpg" UseLayoutRounding="True" /> 
                                </telerik:RadMenuItem.Icon> 
                            </telerik:RadMenuItem> 
                        </telerik:RadMenuItem.Items> 
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem Header="Item 2">  
                        <telerik:RadMenuItem.Icon> 
                            <Grid Width="60"   
                                          Height="60">  
                                <Border VerticalAlignment="Center"   
                                                HorizontalAlignment="Center"   
                                                BorderBrush="Red"   
                                                Width="30"   
                                                Height="30"   
                                                BorderThickness="2"></Border> 
                            </Grid> 
                        </telerik:RadMenuItem.Icon> 
                        <telerik:RadMenuItem.Items> 
                            <telerik:RadMenuItem Header="Item 2 - 1">  
                                <telerik:RadMenuItem.Icon> 
                                    <Grid Width="60"   
                                          Height="60">  
                                        <Border VerticalAlignment="Center"   
                                                HorizontalAlignment="Center"   
                                                BorderBrush="Red"   
                                                Width="30"   
                                                Height="30"   
                                                BorderThickness="2"></Border> 
                                    </Grid> 
                                </telerik:RadMenuItem.Icon> 
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem Header="Item 2 - 2">  
                                <telerik:RadMenuItem.Icon> 
                                    <Grid Width="60"   
                                          Height="60">  
                                        <Border VerticalAlignment="Center"   
                                                HorizontalAlignment="Center"   
                                                BorderBrush="Red"   
                                                Width="30"   
                                                Height="30"   
                                                BorderThickness="2"></Border> 
                                    </Grid> 
                                </telerik:RadMenuItem.Icon> 
                            </telerik:RadMenuItem> 
                        </telerik:RadMenuItem.Items> 
                    </telerik:RadMenuItem> 
                </telerik:RadMenu.Items> 
            </telerik:RadMenu> 

    However the icon is getting completely chopped off. 

    Any ideas how I can fix this?  See the attachment - that shows the cutoff - I don't need text in the menu at all, but taking it out doesn't stop it from getting cut off.

    Thanks in advance,



  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 29 Jun 2010 Link to this post

    Hello Michael,

    Thank you for contacting us.

    You can change the content which displays in the RadMenuItems by removing the Header property and adding the HeaderTemplate  property like so:

    <telerik:RadMenuItem HeaderTemplate="{StaticResource MyHeaderTemplate}">
       <telerik:RadMenuItem  HeaderTemplate="{StaticResource MySubHeaderTemplate}" />
       <telerik:RadMenuItem  HeaderTemplate="{StaticResource MySubHeaderTemplate}" /> 
    </telerik:RadMenuItem>

    This code will work assuming you have defined MyHeaderTemplate and MySubHeaderTemplate DataTemplates in UserControl.Resources of your page:

    <DataTemplate x:Key="MyHeaderTemplate">
         <Image Source="Images/design.jpg" Width="80" Height="54" Stretch="UniformToFill" />
    </DataTemplate>
      
    <DataTemplate x:Key="MySubHeaderTemplate">
         <Image Source="Images/entertainment.jpg" Width="80" Height="54" Stretch="UniformToFill" />
    </DataTemplate>
     

    Additionally, you have the freedom to include whatever you like inside these DataTemplates, be it only a single image or data bound image.

    In order to have a consistent look across all menu items and submenu items, however, you would better edit all Control Templates  responsible for the items. The following Control Templates can be generated in Expression Blend by going to Object > Edit Additional Templates:

    ControlTemplate x:Key="TopLevelHeaderTemplate"
    ControlTemplate x:Key="TopLevelItemTemplate"
    ControlTemplate x:Key="SubMenuHeaderTemplate"
    ControlTemplate x:Key="SubMenuItemTemplate"


    All of those four templates contain a Grid which separates the menu item content in two columns - one for the icon and one for the textual content. You can edit them as you like and may be leave just one grid column to hold the content.

    I hope this will help you achieve your goal. Please get back to us if you have any difficulties and if you need further help.


    Regards,
    Dani
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
Back to Top