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)。

  看到这里可以推测出我们是通过修改rowBottomHeight属性,将该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()方法监听键盘的ShowingHiding事件。同时在Showing事件的响应方法中,将rowBottomHeight属性设置为键盘的实际高度,以保持rowBottom以上的内容可见。而在Hiding事件中,则将rowBottomHeight属性还原,已达到在键盘隐藏时还原布局的目的。

  本篇的内容是不是有些过于简单了?实际上这个操作RowDefinition高度的小技巧可以延伸出许多有意思的用法。比如聊天窗口弹出的表情区域,就可以如法炮制隐藏在键盘的下面。同理ColumDefinition通过隐藏和显示,可以结合SplitView做出多个层次折叠的APP,再配合一下SizeChanged事件,想想就有点头疼,千万不能让UE她们知道……

  GitHub

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

posted @ 2016-08-04 21:04 楼上那个蜀黍 阅读(...) 评论(...) 编辑 收藏