[Solved] Page "zooms" when submenu displayed

[Terry]

This is the strangest thing.  I have a vertical menu on the left of a Silverlight page.  Some items, such as home page do not have a submenu.  Some items do.  When I mouseover an item that displays a submenu, everything on the page gets larger.  The page appears to "jump" at me.  The IE8 zoom indicator at lower right bottom stays at 95% but everything is bigger.  The RadMenu sits in a grid cell wth star sizing.  Except for a banner, the other cells are empty.  Doesn't matter whether I add or remove ItemContainerStyle.  I'm not using control templates.  It doesn't matter how big I make the grid cell.  Even if it is big enough to contain the flyout submenu.

This is very disconcerting because when you mouseover a menu item to select a subitem, the item pops down the page as it expands and is no longer selected.

Does anyone have any idea what is causing this?

A second issue:  How do I make the subitems have the same style as the first level items, i.e. black with white letters?  If I apply the ItemContainerStyle to RadMenuItems at a lower level, I get white letters but not the black background.

The code is below.

Thanks in advance!

 

<UserControl
    x:Class="ABC.MainPage"
    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"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="1024" d:DesignHeight="768">
    <UserControl.Resources>
        <Style x:Key="RadMenuItemStyle"
               TargetType="telerikNavigation:RadMenuItem">
            <Setter Property="Foreground"
                    Value="White" />
            <Setter Property="Background"
                    Value="Black"></Setter>
        </Style>
    </UserControl.Resources>

        <Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="90" />
        <RowDefinition Height="0.783*"/>
        <RowDefinition Height="0.043*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1.5*"/>
        <ColumnDefinition Width="6*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0" Grid.ColumnSpan="3" Background="#FF5982D4" >
        <Image Source="ABC_Banner.jpg"  HorizontalAlignment="Left" Stretch="None"/>
    </StackPanel>
        <telerikNavigation:RadMenu Orientation="Vertical"
                                   Grid.Column="0"
                                   Grid.Row="1"
                                   ItemContainerStyle="{StaticResource RadMenuItemStyle}">
            <telerikNavigation:RadMenu.Background>
                <LinearGradientBrush EndPoint="1,0.5"
                                     StartPoint="0,0.5">
                    <GradientStop Color="Black"
                                  Offset="0" />
                    <GradientStop Color="Black"
                                  Offset="0.9" />
                    <GradientStop Color="White" Offset="1" />
                </LinearGradientBrush>
            </telerikNavigation:RadMenu.Background>
            <telerikNavigation:RadMenuItem Header="ABC Home Page">
            </telerikNavigation:RadMenuItem>
        <telerikNavigation:RadMenuItem Header="About ABC">
                <telerikNavigation:RadMenuItem Header="Careers" ></telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Header="History"></telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Header="News"></telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Header="Mission Statement"></telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Header="ABC Foundation"></telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Header="Contact Us"></telerikNavigation:RadMenuItem>
        </telerikNavigation:RadMenuItem>
        <telerikNavigation:RadMenuItem Header="Locations">
                <telerikNavigation:RadMenuItem Header="Location 1"></telerikNavigation:RadMenuItem>
                <telerikNavigation:RadMenuItem Header="Location 2"></telerikNavigation:RadMenuItem>
        </telerikNavigation:RadMenuItem>
        <telerikNavigation:RadMenuItem Header="Services and Procedures"></telerikNavigation:RadMenuItem>
    </telerikNavigation:RadMenu>
  </Grid>
</UserControl>

[Valeri Hristov]

Hello Terry,

The zooming is visible only when the browser zoom is different than 100%. This problem is related to the way we open the Popup controls for the submenu items. We fixed it last week, the upcoming internal build this friday will contain the fix.

Regarding the background problem - it will also be fixed in the friday's internal build.

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.

[Terry]

FYI, the 9/25 internal build did indeed fix this problem.

Thanks!

Terry