SubMenuItemTemplate only works one level down

4 posts, 0 answers
  1. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 03 Nov 2009 Link to this post

    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
  2. Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 05 Nov 2009 Link to this post

    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.
  3. DevCraft banner
  4. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 05 Nov 2009 Link to this post

    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.
  5. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 10 Nov 2009 Link to this post

    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.
Back to Top