[UWP] 要素をソフトウェアキーボードに追従させる

UWP で タッチキーボードの上に要素を表示する – みかづきメモ
を参考に別のアプローチ。

Prism を使っているのでコードは少し異なりますがやってることは大体一緒です。
InputPane.GetForCurrentView().[Showing|Hiding] にイベントを足して追従させたい要素の Margin を制御。
違うのは全体の Height ではなく該当要素の Marign を変更していることくらい。

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    	<!-- other contents -->
 
        <Grid VerticalAlignment="Bottom" Margin="{x:Bind ViewModel.ButtonsThickness, Mode=OneWay}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
 
            <Button Content="@" HorizontalAlignment="Stretch" Grid.Column="0" />
            <Button Content="#" HorizontalAlignment="Stretch" Grid.Column="1" />
            <Button HorizontalAlignment="Stretch" Grid.Column="2">
                <SymbolIcon Symbol="Camera"/>
            </Button>
            <Button Content="Tweet" HorizontalAlignment="Stretch" Grid.Column="3" />
        </Grid>
    </Grid>
</Page>
public class NewTweetPageViewModel : ViewModelBase
{
    private Thickness buttonsThickness = new Thickness();
 
    public Thickness ButtonsThickness
    {
        get { return this.buttonsThickness; }
        set { this.SetProperty(ref this.buttonsThickness, value); }
    }
 
    public override void OnNavigatedTo(NavigatedToEventArgs e, Dictionary<string, object> viewModelState)
    {
        base.OnNavigatedTo(e, viewModelState);
 
        Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing += InputPane_Showing;
        Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding += InputPane_Hiding;
    }
 
    public override void OnNavigatingFrom(NavigatingFromEventArgs e, Dictionary<string, object> viewModelState, bool suspending)
    {
        base.OnNavigatingFrom(e, viewModelState, suspending);
 
        Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing -= InputPane_Showing;
        Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding -= InputPane_Hiding;
    }
 
    // 注:何回か呼ばれる
    private void InputPane_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
    {
        this.ButtonsThickness = new Thickness(0, 0, 0, sender.OccludedRect.Height);
    }
 
    // 注:1回しか呼ばれない
    private void InputPane_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
    {
        this.ButtonsThickness = new Thickness(0, 0, 0, sender.OccludedRect.Height);
    }
}

【参考】
タッチ キーボードの表示への応答 – Windows app development


カテゴリー: UWP タグ: , , パーマリンク