UWP FlyOut模板在不同系统上的作用方式不同

Question

我有一个用于弹出的自定义模板，它在大约一半的系统上工作得很好，但在另一半系统上它完全崩溃了。

下面是菜单工作时的样子：

​

这是它不起作用时的样子。半透明是完全黑色的，菜单本身的内容完全不在屏幕上：

​

你可以忽略第二个屏幕截图是如何变宽的，以及菜单后面的内容是如何看起来不同的。这只是一个不同的分辨率和不同的设置，但即使它们是相同的，这个问题也会发生。

如图所示，当MenuFlyout出现时(当我通过单击AppBarButton打开菜单时)，我需要一个半透明的区域出现在页面的其余部分。这是通过在弹出按钮的模板中放置一个大矩形来实现的，从而使弹出按钮后面的阴影延伸到页面的其余部分。

下面是触发弹出按钮显示的按钮代码：

<AppBarButton
    x:Name="MenuBtn"
    Height="72"
    Label="{StaticResource Menu}"
    AllowFocusWhenDisabled="False"
    Click="MenuBtn_Click"
    CornerRadius="0"
    Style="{StaticResource AppBarIconButtonStyle}"
    TabIndex="9"
    Width="72"
    Margin="0,0,16,8"
    Loaded="MenuBtn_Loaded"
    RelativePanel.AlignRightWithPanel="True"
    RelativePanel.AlignBottomWithPanel="False">
    <AppBarButton.Flyout>
        <MenuFlyout x:Name="HbgMenuFlyout" MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}"  Opening="MenuFlyout_Opening" Closing="HbgMenuFlyout_Closing"  Closed="MenuFlyout_Closed">
            <MenuFlyoutItem x:Name="SelectRoomBtn" x:Uid="HbgMenu_Select_Room" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SelectRoomBtn_Click" /> <!-- mobile only -->
            <MenuFlyoutItem x:Name="PhysicianProfileBtn" x:Uid="HbgMenu_Physician_Preferences" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="Physician_Preferences_Click" />
            <MenuFlyoutItem x:Name="SystemSettingsBtn" x:Uid="HbgMenu_Settings" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SystemSettingsBtn_Click" />
            <MenuFlyoutItem x:Name="HomeBtn" x:Uid="HbgMenu_Home" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="HomeBtn_Click" />
            <MenuFlyoutItem x:Name="LogoutBtn" x:Uid="HbgMenu_Logout" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="LogoutBtn_Click" />
        </MenuFlyout>
    </AppBarButton.Flyout>
</AppBarButton>

以下是附加到MenuFlyout的样式的代码：

<Style x:Key="MenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
    <Setter Property="RequestedTheme" Value="Dark"/>
    <Setter Property="Background" Value="Gray" />
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="BorderThickness" Value="0,0,0,0" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
    <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
    <Setter Property="MaxWidth" Value="2000" />
    <Setter Property="MinHeight" Value="{ThemeResource MenuFlyoutThemeMinHeight}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MenuFlyoutPresenter">
                <controls:FlyoutGridControl />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

下面是该控件的代码:FlyoutGridControl：

<UserControl
x:Class="CardiologyApp.Controls.FlyoutGridControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CardiologyApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" >

<RelativePanel x:Name="RootGrid" HorizontalAlignment="Stretch">
    <Rectangle x:Name="Shield" Width="2000" RelativePanel.AlignRightWith="MenuFlyoutPresenterScrollViewer" PointerPressed="Rectangle_PointerPressed" />
    <ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer"
        Width="516"
        RelativePanel.AlignRightWithPanel="True"
        HorizontalAlignment="Right"
        Background="Gray"
        AutomationProperties.AccessibilityView="Raw">
        <ItemsPresenter />  
    </ScrollViewer>
    <Border x:Name="MenuFlyoutPresenterBorder"
        VerticalAlignment="Stretch"
        RelativePanel.Below="MenuFlyoutPresenterScrollViewer"
            RelativePanel.AlignRightWithPanel="True"
            Height="1000"
            Background="Gray"
            Width="516"
        />
</RelativePanel>

开发人员的解决方法是注释掉控件中的:FlyoutGridControl。

对于如何在系统中保持行为一致，有什么建议吗？我们都在使用Windows 10企业版。

Answer 1

MenuFlyout不适合固定在右侧边栏的弹出层。在更高的系统版本中，MenuFlyout不受应用程序窗口大小的限制，应用程序窗口的大小会使布局无效。

根据您的实际显示画面，SplitView应该是一个更符合您需求的控件。

这是一个简化的布局结构：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <CommandBar VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <AppBarButton/>
    </CommandBar>
    <SplitView DisplayMode="CompactOverlay" OpenPaneLength="516"
               PanePlacement="Right" x:Name="AppSplitView" Grid.Row="1">
        <SplitView.Pane>
            <Grid>
                <!--Used to display list items-->
                <ListView/>
            </Grid>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <!--Main content display area-->
            </Grid>
        </SplitView.Content>
    </SplitView>
</Grid>

如果你想要应用上面的代码，你需要在ListView中使用ListViewItem来替换你的MenuItem。

如果您需要显示您的选项，只需设置：

AppSplitView.IsPaneOpen = True;

有关SplitView及其显示效果的更多信息，可以查看此文档：

• Split view