Can't enter enter text in TextBox control inside Flyout

被刻印的时光 ゝ 提交于 2019-12-03 11:51:42

Set AllowFocusOnInteraction property to true on the AppBarButton.

Solution in XAML (for Windows 10, version 1607)

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

or if you are targeting Windows 10 Anniversary update (1607) build 14393 or higher, but the app's minimum Windows 10 version is lower, you should check if the AllowFocusOnInteraction property is available on the platform.

So you can't set the AllowFocusOnInteraction property in XAML. Instead, do it in code-behind:

Solution in C# code-behind

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

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

More info

You're running into a new feature on Windows 10 Anniversary update (1607), build 14393.

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.

your TextBox is actually never getting focus at all, somehow flyout prevents it, the only action I can get from this TextBox is PointerOver state - causing it to look like it's got focus, but it is not.

You need to set the focus in the code, for example when the flyout opens - it works, but may be not the nicest solution, cause you need to name the TextBox in order to get it from code behind.

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

and then code behind:

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

I can reproduce the issue. I think it's a bug in the Anniversary Update (1607) SDK (14393), because if I downgrade the target SDK to 10586 everythink work fine.

ps.: I don't know how to report this bug to the Microsoft.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!