RadMenu styles top level and items differently

[Phil]

I am try to style the Radmenu so that the top level shows only an image which I can lookup use an IValueConverter and the lower level has styled text items as shown in the Idial.png - Ideal ;-)

So far I have got the data loading as shown in the Current.png but I am struggling to understand how to style the menu.

<telerik:HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding SubMenuItems}">
    <TextBlock Text="{Binding Content}"/>
</telerik:HierarchicalDataTemplate>

 
<telerik:RadMenu x:Name="Businesses" 
                    ItemsSource="{Binding MenuItems}" ItemTemplate="{StaticResource MenuItemTemplate}"
                    Margin="5,10" Background="{x:Null}" Orientation="Vertical" ClickToOpen="True"  >
</telerik:RadMenu>

MODEL

Imports System.Collections.ObjectModel
Public Class MenuModel
    Public Enum MenuItemTypes As Integer
        Link
        SpecialLink
        TopLevel
        TopLevelSection
        Title
        Paragraph
        Gallery
        Image
    End Enum

    Property ID As Integer
    Property Content As String
    Property Type As MenuItemTypes
    Property IsSeperator As Boolean
    Property SubMenuItems As IEnumerable(Of MenuModel)

End Class

[Rosen Vladimirov]

Hi Phil,

If you want to modify only the top level items you'll have to modify the TopLevelHeaderTemplate (which is used when a top level item has children) and TopLevelItemTemplate (used when the top level item doesn't have children). You can use something like this:

<ControlTemplate x:Key="template" TargetType="telerik:RadMenuItem">
    <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
        <StackPanel>
            <Image Source="{Binding ImageSource}" Stretch="None" Width="32" Height="32"/>
        </StackPanel>
    </Grid>
</ControlTemplate>

And then you should set the templates:

<Style TargetType="telerik:RadMenuItem" x:Key="ItemStyle">
    <Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource template}"/>
    <Setter Property="TopLevelItemTemplateKey" Value="{StaticResource template}"/>
</Style>

More information about templates used in RadMenu you can find here.

Don't hesitate to contact us if you have any problems with RadControls.

Greetings,
Rosen Vladimirov
the Telerik team

[Phil]

Hi Rosen,

Not sure I follow...

I have create the below in the style.xaml

<!--CONTROL TEMPLATES-->    <br>
    <ControlTemplate x:Key="template" TargetType="telerik:RadMenuItem"><br>
        <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}"><br>
            <StackPanel><br>
                <Image Source="{Binding ImageSource}" Stretch="None" Width="32" Height="32"/><br>
            </StackPanel><br>
        </Grid><br>
    </ControlTemplate><br>
<br>
<!--STYLES--><br>
    <Style TargetType="telerik:RadMenuItem" x:Key="ItemStyle"><br>
        <Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource template}"/><br>
    </Style>

This is part of my Silverlight Page

        <telerik:HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding SubMenuItems}"><br>
            <Button CommandParameter="{Binding}" HorizontalAlignment="Center"><br>
                <Image Source="{Binding ID, Converter={StaticResource ImageConverter}}" /><br>
            </Button><br>
        </telerik:HierarchicalDataTemplate><br>
<br>
                <telerik:RadMenu x:Name="Businesses" <br>
                                    ItemsSource="{Binding MenuItems}" ItemTemplate="{StaticResource MenuItemTemplate}"<br>
                                    Margin="5,10" Background="{x:Null}" Orientation="Vertical" ClickToOpen="True"  ><br>
<br>
                </telerik:RadMenu>

While this lets me style the top level items it now does not show the lower level items.

If I use my original Data Template the lower level items show

        <telerik:HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding SubMenuItems}"><br>
            <TextBlock Text="{Binding Content}"/><br>
        </telerik:HierarchicalDataTemplate>

See the attachments

[Phil]

I have an example project showing the problem but can't attach it.

[Rosen Vladimirov]

Hi Phil,

You just have to modify a little bit more the ContentTemplate for the TopLevelItems:

<ControlTemplate x:Key="template" TargetType="telerik:RadMenuItem">
    <Grid>
        <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
            <StackPanel>
                <Image Source="{Binding ImageSource}" Stretch="None" Width="32" Height="32"/>
            </StackPanel>
        </Grid>
        <Popup x:Name="PART_Popup">
            <Border BorderThickness="1" BorderBrush="Black" Background="Gray">
                <ItemsPresenter Margin="1" />
            </Border>
        </Popup>
    </Grid>
</ControlTemplate>

After adding this Popup you'll be able to see the subitems.

Hopefully this helps.

Regards,
Rosen Vladimirov
the Telerik team

[Phil]

Still not working I'm afraid

[Rosen Vladimirov]

Hi Phil,

I'm sending you a project where I've set the TopLevelHeaderTemplate and TopLevelItemTemplate. As you can see I've added an arrow and Popup to the TopLevelHeaderTemplate.

Please check the attachment and inform me if it doesn't fit your needs.

All the best,
Rosen Vladimirov
the Telerik team

[Phil]

Thanks Rosen,

Its working. I just need to style the popup container and I'm done.

Phil