UWP開發入門（二十）——鍵盤彈起時變更界面布局

　　UWP APP在鍵盤彈起或隱藏時，並不會自動處理界面布局。有時會出現鍵盤遮擋了下一個需要填寫的文本框，或是下一步按鈕的情況。本篇我們以登錄界面做例子，用一種巧妙簡單的方式在鍵盤彈起和隱藏時更改界面的布局。

　　首先我們創建一個登錄界面，很簡單的畫了兩個TextBlock,一個TextBox和一個PasswordBox，同時在下方放置來一個Button用來點擊登錄。

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition x:Name="rowBottom" Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="1" Grid.Row="1">用戶名</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="2">密碼</TextBlock>
        <TextBox Grid.Column="2" Grid.Row="1"></TextBox>
        <PasswordBox Grid.Column="2" Grid.Row="2"></PasswordBox>

        <Button Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="3" HorizontalAlignment="Stretch">登錄</Button>
    </Grid>

　　

　　可以注意到我們給最下面的RowDefinition設置了x:Name屬性，通常不會在代碼中操作的UIElement是不需要也不應該設置x:Name的（存在影響性能和內存泄漏的可能，且使用MVVM的話也不需要在ViewModel中操作UIElement）。

　　看到這里可以推測出我們是通過修改rowBottom的Height屬性，將該Row以上的頁面內容頂起，造成頁面向上推動的視覺效果。

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            InputPane.GetForCurrentView().Showing += MainPage_Showing;
            InputPane.GetForCurrentView().Hiding += MainPage_Hiding;
        }

        private void MainPage_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
        {
            this.rowBottom.Height = new GridLength(1, GridUnitType.Star);
        }

        private void MainPage_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
        {
            this.rowBottom.Height = new GridLength(args.OccludedRect.Height);
        }
    }

　　頁面的代碼部分我們可以看到，通過InputPane.GetForCurrentView()方法監聽鍵盤的Showing和Hiding事件。同時在Showing事件的響應方法中，將rowBottom的Height屬性設置為鍵盤的實際高度，以保持rowBottom以上的內容可見。而在Hiding事件中，則將rowBottom的Height屬性還原，已達到在鍵盤隱藏時還原布局的目的。

　　本篇的內容是不是有些過於簡單了?實際上這個操作RowDefinition高度的小技巧可以延伸出許多有意思的用法。比如聊天窗口彈出的表情區域，就可以如法炮制隱藏在鍵盤的下面。同理ColumDefinition通過隱藏和顯示，可以結合SplitView做出多個層次折疊的APP，再配合一下SizeChanged事件，想想就有點頭疼，千萬不能讓UE她們知道……

　　GitHub：

　　https://github.com/manupstairs/UWPSamples/tree/master/UWPSamples/UpdateLayoutWhenKeyboardPopup