Silverlight 菜单弹出方向答案

【问题标题】：Silverlight menu popup directionSilverlight 菜单弹出方向
【发布时间】：2015-10-04 07:23:44
【问题描述】：

我有一个菜单，其中包含嵌套的菜单项，当将鼠标悬停在主菜单起点上时会打开菜单结构。但是，我们最近将菜单从 Silverlight 应用程序的底部移到了页面顶部，当将鼠标悬停在起始菜单点上时，我似乎找不到更改打开方向的方法。

目前，它在起始菜单点上方打开，我需要在它下方打开菜单。

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

以下样式应用于菜单和菜单项

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

【问题讨论】：

目前是向上开吗？你想让它向下打开，就像“下拉”这个名字所暗示的那样？
是的，当悬停在它上面时，它当前向上打开，但我需要更改方向以向下打开，但它需要是这个特定的控件。

标签： silverlight menu

【解决方案1】：

这只是一个猜测：尝试将菜单根元素的VerticalAlignment 设置为Top。在我看来，菜单对于 Stackpanel 来说太大了，因此将被渲染到底部之外。 StackPanel 的顶部（按设计）。

<viblend:Menu VerticalAlignment="Top" ...>
    ...
</viblend:Menu>

【讨论】：

谢谢你，但不幸的是我仍然遇到同样的问题
@AVFC_Bubble88：我查看了 viblend 菜单的页面，我很困惑你是如何设法让它向上打开的。我没有找到有关如何将方向更改为向上的信息！默认是向下的。
这是我们几年前继承的一个项目，现在正在改变它的外观和感觉。我有一张显示问题的图片，但由于缺少信誉点，我无法上传。

【解决方案2】：

仅供任何可能在 VIBlend 菜单上遇到类似问题的人参考。

<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 &amp; 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>

问题在于菜单容器的布局。在 VIBlend 的示例代码的帮助下，重新编写了包含菜单和应用程序内容的页面，它按预期工作。

【讨论】：