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

RadMenuItem DropDownHeight stopped working

2 Answers 25 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Anmol
Top achievements
Rank 1
Anmol asked on 16 Feb 2018, 05:05 AM

Hi,

I had dynamically set DropDownHeight of RadMenuItem, till now it was working. After that I set the template style for telerikNav:RadMenuItem . But now DropDownHeight functionality has stopped working . Attached(style.txt) is the style code for telerikNav:RadMenuItem. Further attached is the top and bottom arrow of menu that are not showing now due to the template implementation. 

view.xaml

 <radNav:RadMenu x:Name="mnuMain"
                        Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
                        Height="27"
                        Style="{StaticResource MainTopMenu}"  />

 <Rectangle x:Name="rctMenuSeparator" 
                   Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"
                   Height="2"
                   Style="{StaticResource MainTopMenuSeparator}" />

 

 

///view.xaml.cs code for setting dropdown

if (menuItem.ParentID == 0 && menuItem.MenuItemType == MenuItemType.ParentNode)
                        {
                            int subMenuChildCount = menuItems.Count(a => a.ParentID == menuItem.MenuItemID);
                            if (subMenuChildCount > 15)
                                menuControl.DropDownHeight = 405; 
                        }

 

// Style.xaml

<Style x:Key="MainTopMenu" TargetType="telerikNav:RadMenu">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="ClickToOpen" Value="False" />
        <Setter Property="Background" Value="{StaticResource MainMenuBackground}" />
        <Setter Property="Foreground" Value="#FFFFFF" />
        <Setter Property="BorderBrush" Value="{StaticResource MainMenuBackground}" />
    </Style>
 <Style x:Key="MainTopMenuSeparator" TargetType="Rectangle">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Fill" Value="#FFC2CFE2" />
    </Style>
 
<Style x:Key="RadMenuItemStyle" TargetType="telerikNav:RadMenuItem">
        <Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource TopLevelHeaderTemplate}" />
    </Style>
    <Style TargetType="telerikNav:RadMenuItem" BasedOn="{StaticResource RadMenuItemStyle}" />

<ControlTemplate TargetType="telerikNav:RadMenuItem" x:Key="SeparatorTemplate">
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" HorizontalAlignment="Left" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}" />
            <Grid Grid.Column="1" Height="2" Margin="{StaticResource MenuItemSeparatorMargin}">
                <Rectangle Height="1" VerticalAlignment="Top" Fill="{StaticResource MenuItemSeparatorTop}" />
                <Rectangle Height="1" VerticalAlignment="Bottom" Fill="{StaticResource MenuItemSeparatorBottom}" />
            </Grid>
        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerikNav:RadMenuItem">
        <Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">

                    <VisualState x:Name="Highlighted">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="#FF009FE3"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ColorAnimation From="Black" To="Black" Storyboard.TargetName="Content" Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.Color)"/>
                        </Storyboard>
                    </VisualState>


                    <VisualState x:Name="Normal" />
                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />


            <Grid x:Name="ContentGrid" Background="Transparent" Margin="{TemplateBinding Padding}" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Path x:Name="Tick" Margin="0 0 4 0" Grid.Column="0" Visibility="Collapsed" FlowDirection="LeftToRight" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" 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="Icon" Margin="0 0 4 0" Grid.Column="0" Content="{TemplateBinding Icon}" ContentTemplate="{TemplateBinding IconTemplate}" />
                <TextBlock x:Name="Content" Grid.Column="1" Text="{TemplateBinding Header}"/>
            </Grid>
            <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="1">
                <Grid >
                    <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                        <telerikChromes:ShadowChrome />
                        <Border BorderThickness="1" BorderBrush="{StaticResource MenuPopupOuterBorder}" Background="{StaticResource MenuPopupBackground}">
                            <Grid>
                                <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}" HorizontalAlignment="Left">
                                    <Rectangle Fill="{StaticResource MenuPopupIconsBackground}" Margin="0 0 2 0" />
                                    <Grid HorizontalAlignment="Right" Margin="{StaticResource MenuPopupIconsSeparatorMargin}">
                                        <Rectangle Width="1" HorizontalAlignment="Right" Margin="0 0 1 0" Fill="{StaticResource MenuPopupIconsSeparatorLeft}" />
                                        <Rectangle Width="1" HorizontalAlignment="Right" Margin="0 0 0 0" Fill="{StaticResource MenuPopupIconsSeparatorRight}" />
                                    </Grid>
                                </Grid>
                                <ScrollViewer  MaxHeight="300" BorderThickness="0" Padding="0" VerticalScrollBarVisibility="Hidden">
                                    <ItemsPresenter Margin="1"/>
                                </ScrollViewer>
                            </Grid>
                        </Border>
                    </Grid>
                </Grid>
            </Popup>
        </Grid>
    </ControlTemplate>

 

Regards,

Anmol

2 Answers, 1 is accepted

Sort by
0
Anmol
Top achievements
Rank 1
answered on 16 Feb 2018, 05:08 AM
Have pasted the code regarding style.txt within the post.
0
Dilyan Traykov
Telerik team
answered on 20 Feb 2018, 02:00 PM
Hello Anmol,

Can you please clarify what are the modifications you wish to make to the default control template of the so that I can get a better understanding of your requirement and assist you further?

For your convenience, I've prepared a small sample project where I've extracted the default template of the RadMenuItem for the Office_Black theme. Please note that you should try to keep all comprising elements in tact to avoid tampering with the existing functionality.

Regards,
Dilyan Traykov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Menu
Asked by
Anmol
Top achievements
Rank 1
Answers by
Anmol
Top achievements
Rank 1
Dilyan Traykov
Telerik team
Share this question
or