无法在Flyout中的TextBox控件中输入输入文本

Question

我想使用CommandBar和Flyout来构建这样的内容。

用户应点击CommandBar（Flyout打开）中的按钮，然后在TextBox中输入文字，然后点击TextBox右侧的按钮开始搜索请求。 问题是，当我点击TextBox时，我无法输入文字。在我写东西之前，它似乎失去了焦点。下面是示例代码。怎么了？

<Page.Resources>
    <DataTemplate x:Key="Search">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" />
            <AppBarButton Grid.Column="1" Icon="Find" />
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid>
    <CommandBar RequestedTheme="Dark">
        <AppBarButton Icon="Find">
            <AppBarButton.Flyout>
                <Flyout Placement="Bottom" >
                    <ContentPresenter ContentTemplate="{StaticResource Search}"/>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Grid>

Answer 1

在AllowFocusOnInteraction上将true属性设置为AppBarButton。

XAML中的解决方案（适用于Windows 10，版本1607）

    <AppBarButton x:Name="myAppBarButton"
                  Icon="Find"
                  AllowFocusOnInteraction="True">
        <AppBarButton.Flyout>
            <Flyout Placement="Bottom" >
                <ContentPresenter ContentTemplate="{StaticResource Search}"/>
            </Flyout>
        </AppBarButton.Flyout>
    </AppBarButton>

或者如果您定位 Windows 10周年更新（1607）内部版本为14393或更高版本，但该应用的最低Windows 10版本较低，则应该检查平台上是否有AllowFocusOnInteraction属性。

因此，您无法在XAML中设置AllowFocusOnInteraction属性。相反，在代码隐藏中执行此操作：

C＃代码隐藏

中的解决方案

if (Windows.Foundation.Metadata.ApiInformation.IsPropertyPresent("Windows.UI.Xaml.FrameworkElement", "AllowFocusOnInteraction"))
     myAppBarButton.AllowFocusOnInteraction = true;

您还可以将其包装到附加属性中，即使在所有Windows 10版本上也可以在XAML中使用。

更多信息

您已在 Windows 10周年更新（1607），构建14393上遇到新功能。

这对大多数应用栏的使用都有所改善，但会干扰您的使用，因此当您将构建更改为14393而不是10586时，您需要覆盖默认值。

这是一篇博文ComboBox on a Flyout attached to an AppBarButton loses mouse input on 1607。它还包含附加的属性实现。

Answer 2

你的TextBox实际上永远不会得到焦点，不知何时flyout会阻止它，我从这个TextBox中获得的唯一动作是PointerOver状态 - 使它看起来像是有焦点，但事实并非如此。

您需要在代码中设置焦点，例如当弹出窗口打开时 - 它可以工作，但可能不是最好的解决方案，因为您需要命名TextBox以便从后面的代码中获取它。

<Grid>
    <CommandBar RequestedTheme="Dark">
        <AppBarButton Icon="Find">
            <AppBarButton.Flyout>
                <Flyout Placement="Bottom" Opened="FlyoutBase_OnOpened">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBox x:Name="Test"/>
                        <AppBarButton Grid.Column="1" Icon="Find"/>
                    </Grid>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Grid>

然后编码：

private void FlyoutBase_OnOpened(object sender, object e)
{
    Test.Focus(FocusState.Programmatic);
}

Answer 3

我可以重现这个问题。我认为这是周年纪念更新（1607）SDK（14393）中的一个错误，因为如果我将目标SDK降级到10586，那么每个方面都可以正常工作。

ps。：我不知道如何向微软报告这个错误。