AdaptiveTrigger 在 Template10 Shell 上不起作用

Question

我正在为 UWP 平台构建我的第一个应用程序，我决定从 Template10 中包含的汉堡包模板开始。

我需要做的是类似于 Windows 10 中包含的 Groove Music 应用程序的汉堡菜单，这样点击汉堡的按钮就会打开一个Flyout 创建一个新类别（就像他们为播放列表所做的那样）。

一切正常，Flyout 刚刚打开没有问题，在移动设备上使用该应用程序时出现问题：Flyout 包含一个文本输入，使虚拟键盘产生，将Flyout 移动到屏幕外.

然后，我的目标是让该 Flyout 在应用处于窄视觉状态时全屏显示，而在其他情况下显示在汉堡包的右侧。

不幸的是，将AdaptiveTriggers 添加到Shell.xaml 页面似乎不起作用，因为没有任何反应。

这是相关的XAML代码：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
        <VisualState x:Name="VisualStateNarrow">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!--  TODO: change properties for narrow view  -->
                <Setter Target="CategoryFlyout.Placement"                            
                        Value="Full"/>
                <Setter Target="MyHamburger.HamburgerBackground"
                        Value="Green"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateNormal">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!--  TODO: change properties for normal view  -->
                <Setter Target="CategoryFlyout.Placement"                            
                        Value="Right"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateWide">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <!--  TODO: change properties for wide view  -->
                <Setter Target="CategoryFlyout.Placement"                            
                        Value="Right"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Page.Resources>
    <Flyout x:Key="CategoryFlyout"
            x:Name="CategoryFlyout"
            Placement="Right">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Set category name:"
                       HorizontalAlignment="Left"/>
            <TextBox Width="200"
                     Margin="0,5,0,5"       
                     x:Name="CategoryTextBox"
                     utils:ImmediateSourceUpdate.IsEnabled="True"
                     utils:ImmediateSourceUpdate.Text="{x:Bind ViewModel.NewCategoryName, Mode=TwoWay}"/>
            <Button Content="Add"
                    HorizontalAlignment="Right"
                    Command="{x:Bind ViewModel.AddCategoryCommand}"/>
        </StackPanel>
    </Flyout>
</Page.Resources>

如您所见，有一个 <Setter Target="MyHamburger.HamburgerBackground" Value="Green"/> 行用于查看问题是否与 Flyout 本身有关，但即使此行也不起作用（我希望汉堡按钮的背景是绿色，但不会改变默认值）。

Tempate10 的模型包括一个 MainPage.xaml，它打印当前的视觉状态，所以我确定我使用正确的模型来设置 @987654330 @，我仍然没有结果。 什么都没有发生，甚至调试控制台中的错误也没有。

我也尝试在HamburgerMenu 中插入AdaptiveTriggers，但即使这样也没有用。

您对为什么会失败有任何想法吗？

Answer 1

这不是模板 10 的问题。 Flyout 控件不适用于移动设备。请使用 ContentDialog 或自定义弹出窗口。我知道，这并不理想；但我不是整个 XAML 平台的作者，只是 Template 10。:)

顺便说一下，他们的推理与这种思路有关：Flyout 在电话上到底应该是什么样子？

实际上，如果这是用于设置或其他内容，只需创建一个新页面即可。

祝你好运！