Spacing problems with RadMenu...

[Rob]

I am currently trying to develop a style for our application's toolbar using the RadMenu.  There are 3 types of "buttons" that we will have (*2 some will have dropdown options and some won't):
-Text Only
-Text + Icon
-Icon Only

Here are my templates:

 

 

 

<ControlTemplate x:Key="TopLevelHeaderTemplate2" TargetType="TelerikNavigationControls:RadMenuItem">

 

 

<Grid x:Name="RootElement" Background="Transparent" Cursor="Hand">

 

 

 

<Grid.RowDefinitions>

 

 

<RowDefinition Height="20" />

 

 

</Grid.RowDefinitions>

 

 

 

<Grid.ColumnDefinitions>

 

 

<ColumnDefinition Width="Auto" />

 

 

</Grid.ColumnDefinitions>

 

 

 

<vsm:VisualStateManager.VisualStateGroups>

 

 

 

<vsm:VisualStateGroup x:Name="CommonStateGroup">

 

 

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

 

 

<vsm:VisualState x:Name="Highlighted">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="Background" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_MouseOverBackground}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_NormalBorder}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

<vsm:VisualState x:Name="Focused">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="Background" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_SelectedBackground}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_NormalBorder}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

<vsm:VisualState x:Name="Disabled">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBox" Storyboard.TargetProperty="Visibility" Duration="0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Visible}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

</vsm:VisualStateGroup>

 

 

 

<vsm:VisualStateGroup x:Name="CheckStateGroup">

 

 

<vsm:VisualState x:Name="Checked" />

 

 

<vsm:VisualState x:Name="Unchecked" />

 

 

<vsm:VisualState x:Name="HideIcon">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon" Storyboard.TargetProperty="Visibility" Duration="0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Collapsed}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

</vsm:VisualStateGroup>

 

 

</vsm:VisualStateManager.VisualStateGroups>

 

 

<Border x:Name="MenuButtonBackground" Grid.Row="0" Grid.Column="0" Background="Transparent" BorderThickness="1" BorderBrush="Transparent" CornerRadius="2" />

 

 

<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Margin="0">

 

 

 

<!-- Icon -->

 

 

<ContentPresenter x:Name="Icon" Margin="3,0,3,0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Icon}" />

 

 

 

<!-- Checkmark - Not Used In This Style -->

 

 

<Path x:Name="GlyphPanel" Width="0" Height="0" Opacity="0" Margin="0" Visibility="Collapsed" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Data="" />

 

 

<!-- Text Caption -->

 

 

<ContentPresenter x:Name="Content" Margin="3,0,3,0" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

 

 

</StackPanel>

 

 

<Popup x:Name="PART_Popup">

 

 

 

<Border BorderBrush="Red" BorderThickness="1,0,1,1">

 

 

<Border BorderBrush="{StaticResource RadMenu_PopupShadowBorder1}" BorderThickness="1,0,1,1">

 

 

 

<Border Background="{StaticResource ContentBackgroundBrush}" BorderBrush="{StaticResource BorderOuterBrush}" BorderThickness="1">

 

 

 

<Grid>

 

 

 

<Rectangle Margin="24,0,0,0" Width="1" Fill="{StaticResource SeparatorLine1}" HorizontalAlignment="Left" />

 

 

 

<Rectangle Margin="25,0,0,0" Width="1" Fill="{StaticResource SeparatorLine2}" HorizontalAlignment="Left" />

 

 

 

<ItemsPresenter />

 

 

</Grid>

 

 

</Border>

 

 

</Border>

 

 

</Border>

 

 

</Popup>

 

 

<Rectangle x:Name="DisabledBox" Fill="{StaticResource DisabledBrush}" Visibility="Collapsed" IsHitTestVisible="False" />

 

 

</Grid>

 

 

</ControlTemplate>

 

 

<ControlTemplate x:Key="TopLevelItemTemplate2" TargetType="TelerikNavigationControls:RadMenuItem">

 

 

 

<Grid x:Name="RootElement" Background="Transparent" Cursor="Hand">

 

 

<Grid.RowDefinitions>

 

 

<RowDefinition Height="20" />

 

 

</Grid.RowDefinitions>

 

 

<Grid.ColumnDefinitions>

 

 

<ColumnDefinition Width="Auto" />

 

 

</Grid.ColumnDefinitions>

 

 

 

<vsm:VisualStateManager.VisualStateGroups>

 

 

 

<vsm:VisualStateGroup x:Name="CommonStateGroup">

 

 

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

 

 

<vsm:VisualState x:Name="Highlighted">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="Background" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_MouseOverBackground}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_NormalBorder}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

<vsm:VisualState x:Name="Focused">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="Background" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_SelectedBackground}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MenuButtonBackground" Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource brsh_NormalBorder}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

<vsm:VisualState x:Name="Disabled">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBox" Storyboard.TargetProperty="Visibility" Duration="0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Visible}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

</vsm:VisualStateGroup>

 

 

<vsm:VisualStateGroup x:Name="CheckStateGroup">

 

 

<vsm:VisualState x:Name="Checked" />

 

 

<vsm:VisualState x:Name="Unchecked" />

 

 

<vsm:VisualState x:Name="HideIcon">

 

 

<Storyboard>

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon" Storyboard.TargetProperty="Visibility" Duration="0">

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Collapsed}" />

 

 

</ObjectAnimationUsingKeyFrames>

 

 

</Storyboard>

 

 

</vsm:VisualState>

 

 

</vsm:VisualStateGroup>

 

 

 

</vsm:VisualStateManager.VisualStateGroups>

 

 

 

<Border x:Name="MenuButtonBackground" Grid.Row="0" Grid.Column="0" Background="Transparent" BorderThickness="1" BorderBrush="Transparent" CornerRadius="2" />

 

 

<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Margin="0">

 

 

<!-- Icon -->

 

 

<ContentPresenter x:Name="Icon" Margin="3,0,3,0" Content="{TemplateBinding Icon}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

 

 

 

<!-- Checkmark - Not Used In This Style -->

 

 

<Path x:Name="GlyphPanel" Width="0" Height="0" Opacity="0" Margin="0" Visibility="Collapsed" Data="" />

 

 

<!-- Text Caption -->

 

 

<ContentPresenter x:Name="Content" Margin="3,0,3,0" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

 

 

 

</StackPanel>

 

 

 

<Rectangle x:Name="DisabledBox" Fill="{StaticResource DisabledBrush}" Visibility="Collapsed" IsHitTestVisible="False" />

 

 

</Grid>

 

 

</ControlTemplate>

 

 

 

<Style x:Name="style_RadMenuItem_DataGridToolBars" TargetType="TelerikNavigationControls:RadMenuItem">

 

 

<!-- Menu Items that have a dropdown menu. -->

 

 

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource TopLevelHeaderTemplate2}" />

 

 

<!-- Menu items that don't have a dropdown menu. -->

 

 

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource TopLevelItemTemplate2}" />

 

 

</Style>

 

And my usage:

 

<TelerikNavigationControls:RadMenu Style="{StaticResource style_RadMenu_DataGridToolBars}">

 

 

<!-- SubItems = Yes; Text Only-->

 

 

<TelerikNavigationControls:RadMenuItem Header="Option1" Style="{StaticResource style_RadMenuItem_DataGridToolBars}">

 

 

<TelerikNavigationControls:RadMenuItem Header="AAA">

 

 

 

<TelerikNavigationControls:RadMenuItem Header="Cat" />

 

 

<TelerikNavigationControls:RadMenuItem Header="Dog" />

 

 

<TelerikNavigationControls:RadMenuItem Header="Fish" />

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

<TelerikNavigationControls:RadMenuItem Header="BBB" />

 

 

<TelerikNavigationControls:RadMenuItem Header="CCC" />

 

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<!-- SubItems = No; Text Only -->

 

 

<TelerikNavigationControls:RadMenuItem Header="Option2" Style="{StaticResource style_RadMenuItem_DataGridToolBars}">

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

<!-- SubItems = Yes; Text + Icon -->

 

 

<TelerikNavigationControls:RadMenuItem Header="Option3" Style="{StaticResource style_RadMenuItem_DataGridToolBars}">

 

 

<TelerikNavigationControls:RadMenuItem.Icon>

 

 

<Ellipse Height="16" Width="16" Fill="Olive" />

 

 

</TelerikNavigationControls:RadMenuItem.Icon>

 

 

 

<TelerikNavigationControls:RadMenuItem Header="AAA">

 

 

 

<TelerikNavigationControls:RadMenuItem Header="Cat" />

 

 

<TelerikNavigationControls:RadMenuItem Header="Dog" />

 

 

<TelerikNavigationControls:RadMenuItem Header="Fish" />

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<TelerikNavigationControls:RadMenuItem Header="BBB">

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<TelerikNavigationControls:RadMenuItem Header="CCC">

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<!-- SubItems = No; Text + Icon -->

 

 

<TelerikNavigationControls:RadMenuItem Header="Option4" Style="{StaticResource style_RadMenuItem_DataGridToolBars}">

 

 

 

<TelerikNavigationControls:RadMenuItem.Icon>

 

 

<Ellipse Height="16" Width="16" Fill="Olive" />

 

 

</TelerikNavigationControls:RadMenuItem.Icon>

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<!-- SubItems = Yes; Icon Only -->

 

 

<TelerikNavigationControls:RadMenuItem Style="{StaticResource style_RadMenuItem_DataGridToolBars}">

 

 

<TelerikNavigationControls:RadMenuItem.Icon>

 

 

<Ellipse Height="16" Width="16" Fill="Olive" />

 

 

</TelerikNavigationControls:RadMenuItem.Icon>

 

 

<TelerikNavigationControls:RadMenuItem Header="AAA">

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<TelerikNavigationControls:RadMenuItem Header="BBB">

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<TelerikNavigationControls:RadMenuItem Header="CCC">

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

<!-- SubItems = No; Icon Only -->

 

 

<TelerikNavigationControls:RadMenuItem Style="{StaticResource style_RadMenuItem_DataGridToolBars}">

 

 

<TelerikNavigationControls:RadMenuItem.Icon>

 

 

<Ellipse Height="16" Width="16" Fill="Olive" />

 

 

</TelerikNavigationControls:RadMenuItem.Icon>

 

 

</TelerikNavigationControls:RadMenuItem>

 

 

 

</TelerikNavigationControls:RadMenu>

 

My problem occurs on the 5th and 6th menu options...  The idea is that regardless of the contents of the "button", we'll have a uniform space on the left and right sides.  However, take a look at the two "buttons" and you'll see that there is extra padding on the right hand side. I've been driving myself crazy trying to figure out where the extra padding is coming from.  Any suggestions?

[Hristo]

Hi Rob,

The problem is that 5th and 6th item do not have Content but the ContentPresenter that shows the content have Margin="3,0,3,0" and this content presenter is visible. Even empty its margins participate in the layout and this leads to your spacing problems.

<!-- Text Caption -->
<ContentPresenter x:Name="Content" Margin="3,0,3,0"
    Content="{TemplateBinding Header}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

If you remove the Margin of content presenter the Icon will be centered.

All the best,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rob]

Thanks Hristo.  I see my mistake now.  It made sense to me that the two ContentPresenters ("Content" and "Icon") would be "Collapsed" when there was no content and the margins wouldn't matter.  Actually, looking at the "HideIcon" VisualState is probably what led me to think that.  The menu options #1 and #2 are "text-only" and did not display the same behavior because (obviously now) the "HideIcon" VisualState must have ocurred...  ;)  Is there any plans in the future to implement hiding the text in the same manner?
 

[Hristo]

Hello Rob,

By default both content presenters are visible because if you put a Image control in the Icon presenter this image will fail to load if icon presenter is not visible by default (this is a Silverlight problem).
There are no plans for changing Header behavior to be like (the Icon behavior). You can put the image in the Header if you want to have only image or you can change this behavior by overriding the control templates.

All the best,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.