1

我正在为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，它打印当前的视觉状态，所以我确定我使用正确的模型来设置Flyout，但我仍然没有结果。什么都没有发生，甚至调试控制台中的错误也没有。

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

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

4

1 回答 1

1

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

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

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

祝你好运！

于 2016-03-23T22:40:49.117 回答