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

Vertical Menu with Large Icons and No Text

1 Answer 52 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 25 Jun 2010, 01:36 AM
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,



1 Answer, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 29 Jun 2010, 09:55 AM
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
Tags
Menu
Asked by
Michael
Top achievements
Rank 1
Answers by
Dani
Telerik team
Share this question
or