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

RadMenu styles top level and items differently

7 Answers 211 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Phil asked on 26 Sep 2012, 02:22 PM
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


7 Answers, 1 is accepted

Sort by
0
Rosen Vladimirov
Telerik team
answered on 27 Sep 2012, 06:42 AM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Phil
Top achievements
Rank 1
answered on 27 Sep 2012, 01:41 PM
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
0
Phil
Top achievements
Rank 1
answered on 27 Sep 2012, 02:29 PM
I have an example project showing the problem but can't attach it.
0
Rosen Vladimirov
Telerik team
answered on 27 Sep 2012, 02:41 PM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Phil
Top achievements
Rank 1
answered on 27 Sep 2012, 02:54 PM
Still not working I'm afraid
0
Accepted
Rosen Vladimirov
Telerik team
answered on 28 Sep 2012, 11:30 AM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Phil
Top achievements
Rank 1
answered on 28 Sep 2012, 01:00 PM
Thanks Rosen,

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

Phil
Tags
Menu
Asked by
Phil
Top achievements
Rank 1
Answers by
Rosen Vladimirov
Telerik team
Phil
Top achievements
Rank 1
Share this question
or