RadMenuItem: crash when closing submenu popup

[Beijerinc]

I am trying to create a menu in which the top level items expand a popup, as normal, but the submenu's don't. The submenu's will be groupings in the same toplevel popup, allowing me to create columns and rows of menu items. By using more and more menu items with child items, I can create blocks (see example.png).

I noticed that the blocks, or rather the entire contents of the toplevel popup got highlighted when the mouse was over the popup content. To try and remove the highlight, I attempted to remove the highlight in the RadMenuItem template where it was applied.

I ran into a problem and have extracted the problem to a simple demo:

<UserControl
    x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:teleriknavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Thickness x:Key="MenuSubItemMargin">2</Thickness>
        <CornerRadius x:Key="SplitButton_SpanCornerRadius">1</CornerRadius>
        <CornerRadius x:Key="SplitButton_SpanInnerCornerRadius">0</CornerRadius>

        <SolidColorBrush x:Key="ControlInnerBorder_Highlighted" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="ControlOuterBorder_Highlighted" Color="#FFFFC92B" />
        <LinearGradientBrush x:Key="ControlBackground_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBDA" Offset="0"/>
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
        </LinearGradientBrush>

        <!-- This Sub Menu Item template will not display a highlight when the cursor is over it. -->
        <ControlTemplate x:Key="SubMenuItemNoHighlightTemplate" TargetType="teleriknavigation:RadMenuItem">
            <Grid x:Name="RootElement">
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="CommonStates">
                        <vsm:VisualState x:Name="Highlighted">
                            <!-- The highlighting is disabled here. -->
                            <!--<Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>-->
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid"
                                    Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Normal" />
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="FocusStates">
                        <vsm:VisualState x:Name="Unfocused" />
                        <vsm:VisualState x:Name="Focused" />
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="CheckStates">
                        <vsm:VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Tick"
                                    Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
                                    Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Unchecked" />
                        <vsm:VisualState x:Name="HideIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
                                    Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>

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

                <Grid Margin="{StaticResource MenuSubItemMargin}">
                    <!-- This can be removed if the highlighting is disabled, but it is left for the purpose of the example. -->
                    <Border x:Name="HighlightVisual" Visibility="Collapsed" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"  BorderThickness="1" BorderBrush="{StaticResource ControlOuterBorder_Highlighted}" Background="{StaticResource ControlBackground_Highlighted}">
                        <Border BorderThickness="1" CornerRadius="{StaticResource SplitButton_SpanInnerCornerRadius}" BorderBrush="{StaticResource ControlInnerBorder_Highlighted}" />
                    </Border>

                    <Grid x:Name="ContentGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}">
                            <Path x:Name="Tick" Grid.Column="0" Visibility="Collapsed"
                            VerticalAlignment="Center" HorizontalAlignment="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" Grid.Column="0" Margin="2 2 10 2" Content="{TemplateBinding Icon}" ContentTemplate="{TemplateBinding IconTemplate}" />
                        </Grid>

                        <ContentPresenter x:Name="Content" Grid.Column="1"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}">
                        </ContentPresenter>
                    </Grid>
                </Grid>
            </Grid>
        </ControlTemplate>

        <!-- The 'No Highlight' template is applied to all RadMenuItems implicitly. -->
        <Style TargetType="teleriknavigation:RadMenuItem">
            <Setter Property="SubmenuItemTemplateKey" Value="{StaticResource SubMenuItemNoHighlightTemplate}" />
            <Setter Property="Template" Value="{StaticResource SubMenuItemNoHighlightTemplate}" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <teleriknavigation:RadMenu VerticalAlignment="Top">
            <teleriknavigation:RadMenuItem Header="Item 1">
                <teleriknavigation:RadMenuItem>
                    <!-- This content is wrapped in a RadMenuItem implicitly, which cannot be styled unless implicitly applying
                    the style to all RadMenuItems. -->
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <teleriknavigation:RadMenuItem Grid.Row="0" Grid.Column="0">
                            <teleriknavigation:RadMenuItem Header="Item 2" />
                            <teleriknavigation:RadMenuItem Header="Item 3" />
                            <teleriknavigation:RadMenuItem Header="Item 4" />
                        </teleriknavigation:RadMenuItem>
                        <teleriknavigation:RadMenuItem Grid.Row="0" Grid.Column="1">
                            <teleriknavigation:RadMenuItem Header="Item 5" />
                            <teleriknavigation:RadMenuItem Header="Item 6" />
                            <teleriknavigation:RadMenuItem Header="Item 7" />
                        </teleriknavigation:RadMenuItem>
                        <teleriknavigation:RadMenuItem Grid.Row="1" Grid.Column="0">
                            <teleriknavigation:RadMenuItem Header="Item 8" />
                            <teleriknavigation:RadMenuItem Header="Item 9" />
                            <teleriknavigation:RadMenuItem Header="Item 10" />
                        </teleriknavigation:RadMenuItem>
                        <teleriknavigation:RadMenuItem Grid.Row="1" Grid.Column="1">
                            <teleriknavigation:RadMenuItem Header="Item 11" />
                            <teleriknavigation:RadMenuItem Header="Item 12" />
                            <teleriknavigation:RadMenuItem Header="Item 13" />
                        </teleriknavigation:RadMenuItem>
                    </Grid>
                </teleriknavigation:RadMenuItem>
            </teleriknavigation:RadMenuItem>
        </teleriknavigation:RadMenu>
    </Grid>
</UserControl>

The application crashes when the menu item is expanded and is closing (because the mouse moves outside the popup area). I receive a Visual Studio JIT debugger window stating that the Content property of a ContentPresenter cannot be set. The above XAML (SubMenuItemNoHighlightTemplate) is the exact XAML used in the telerik dll, minus the style applied in the highlight visual state.

This seems to be a bug in the RadMenuItem, and a quite inconvenient one at that. I noticed that any UIElement in stead of the Grid will cause the same behavior, but a string of custom type does not.

I am using Windows 7 64-bit SP1, C#, Silverlight 4.0, Telerik 2011.1.419.1040, IE 9.0.8112.16421 and/or FF 5.0 (on which the specific error does not display, however the application still crashes and results in a white page).

Summary:
    - I am trying to place a Grid as the only item in a RadMenuItem.
    - I am trying to remove the highlight a RadMenuItem gets when the mouse is over the item.
    - Appying an implicit style override to RadMenuItems causes my specific example to crash.
    - What is causing the crash and how can I fix / work around it?
    - How can I remove the highlight of a RadMenuItem while still placing a Grid as the content of my RadMenuItem (how can I implement my example properly)?

Thanks in advance.

[Pana]

Hi Beijerinc,

The following example does exactly what you are trying to do:
http://demos.telerik.com/silverlight/#Menu/Customization

It uses RadMenuItems with their Popups removed so rows and columns may be formed and unclickable headers may appear.

There is small problem in your styles - the default content property of the RadMenuItems is its submenu items. So setting a Grid inside the RadMenuItem the framework will automatically see that it is not a RadMenuItem and wrap it in one. I guess that's why you have set implicit style for the highlight thinking that the only way to remove it is set implicit styles but the actual problem is one menu item that is not visible in the XAMl is generated for you. I think the solution would be to simply put the grid in the Header of the RadMenuItem like this:

<UserControl
    x:Class="RadmenuExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:teleriknavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

    xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"

    mc:Ignorable="d">

    <UserControl.Resources>
        <Thickness x:Key="MenuSubItemMargin">2</Thickness>
        <CornerRadius x:Key="SplitButton_SpanCornerRadius">1</CornerRadius>
        <CornerRadius x:Key="SplitButton_SpanInnerCornerRadius">0</CornerRadius>

        <SolidColorBrush x:Key="ControlInnerBorder_Highlighted" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="ControlOuterBorder_Highlighted" Color="#FFFFC92B" />
        <LinearGradientBrush x:Key="ControlBackground_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBDA" Offset="0"/>
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
        </LinearGradientBrush>

        <!-- This Sub Menu Item template will not display a highlight when the cursor is over it. -->
        <ControlTemplate x:Key="SubMenuItemNoHighlightTemplate" TargetType="teleriknavigation:RadMenuItem">
            <Grid x:Name="RootElement">
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="CommonStates">
                        <vsm:VisualState x:Name="Highlighted">
                            <!-- The highlighting is disabled here. -->
                            <!--<Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>-->
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentGrid"
                                    Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Normal" />
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="FocusStates">
                        <vsm:VisualState x:Name="Unfocused" />
                        <vsm:VisualState x:Name="Focused" />
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="CheckStates">
                        <vsm:VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Tick"
                                    Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
                                    Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Unchecked" />
                        <vsm:VisualState x:Name="HideIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
                                    Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>

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

                <Grid Margin="{StaticResource MenuSubItemMargin}">
                    <!-- This can be removed if the highlighting is disabled, but it is left for the purpose of the example. -->
                    <Border x:Name="HighlightVisual" Visibility="Collapsed" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"  BorderThickness="1" BorderBrush="{StaticResource ControlOuterBorder_Highlighted}" Background="{StaticResource ControlBackground_Highlighted}">
                        <Border BorderThickness="1" CornerRadius="{StaticResource SplitButton_SpanInnerCornerRadius}" BorderBrush="{StaticResource ControlInnerBorder_Highlighted}" />
                    </Border>

                    <Grid x:Name="ContentGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Grid Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Menu.IconColumnWidth}">
                            <Path x:Name="Tick" Grid.Column="0" Visibility="Collapsed"
                            VerticalAlignment="Center" HorizontalAlignment="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" Grid.Column="0" Margin="2 2 10 2" Content="{TemplateBinding Icon}" ContentTemplate="{TemplateBinding IconTemplate}" />
                        </Grid>

                        <ContentPresenter x:Name="Content" Grid.Column="1"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}">
                        </ContentPresenter>
                    </Grid>
                </Grid>
            </Grid>
        </ControlTemplate>

        <!-- The 'No Highlight' template is applied to all RadMenuItems implicitly. -->
        <Style x:Name="RadMenuItemStyle" TargetType="teleriknavigation:RadMenuItem">
            <Setter Property="SubmenuItemTemplateKey" Value="{StaticResource SubMenuItemNoHighlightTemplate}" />
            <Setter Property="Template" Value="{StaticResource SubMenuItemNoHighlightTemplate}" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <teleriknavigation:RadMenu VerticalAlignment="Top">
            <teleriknavigation:RadMenuItem Header="Item 1">
                <teleriknavigation:RadMenuItem Style="{StaticResource RadMenuItemStyle}">
                    <teleriknavigation:RadMenuItem.Header>
                        <!-- This content is wrapped in a RadMenuItem implicitly, which cannot be styled unless implicitly applying
                        the style to all RadMenuItems. -->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <teleriknavigation:RadMenuItem Grid.Row="0" Grid.Column="0">
                                <teleriknavigation:RadMenuItem Header="Item 2" />
                                <teleriknavigation:RadMenuItem Header="Item 3" />
                                <teleriknavigation:RadMenuItem Header="Item 4" />
                            </teleriknavigation:RadMenuItem>
                            <teleriknavigation:RadMenuItem Grid.Row="0" Grid.Column="1">
                                <teleriknavigation:RadMenuItem Header="Item 5" />
                                <teleriknavigation:RadMenuItem Header="Item 6" />
                                <teleriknavigation:RadMenuItem Header="Item 7" />
                            </teleriknavigation:RadMenuItem>
                            <teleriknavigation:RadMenuItem Grid.Row="1" Grid.Column="0">
                                <teleriknavigation:RadMenuItem Header="Item 8" />
                                <teleriknavigation:RadMenuItem Header="Item 9" />
                                <teleriknavigation:RadMenuItem Header="Item 10" />
                            </teleriknavigation:RadMenuItem>
                            <teleriknavigation:RadMenuItem Grid.Row="1" Grid.Column="1">
                                <teleriknavigation:RadMenuItem Header="Item 11" />
                                <teleriknavigation:RadMenuItem Header="Item 12" />
                                <teleriknavigation:RadMenuItem Header="Item 13" />
                            </teleriknavigation:RadMenuItem>
                        </Grid>
                    </teleriknavigation:RadMenuItem.Header>
                </teleriknavigation:RadMenuItem>
            </teleriknavigation:RadMenuItem>
        </teleriknavigation:RadMenu>
    </Grid>
</UserControl>

Still your menu would need some more styling.

All the best,
Pana
the Telerik team

[Beijerinc]

Thank you, Pana, for taking the time to awnser my question. I think the link you posted to the demo will be the best solution.

The XAML you posted works too, but I don't like the "setting the style" part. Placing the grid in a header, but applying the style implicitly will still crash the application. That is not relevant for me anymore though (as I will be applying the demo concept), but I thought you should know.

Also, the demo example's XAML shows almost the entire <User.Resources> tag in green, like it has been commented, even though it isn't. Seems to be a bug in the demo code viewer.

Thanks again, Pana!

[Yana]

Hello Beijerinc,

Thank you for reporting the issue in our code viewer,  we'll check it.

Regards,
Yana
the Telerik team