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