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

Question

我想用 CommandBar 和 Flyout 来构建这样的东西。

用户应单击 CommandBar 中的按钮（Flyout 打开），然后在 TextBox 中输入文本，然后单击 [=15= 右侧的按钮] 开始搜索请求。问题是，当我单击 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

您的 TextBox 实际上根本没有获得焦点，弹出窗口以某种方式阻止了它，我可以从此 TextBox 获得的唯一操作是 PointerOver 状态 - 使其看起来像是获得了焦点，但事实并非如此。

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

<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 2

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

ps.: 我不知道如何向 Microsoft 报告此错误。

Answer 3

在 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 中使用。

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

Can't enter enter text in TextBox control inside Flyout

c#

xaml

commandbar

flyout

uwp

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

C# 代码隐藏解决方案

更多信息