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

【问题标题】：Can't enter enter text in TextBox control inside Flyout无法在 Flyout 内的 TextBox 控件中输入文本
【发布时间】：2016-08-23 09:00:39
【问题描述】：

我想使用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>

【问题讨论】：

我无法重现您的问题。您提供的代码一切正常。您是否在代码隐藏中阻止了该文本框？
请注意这一点，在触摸屏设备上，屏幕键盘可能位于浮出控件顶部的层中，从而有效地隐藏了文本框。然后，如果您想通过单击屏幕上弹出按钮之外的区域来隐藏键盘，这也会关闭弹出按钮。不是一个很好的用户体验

标签： c# xaml uwp flyout commandbar

【解决方案1】：

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

XAML 中的解决方案（如果应用最低目标版本为 10.0.14393 或更高版本）

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

如果应用的最低版本低于周年更新 1607（内部版本 10.0.14393）（即使您的目标版本为 1607 或更高），您也不能直接在 XAML 中设置 AllowFocusOnInteraction 属性。相反，您应该在代码隐藏中执行此操作。

C# 代码隐藏解决方案

// check if the AllowFocusOnInteraction property is available on the platform 
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。它还包含附加的属性实现。

【讨论】：

如果在 xaml 中设置属性，我会收到此编译错误。 XBF 语法错误“0x09C4”：找不到属性。检查您在 XAML 中设置的属性是否存在于项目中指定的平台的最低版本（TargetPlatformMinVersion）
没错。正如我在答案中所说，您的目标是 Windows 10 周年更新 (1607) 版本 14393 或更高版本，但应用程序的最低 Windows 10 版本较低，您应该检查平台上的 AllowFocusOnInteraction 属性是否可用。因此，您不能在 XAML 中设置 AllowFocusOnInteraction 属性。相反，在代码隐藏中进行。
另一种解决方案是创建一个封装此行为的附加属性，并在 XAML 中使用此附加属性。
我做了同样的附加属性@Artemious

【解决方案2】：

您的 TextBox 实际上根本没有获得焦点，以某种方式弹出阻止它，我可以从此 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);
}

【讨论】：

这是框架的bug还是在后面的代码中设置焦点正常？
看起来像一个错误，特别是如果 Toth Tibor 写的（它只发生在周年纪念更新中）是真的。在后面的代码中设置焦点更像是这里的“hack”，绝对不是很好的解决方案（但可以工作）。微软是否会修复这个问题，UWP 上的其他东西有很多错误是 MS 多年来没有修复的，所以我宁愿不等它。特别是如果没有人可以发布错误报告的地方。

【解决方案3】：

我可以重现该问题。我认为这是周年更新 (1607) SDK (14393) 中的错误，因为如果我将目标 SDK 降级到 10586，everythink 工作正常。

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

【讨论】：