Vertical Menu with Large Icons and No Text

[Michael]

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,

[Dani]

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