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
Rank 1
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