15

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

アプリの最小バージョンが Anniversary update 1607 (ビルド 10.0.14393) よりも低い場合 (ターゲット バージョンが 1607AllowFocusOnInteraction以降であっても)、プロパティを 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;

古い W​​indows 10 バージョンでも XAML で使用できる添付プロパティにラップすることもできます。

より詳しい情報

これは、Windows 10 Anniversary Update (1607)、ビルド 14393の新機能です。

これは、ほとんどのアプリ バーの使用に対する改善ですが、あなたの使用には干渉するため、ビルドを 10586 ではなく 14393 に変更する場合は、デフォルト値をオーバーライドする必要があります。

AppBarButton に接続された Flyout の ComboBox が 1607 でマウス入力を失うというブログ投稿があります。また、添付プロパティの実装も含まれています。

于 2016-09-21T08:28:15.377 に答える
1

あなたの TextBox は実際にはまったくフォーカスを得ることはありません.フライアウトはそれを防ぎます.

たとえば、フライアウトが開いたときに、コードにフォーカスを設定する必要があります。これは機能しますが、コード ビハインドから取得するために 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

問題を再現できます。Anniversary Update (1607) SDK (14393) のバグだと思います。なぜなら、ターゲット SDK を 10586 にダウングレードすると、すべて正常に動作するからです。

ps .: このバグを Microsoft に報告する方法がわかりません。

于 2016-08-23T10:09:43.720 に答える