无法在Flyout的TextBox控件中输入输入文本 [英] Can't enter enter text in TextBox control inside Flyout

问题描述

我想使用CommandBar和Flyout来构建类似的东西.

I want to use the CommandBar and a Flyout to build something like this.

用户应单击CommandBar中的按钮(打开Flyout)，然后在TextBox中输入文本，然后单击TextBox右侧的按钮以开始搜索请求. 问题是，当我单击文本框时，我无法输入文本.在我写点东西之前，它似乎失去了重点.下面是示例代码.怎么了?

The user should click the button in the CommandBar (Flyout opens), then enter text in the TextBox and then click the button on the right of TextBox to start the search request. The problem is, that when I click at the TextBox I can't enter text. It seems that it loses the focus, before I can write something. Below is the sample code. Whats wrong?

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

推荐答案

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

    <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属性.相反，您应该在代码隐藏中执行此操作.

If the app's minimum version is lower than Anniversary update 1607 (build 10.0.14393) (even if your target version is 1607 or higher), you can't set the AllowFocusOnInteraction property directly in XAML. Instead, you should do it in code-behind.

// 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中使用的附加属性.

You can also wrap it into an attached property that can be used in XAML even on old Windows 10 versions.

这是 Windows 10周年更新(1607)，内部版本14393上的一项新功能.

This is a new feature on Windows 10 Anniversary update (1607), build 14393.

对于大多数应用栏使用而言，这是一个改进，但会干扰您的应用栏，因此，当您将内部版本更改为14393而不是10586时，您将需要覆盖默认值.

That's an improvement for most app bar uses but interferes with yours, so you'll need to override the default value when you change your build to rather 14393 instead of 10586.

这是博客文章

Here's a blog post ComboBox on a Flyout attached to an AppBarButton loses mouse input on 1607. It also contains the attached property implementation.

这篇关于无法在Flyout的TextBox控件中输入输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！