RadMenu styles top level and items differently

8 posts, 1 answers
  1. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 26 Sep 2012 Link to this post

    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


  2. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 27 Sep 2012 Link to this post

    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.

  3. DevCraft banner
  4. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 27 Sep 2012 Link to this post

    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
  5. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 27 Sep 2012 Link to this post

    I have an example project showing the problem but can't attach it.
  6. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 27 Sep 2012 Link to this post

    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.

  7. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 27 Sep 2012 Link to this post

    Still not working I'm afraid
  8. Answer
    Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 28 Sep 2012 Link to this post

    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.

  9. Phil
    Phil avatar
    23 posts
    Member since:
    Sep 2010

    Posted 28 Sep 2012 Link to this post

    Thanks Rosen,

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

    Phil
Back to Top
DevCraft banner