UWP开发入门——键盘弹起时变更界面布局
本帖最后由 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所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!