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!
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> |