WPFのTextBoxがソフトウェアキーボードと被ってしまわないようにXAMLだけで自動で最上位に移動させてみる

TextBoxがソフトウェアキーボードと被ると入力ができなくなってしまうので、ソフトウェアキーボードが表示されたら自動でTextBoxは画面の最上位に移動して欲しいケースはタッチパネルPC向けのアプリケーション開発では必ず出てくるかと思います。ただこの自動で画面最上位に移動するコードをViewModelに書くのは面倒ですし、イベントでxaml.csに書くのも気が引けます。今回はこの要件をXAMLだけで実現してみます。

EventTriggerとStoryboadでMarginを変える

作戦としてはEventTriggerでStoryboardを発動させてパネルのMarginを変えてしまうというものです。パネル全体を上に移動させてしまうことで、あたかもTextBoxが画面最上位に移動したかのように振る舞います。

<TextBox>
    <TextBox.Triggers>
        <EventTrigger RoutedEvent="GotFocus">
            <BeginStoryboard>
                <Storyboard>
                    <ThicknessAnimation Storyboard.TargetName="Panel"
                                        Storyboard.TargetProperty="Margin"
                                        To="0,-93,0,0" Duration="0:0:0.2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="LostFocus">
            <BeginStoryboard>
                <Storyboard>
                    <ThicknessAnimation Storyboard.TargetName="Panel"
                                        Storyboard.TargetProperty="Margin"
                                        To="0" Duration="0:0:0.2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </TextBox.Triggers>
</TextBox>

また、LostFocusでMarginを元に戻してあげるのも忘れないようにしてください。TextBoxの領域外を触るとフォーカスが外れてMarginが元に戻ることで、画面の表示位置が戻るような振る舞いをします。コード全体はGithubで公開しているので、触ってみたい方はこちらからどうぞ。
github.com

実際に動かしてみたキャプチャ動画

youtu.be