15

我想使用CommandBarand aFlyout来构建这样的东西。

搜索弹出

用户应单击CommandBar( Flyoutopens) 中的按钮，然后在 中输入文本，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>
4

3 回答 3

23

将AllowFocusOnInteraction属性设置true为AppBarButton。

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或更高版本），您也无法AllowFocusOnInteraction直接在 XAML 中设置该属性。相反，您应该在代码隐藏中执行此操作。

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 时，您需要覆盖默认值。

这是附加到 AppBarButton 的 Flyout 上的博客文章ComboBox 在 1607 上丢失鼠标输入。它还包含附加的属性实现。

于 2016-09-21T08:28:15.377 回答
1

您的 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);
}
于 2016-08-23T09:45:59.680 回答
0

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

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

于 2016-08-23T10:09:43.720 回答