UWP Tips - Flyoutに配置したTextBoxを編集可能にする

1042 ワード
Xaml UWP Windows10 Xaml テキストリンク

概要

UWPのサンプルアプリを作成する中でつまづいたことを書き留めておく備忘録。
タイトルに書いている通り、Flyoutに配置したTextBoxに値が入力できなくて困った話。

解決策

今回作成したサンプルアプリは、Face APIを呼び出す仕様で、
そのAPI Keyを設定するUIをFlyoutで表示するTextBoxで実現しようと
考えてました。

フツーにTextBoxタグを書いただけでは、
なぜか編集できない・・・。

で、AppBarButton側にこれを入れたら編集できるようになります。
AllowFocusOnInteraction="True"

<AppBarButton Icon="Setting" Label="API Key Setting" AllowFocusOnInteraction="True">
    <AppBarButton.Flyout>
        <Flyout>
            <StackPanel Width="300">
                <TextBlock>API Key</TextBlock>
                <TextBox Name="SecretKey" Text="Test" />
            </StackPanel>
        </Flyout>
    </AppBarButton.Flyout>
</AppBarButton>

TextBoxだけじゃなくて、ComboBoxでも同様に操作できない現象が出るようですね。
なんか地味にはまる・・・。

C++コンソールクロック
jQueryで油断しがちな強力なセレクタとフィルタ