SubMenuItemTemplate only works one level down

[Terry]

I am manually adding items to a menu with the menu's .Add method.  I am also adding subitems to the items with their .Add method.  When I expand the menu, I see the styling from the control template one level down, but the not at the second level.  For instance

Level0A
    Level1A
    Level1B
        Level2A
        Level2B

The Level1 items are styled as per the subitem template, but the Level2 items are not.  Is this because I am adding he items one at a time.  If I built the menu structure and bound it all at once, would I get a better result?  If so, is there an example of populating a 3-tiered menu programatically in this way?

Thanks,

Terry

[Kaloyan]

Hi Terry,

I am not sure if I am getting correctly the problem you are experiencing. Did you mean that you are applying a custom menu style and this style is not being applied for some of the items. If so please send us a small app. We will greatly appreciate that act.

Regards,
Kaloyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Terry]

Hi Kaloyan:

The UI won't let me attach a zip, xaml, or cs, only  .gif, .jpg, .jpeg, .png.  So here is sample code inline.  I create a 3-level menu in c#:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();

            radMenu.Items.Clear();

            RadMenuItem item1 = new RadMenuItem();
            item1.Header = "Item 1";
            radMenu.Items.Add( item1 );

            RadMenuItem item2 = new RadMenuItem();
            item2.Header = "Item 2";
            item1.Items.Add( item2 );

            RadMenuItem item3 = new RadMenuItem();
            item3.Header = "Item 3";
            item2.Items.Add( item3 );
        }
    }
}

Here is the xaml:

<UserControl xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication1.MainPage" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    Width="640" Height="480">
    <UserControl.Resources>
        <LinearGradientBrush x:Key="RadMenuTabBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFDDB73" Offset="1" />
            <GradientStop Color="#FFFEF4CA" Offset="0" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="RadMenuPopUpOuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFEAEAEA" Offset="0" />
            <GradientStop Color="#FFC4C4C4" Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="RadMenuPopUp" Color="Red" />
        <SolidColorBrush x:Key="BorderInnerBrush" Color="#FF979994" />
        <SolidColorBrush x:Key="SeparatorLine1" Opacity=".5" />
        <SolidColorBrush x:Key="RadMenu_PopupBackgroundLeftCol" Opacity=".5" />
        <SolidColorBrush x:Key="SeparatorLine2" Opacity=".5" />
        <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF" />
        <SolidColorBrush x:Key="RadMenuTabBorder_pressed" Color="#FFFA8C3B" />
        <LinearGradientBrush x:Key="RadMenuTabBackground_pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFEB85D" Offset="1" />
            <GradientStop Color="#FFFB933C" Offset="0" />
        </LinearGradientBrush>
        <ControlTemplate x:Key="MenuTemplate" TargetType="telerikNavigation:RadMenuItem">
            <Grid x:Name="RootElement">
                <Grid.Background>
                    <LinearGradientBrush EndPoint="1,1" StartPoint=".99,0">
                        <GradientStop Color="White" Offset="0" />
                        <GradientStop Color="#10626091" Offset="0.608" />
                        <GradientStop Color="White" Offset="0.8" />
                        <GradientStop Color="#80626091" Offset="1" />
                    </LinearGradientBrush>
                </Grid.Background>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStateGroup">
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadMenuTabBorder_pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadMenuTabBackground_pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledBox" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStateGroup">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Icon" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="GlyphPanel" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                        <VisualState x:Name="HideIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Icon" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                <Border x:Name="Bg" Margin="2" Opacity="0" Background="{StaticResource RadMenuTabBackground}" BorderBrush="#FFFFBC6B" BorderThickness="1" Padding="2 0" />
                <telerik:RadDockPanel MinHeight="26">
                    <ContentPresenter x:Name="Icon" Margin="4,0,0,0" VerticalAlignment="Center" Content="{TemplateBinding Icon}" />
                    <Path x:Name="GlyphPanel" Fill="{TemplateBinding Foreground}" Margin="4,0,0,0" VerticalAlignment="Center" Visibility="Collapsed" Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />
                    <ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="8,2,8,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                </telerik:RadDockPanel>
                <Popup x:Name="PART_Popup">
                    <Border x:Name="DropDownBorder" BorderBrush="{StaticResource RadMenuPopUpOuterBorder}" BorderThickness="1" CornerRadius="2">
                        <Border x:Name="backgroundBorder" Background="{StaticResource RadMenuPopUp}" BorderBrush="{StaticResource BorderInnerBrush}" BorderThickness="1" CornerRadius="1">
                            <Grid>
                                <Border HorizontalAlignment="Left" Width="25" BorderBrush="{StaticResource SeparatorLine1}" BorderThickness="0 0 1 0">
                                    <Border Width="24" Background="{StaticResource RadMenu_PopupBackgroundLeftCol}" BorderBrush="{StaticResource SeparatorLine2}" BorderThickness="0 0 1 0" />
                                </Border>
                                <ItemsPresenter />
                            </Grid>
                        </Border>
                    </Border>
                </Popup>
                <Rectangle x:Name="DisabledBox" Fill="{StaticResource DisabledBrush}" IsHitTestVisible="False" Visibility="Collapsed" />
            </Grid>
        </ControlTemplate>
        <Style x:Key="MenuItemStyle" TargetType="telerikNavigation:RadMenuItem">
            <Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuTemplate}" />
            <Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuTemplate}" />
            <Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuTemplate}" />
            <Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuTemplate}" />
            <Setter Property="Template" Value="{StaticResource MenuTemplate}" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <telerikNavigation:RadMenu x:Name="radMenu" Orientation="Vertical"
            ItemContainerStyle="{StaticResource MenuItemStyle}" Background="White">
        </telerikNavigation:RadMenu>
    </Grid>
</UserControl>

As I understand ItemContainerStyle, it is supposed to style all elements added programatically, but it only styles one level down, hence Item2 is defined by the style, and item3 is not, so the two popups are different.  If this is the way it is supposed to work, how can I add the MenuItemStyle to item3 programatically, or alternately add it as ItemContainerStyle for item2?

Thanks,

Terry

PS: If you try to attach a file of an invalid type (xaml in my case), in this forum and then delete the filename, the error remains and won't let you post.  I had to attach a png and remove it to get around this.  Someone should fix that.

[Valeri Hristov]

Hello Terry,

The behavior you observe is correct - RadMenu is a hierarchical control and when you set ItemContainerStyle, only its direct children would be affected. You will have to set ItemContainerStyle on each RadMenuItem that has children. I would recommend data-binding the control, since the telerik:HierarchicalDataTemplate has ItemContainerStyle setter, that will be automatically applied on the corresponding items:
http://demos.telerik.com/silverlight/#Menu/DataBinding

The example above does not use ItemContainerStyle, but you could easily add the property.

Other option would be to create a custom theme for RadMenu, that will be automatically applied on its children and you will not need ItemContainerStyle for setting the template properties:
http://www.telerik.com/help/silverlight/extend-and-modify-builtin-themes.html

Best wishes,
Valeri Hristov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.