UWP开发入门——键盘弹起时变更界面布局

Cle****-he UID.1073626
2016-08-24 发表

本帖最后由 Clever-he 于 2016-8-24 09:24 编辑

UWP APP在键盘弹起或隐藏时,并不会自动处理界面布局。有时会出现键盘遮挡了下一个需要填写的文本框,或是下一步按钮的情况。本篇我们以登录界面做例子,用一种巧妙简单的方式在键盘弹起和隐藏时更改界面的布局。

首先我们创建一个登录界面,很简单的画了两个TextBlock,一个TextBox和一个PasswordBox,同时在下方放置来一个Button用来点击登录。

[mw_shl_code=xml,false]<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>[/mw_shl_code]

***附件停止解析******附件停止解析***

可以注意到我们给最下面的RowDefinition设置了x:Name属性,通常不会在代码中操作的UIElement是不需要也不应该设置x:Name的(存在影响性能和内存泄漏的可能,且使用MVVM的话也不需要在ViewModel中操作UIElement)。

看到这里可以推测出我们是通过修改rowBottom的Height属性,将该Row以上的页面内容顶起,造成页面向上推动的视觉效果。

[mw_shl_code=csharp,false] 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);
}
}[/mw_shl_code]

页面的代码部分我们可以看到,通过InputPane.GetForCurrentView()方法监听键盘的Showing和Hiding事件。同时在Showing事件的响应方法中,将rowBottom的Height属性设置为键盘的实际高度,以保持rowBottom以上的内容可见。而在Hiding事件中,则将rowBottom的Height属性还原,已达到在键盘隐藏时还原布局的目的。

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

GitHub:***链接停止解析***

来自:楼上那个蜀黍 开发者交流群:53078485,期待你的加入!

敬告:
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!
全部回复:
wucd UID.573665
2016-08-24 使用 Lumia 1520 回复

学起来!

vbfool UID.352791
2016-08-24 回复

封装成StateTrigger吧,这样就方便了。

lib****uai UID.471425
2016-09-01 使用 Lumia 1520 回复

看不懂,不过很厉害

本站使用Golang构建,点击此处申请开源鄂ICP备18029942号-4联系站长投诉/举报