Silverlight menu popup direction - silverlight

Question

I have a menu which has nested menu items within them which when hovered over the main menu start point opens the menu structure. However, we have recently moved the menu from the bottom of our Silverlight app to the top of the page and I cannot seem to find the way to change the opening direction when hovering over the starting menu point.
Currently, it opens above the starting menu point and I require the menu to open below it.
<StackPanel x:Name="ToolbarLogo" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Background="{StaticResource ToolbarBackgroundBrush}" Orientation="Horizontal">
<viblend:Menu Visibility="Visible" Canvas.ZIndex="99" Orientation="Horizontal" VerticalAlignment="Bottom" AnimationType="Bounds" x:Name="MenuLogo" Margin="25,0,0,0" Style="{StaticResource ThemeMenuStyle}" HorizontalAlignment="Left" Padding="5,0,5,0">
<viblend:MenuItem Width="129" DropDownWidth="125" FontSize="11" HorizontalAlignment="Center" VerticalAlignment="Bottom" Style="{StaticResource ThemeMenuItemStyle}" Padding="10,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Image Source="/ReACTSL;component/Assets/Images/Icons/ReACTLogoPlus.png" Width="100" Height="30"/>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
<viblend:MenuItem Tag="ReACTHome" x:Name="mi_ReACTHomeM" Width="125" FontSize="11" Style="{StaticResource ThemeMenuItemStyle}" HorizontalAlignment="Center" Padding="2,5,5,5" ShortcutKey="B" ShortcutModifierKeys="Control" >
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Home" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource HomeIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
</viblend:MenuItem>
<viblend:MenuItem Width="125" FontSize="11" Name="SSRSReportsMenuItem" Style="{StaticResource ThemeMenuItemStyle}" HorizontalAlignment="Center" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="SSRS Reports" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource ReportIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
</viblend:MenuItem>
<viblend:MenuItem Width="125" FontSize="11" Name="CrystalReportsMenuItem" Style="{StaticResource ThemeMenuItemStyle}" HorizontalAlignment="Center" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Crystal Reports" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource ReportIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
</viblend:MenuItem>
</viblend:Menu>
The following style is applied to the menu and and menu items
<Style TargetType="viblend:Menu" x:Key="ThemeMenuStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Padding" Value="3" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Orientation" Value="Horizontal"></Setter>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="HorizontalTemplate">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Bottom" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalTemplate">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel x:Name="LayoutRoot" Orientation="Vertical" VerticalAlignment="Top" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="viblend:Menu">
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="Transparent" x:Name="Background" Opacity="1">
<ItemsPresenter x:Name="ItemsHost" VerticalAlignment="Top">
</ItemsPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="viblend:MenuItem" x:Key="ThemeMenuItemStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Padding" Value="9,3,9,3" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="RootNormalForeBrush" Value="{StaticResource MenuItemRootForegroundBrush}"/>
<Setter Property="RootHighlightForeBrush" Value="{StaticResource MenuItemRootHighlightForegroundBrush}"/>
<Setter Property="DisabledForeBrush" Value="{StaticResource MenuItemDisabledForegroundBrush}"/>
<Setter Property="NormalForeBrush" Value="{StaticResource MenuItemForegroundBrush}"/>
<Setter Property="HighlightForeBrush" Value="{StaticResource MenuItemHighlightForegroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="viblend:MenuItem">
<Grid VerticalAlignment="Top">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="PopupStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" To="PopupOpened"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" To="PopupClosed"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" To="PopupCollapsed"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.2" To="PopupExpanded"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="PopupExpanded">
<Storyboard x:Name="ExpandingStoryboard">
<DoubleAnimation
Storyboard.TargetName="AnimationPresenter"
Storyboard.TargetProperty="Percentage"
To="1.0" Duration="0:0:0.2"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="PopupCollapsed">
<Storyboard x:Name="CollapsingStoryboard">
<DoubleAnimation
Storyboard.TargetName="AnimationPresenter"
Storyboard.TargetProperty="Percentage"
To="0.0" Duration="0:0:0.1" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="PopupOpened">
<Storyboard x:Name="OpeningStoryboard">
<DoubleAnimation
Storyboard.TargetName="PopupChild"
Storyboard.TargetProperty="Opacity"
To="1.0" Duration="0:0:0.1" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="PopupClosed">
<Storyboard x:Name="ClosingStoryboard">
<DoubleAnimation
Storyboard.TargetName="PopupChild"
Storyboard.TargetProperty="Opacity"
To="0.0" Duration="0:0:0.1" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.2"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" >
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="ImageMargin" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="0"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="InnerBackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="HeaderMouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="HeaderBackground" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="ImageMargin" Storyboard.TargetProperty="Opacity" To="0"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="InnerBackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00.2"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="5" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="0"/>
<DoubleAnimation Duration="5" Storyboard.TargetName="BackgroundGradientSelectedDisabled" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="5" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="5" Storyboard.TargetName="BackgroundGradientSelectedDisabled" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused"/>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle Stroke="{StaticResource MenuImageMarginStrokeBrush}" Fill="{StaticResource MenuImageMarginBrush}" x:Name="ImageMargin" Width="27" StrokeThickness="0" HorizontalAlignment="Left" RadiusX="1" RadiusY="1" Opacity="1"></Rectangle>
<Rectangle Fill="{StaticResource MenuHeaderItemBackgroundBrush}" x:Name="HeaderBackground" RadiusX="1" RadiusY="1" Stroke="{StaticResource MenuHeaderItemStrokeBrush}" Opacity="0"></Rectangle>
<Rectangle Fill="{StaticResource ToolbarHoverBackgroundBrush}" RadiusX="5" RadiusY="5" x:Name="InnerBackgroundGradientOver" Stroke="{StaticResource MenuHighlightStrokeBrush}" Opacity="0"></Rectangle>
<Rectangle Margin="1" Fill="{StaticResource ToolbarHoverBackgroundBrush}" x:Name="BackgroundGradientOver" RadiusX="5" RadiusY="5" Stroke="#FF09638E" Opacity="1"></Rectangle>
<Rectangle x:Name="BackgroundGradientSelectedDisabled" RadiusX="1" RadiusY="1" Opacity="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEFEFEF" Offset="0.046"/>
<GradientStop Color="#FFEFEFEF" Offset="0.194"/>
<GradientStop Color="#FFEFEFEF" Offset="0.507"/>
<GradientStop Color="#FFEFEFEF" Offset="0.521"/>
<GradientStop Color="#FFEFEFEF" Offset="0.811"/>
<GradientStop Color="#FFEFEFEF" Offset="0.982"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#FFEFEFEF"/>
<GradientStop Color="#FFEFEFEF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle Stroke="{StaticResource MenuSeparatorStroke}" Fill="{StaticResource MenuSeparatorBrush}" x:Name="SeparatorBackground" Margin="1,1,1,1" Height="1" StrokeThickness="0" RadiusX="1" RadiusY="1" Opacity="0"></Rectangle>
<Rectangle Stroke="{StaticResource MenuSelectedStrokeBrush}" Fill="{StaticResource MenuSelectedBrush}" x:Name="Background" StrokeThickness="1" RadiusX="1" RadiusY="1" Opacity="0"></Rectangle>
<!--<Path Visibility="Collapsed" Height="10" HorizontalAlignment="Left" Margin="10,1,0,1.5" x:Name="CheckIcon" Width="10.5" Opacity="0" Fill="{StaticResource MenuCheckIconBrush}" Stretch="Fill" Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 C112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 C114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 C110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z"/>-->
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<ContentControl
x:Name="contentPresenter"
FontFamily="Segoe UI, Microsoft Sans Serif, Verdana"
Grid.Column="0"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Top"
Margin="{TemplateBinding Padding}"/>
<Path Margin="10,0,0,0" HorizontalAlignment="Right" x:Name="arrow" Fill="{StaticResource MenuArrowBrush}" VerticalAlignment="Center" RenderTransformOrigin="0,1.2" Stroke="{StaticResource MenuArrowBrush}" StrokeThickness="2" Data="M 1,1.5 L 4.5,5 L 8,1.5" Opacity="1">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-90"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</StackPanel>
<Popup x:Name="Popup" VerticalAlignment="Top">
<Border CornerRadius="5,5,5,5" x:Name="PopupChild" BorderThickness="0,0,0,0" Background="Transparent" Opacity="0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0, 0.5" StartPoint="1,0.5">
<GradientStop Color="#FFB1C7D6" Offset="0"/>
<GradientStop Color="#FFB1C7D6" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border CornerRadius="5,5,5,5" Height="{TemplateBinding DropDownHeight}" x:Name="PopupChild2" BorderThickness="1" BorderBrush="{StaticResource MainMenuBackgroundBrush}" Background="{StaticResource MainMenuBackgroundBrush}" Opacity="1">
<utilityControls:ScrollablePanel utilityControls:ScrollablePanel.VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}" x:Name="ScrollablePanel" HorizontalScrollBarVisibility="Disabled">
<ItemsPresenter Margin="1" x:Name="ItemsHost" VerticalAlignment="Top">
</ItemsPresenter>
</utilityControls:ScrollablePanel>
</Border>
</Border>
</Popup>
<!--<utilities:ExpandableContentControl x:Name="AnimationPresenter" VerticalAlignment="Top">
</utilities:ExpandableContentControl>-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

This is only a guess: Try set the VerticalAlignment of the menu root element to Top. It seems to me the menu is too big for the Stackpanel and will therefore be rendered beyond the bottom resp. top of the StackPanel (by design).
<viblend:Menu VerticalAlignment="Top" ...>
...
</viblend:Menu>

Answer 2

Just for information with anybody else who may be struggling with a similar problem with the VIBlend menu.
<Grid x:Name="LayoutRoot" Margin="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="ToolbarContainer" Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<viblend:Menu x:Name="MenuLogo" Orientation="Horizontal" AnimationType="Bounds" Style="{StaticResource ThemeMenuStyle}" Height="40" Margin="25,0,0,0" HorizontalAlignment="Left" Padding="5,0,5,0" VerticalAlignment="Top">
<viblend:MenuItem Width="129" DropDownWidth="125" FontSize="11" Style="{StaticResource ThemeMenuItemStyle}" Padding="10,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Image Source="/ReACTSL;component/Assets/Images/Icons/ReACTLogoPlus.png" Width="100" Height="30"/>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
<viblend:MenuItem Tag="ReACTHome" x:Name="mi_ReACTHomeM" Width="125" FontSize="11" Style="{StaticResource ThemeMenuItemStyle}" Padding="2,5,5,5" ShortcutKey="B" ShortcutModifierKeys="Control" >
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Home" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource HomeIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
</viblend:MenuItem>
<viblend:MenuItem Width="125" FontSize="11" Name="SSRSReportsMenuItem" Style="{StaticResource ThemeMenuItemStyle}" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="SSRS Reports" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource ReportIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
</viblend:MenuItem>
<viblend:MenuItem Width="125" FontSize="11" Name="CrystalReportsMenuItem" Style="{StaticResource ThemeMenuItemStyle}" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Crystal Reports" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource ReportIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
</viblend:MenuItem>
<viblend:MenuItem Tag="Configuration" Width="125" FontSize="11" Style="{StaticResource ThemeMenuItemStyle}" DropDownWidth="120" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Configuration" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource ConfigIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
<viblend:MenuItem Style="{StaticResource ThemeMenuItemStyle}" Width="125" FontSize="11" DropDownWidth="220" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Case" Foreground="White" VerticalAlignment="Center"></TextBlock>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
<viblend:MenuItem x:Name="mi_Assessments" Text="Assessments" Tag="ListAssessment" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_ActionStages" Text="Case Action Stages" Tag="ListActionStage" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_AgenciesContacts" Text="Case Agencies & Contacts" Tag="ListAgency" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_Companies" Text="Case Companies" Tag="ListCompany" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CostingTypes" Text="Case Costing Types" Tag="ListCostingType" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseCostingTypeCategories" Text="Case Costing Type Categories" Tag="ListCostingTypeCategories" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseDefinitions" Text="Case Definitions" Tag="ListCaseDefinitions" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseOutcomes" Text="Case Outcomes" Tag="ListCaseOutcome" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseStagePriorities" Text="Priority Levels" Tag="ListPriorityLevels" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseSources" Text="Case Sources" Tag="ListCaseSource" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseStatusValues" Text="Case Status Values" Tag="ListCaseTypeStatusValue" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseTypes" Text="Case Types" Tag="ListCaseType" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseWards" Text="Case Wards" Tag="ListCaseWards" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_NotActionedReasons" Text="Not Actioned Reasons" Tag="ListNoActionReason" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_OrderCategory" Text="Order Type Categories" Tag="ListOrderCategories" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CaseRechargeTypes" Text="Recharge Types" Tag="ListCaseReChargeTypes" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_SupportTypes" Text="Support Types" Tag="ListSupportType" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
</viblend:MenuItem>
<viblend:MenuItem Style="{StaticResource ThemeMenuItemStyle}" Width="125" FontSize="11" HorizontalAlignment="Center" DropDownWidth="200" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Individual" Foreground="White" VerticalAlignment="Center"></TextBlock>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
<viblend:MenuItem x:Name="mi_AgeRange" Text="Age Ranges" Tag="ListAgeRange" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_EthnicOrigin" Text="Ethnic Origins" Tag="ListEthnicOrigin" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_Landlords" Text="Landlords" Tag="ListLandLord" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_Religions" Text="Religions" Tag="ListReligion" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_SexOrientation" Text="Sexual Orientations" Tag="ListSexualOrientation" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_TenancyTypes" Text="Tenancy Types" Tag="ListTenancyType" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_TenureTypes" Text="Tenure Types" Tag="ListTenureType" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_IndTitles" Text="Titles" Tag="ListIndividualTitles" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
</viblend:MenuItem>
<viblend:MenuItem Style="{StaticResource ThemeMenuItemStyle}" Width="125" FontSize="11" HorizontalAlignment="Center" VerticalAlignment="Bottom" DropDownWidth="200" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Settings" Foreground="White" VerticalAlignment="Center"></TextBlock>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
<viblend:MenuItem x:Name="mi_ChangeUserPassword" Text="Change Password" Tag="/ChangeUserPassword/True" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CorrTemplates" Text="Document Templates" Tag="ListCorrespondenceTemplates" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_OutOfOffice" Text="Out Of Office" Tag="/OutOfOffice/0" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_ReAllocateStaffOfficers" Text="Reallocate Staff Officers" Tag="ReAllocateStaffOfficers" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_StaffOfficers" Text="Staff Officers" Tag="/ListStaffOfficer/0" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
</viblend:MenuItem>
</viblend:MenuItem>
<viblend:MenuItem Width="125" x:Name="mi_Administration" FontSize="11" HorizontalAlignment="Center" DropDownWidth="200" Style="{StaticResource ThemeMenuItemStyle}" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Administration" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource AdminIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
<viblend:MenuItem x:Name="mi_AuditTrail" Text="Audit Trail" Tag="AuditTrail" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CloudAdmin" Text="Cloud Administration" Tag="CloudAdmin" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_CustomFields" Text="Custom Fields" Tag="CustomFields" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_ConfigurableFields" Text="Configurable Fields" Tag="ConfigurableFields" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_ExchangeAdmin" Text="Email / Exchange Settings" Tag="ExchangeAdmin" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_FindSettings" Text="Find Settings" Tag="FindSettings" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_Holidays" Text="Holidays" Tag="ListHolidays" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_Imports" Text="Import(s)" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5">
<viblend:MenuItem x:Name="mi_PendingNoteImports" Text="Pending Notes" Tag="PendingNoteImport" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_DamageReportImports" Text="Damage Reports" Tag="DamageReportImport" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_OperatorReportImports" Text="Operator Reports" Tag="OperatorReportImport" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_YouthReportImports" Text="Youth Reports" Tag="YouthReportImport" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
</viblend:MenuItem>
<viblend:MenuItem x:Name="mi_ManageLoginsAndCaseLocks" Text="Manage Logins / Case Locks" Tag="ManageLoginsAndLocks" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_MandatoryFields" Text="Mandatory Fields" Tag="MandatoryFields" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_MappingExport" Text="Mapping Export Format" Tag="MappingExportFormat" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_PostCodeSearch" Text="Post Code Search" Tag="ListPostCodeSearch" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_ReACTSettings" Text="ReACT Today Settings" Tag="ReACTTodaySettings" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_ReportConfig" Text="Report Access Configuration" Tag="ReportAccessConfigration" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_SatisfactionForms" Text="Satisfaction Form" Tag="ListFeedbackCategory" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_SysSettings" Text="System Administration" Tag="SystemAdmin" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_UserAccounts" Text="User Account" Tag="/UserAccount/0" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
<viblend:MenuItem x:Name="mi_UserGroups" Text="User Groups" Tag="UserGroups" Style="{StaticResource ThemeMenuItemStyle}" ImageSource="/ReACTSL;component/Assets/Images/Icons/circle1.png" Padding="5"></viblend:MenuItem>
</viblend:MenuItem>
<viblend:MenuItem Width="125" FontSize="11" Tag="LogOut" HorizontalAlignment="Center" DropDownWidth="110" Style="{StaticResource ThemeMenuItemStyle}" Padding="2,5,5,5">
<viblend:MenuItem.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="Logout" Foreground="White" VerticalAlignment="Center"></TextBlock>
<Image Source="{StaticResource LogOutIcon}" HorizontalAlignment="Left" Grid.Column="0" Width="25" Height="25" Margin="1"></Image>
</Grid>
</DataTemplate>
</viblend:MenuItem.HeaderTemplate>
</viblend:MenuItem>
</viblend:MenuItem>
</viblend:Menu>
<StackPanel x:Name="ToolbarAccessibility" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Center" Orientation="Horizontal">
...
</StackPanel>
<viblend:Menu x:Name="MenuIcons" Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Top" AnimationType="Bounds" Margin="0,0,25,0" Style="{StaticResource ThemeMenuStyle}" HorizontalAlignment="Right" Padding="5,0,5,0">
...
</viblend:Menu>
<ScrollViewer x:Name="scrollViewer" Margin="0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" Background="{StaticResource PageBackgroundBrush}" BorderThickness="0">
<navigation:Frame HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="ContentFrame" Navigating="ContentFrame_Navigating">
<navigation:Frame.UriMapper>
<urimapper:UriMapper>
<urimapper:UriMapping Uri="Login" MappedUri="/Login.xaml" />
</urimapper:UriMapper>
</navigation:Frame.UriMapper>
</navigation:Frame>
</ScrollViewer>
</Grid>
</Grid>
The problem was with the layout of the menus container. Having re-written the page which contains the menu along with the applications content, with help of the sample code from VIBlend, it works as expected.