UWP-RelativePanel使用详解

Windows 10已于7月29号面向全球发布,同时Universal Windows Platform(UWP) SDK也已正式放出,配合VS2015我们可以开发出通用的Windows App。
在Windows 10 SDK中,新增和改变了很多特性,其中用于适配的新控件RelativePanel将会成为我们开发中最常用的Windows 10组件。

UWP-RelativePanel使用详解_第1张图片
RelativePanel

代码示例:

 
 
 
 
 

特性详解:
开发中我们主要使用RelativePanel作为容器,使用RelativePanel的附加属性对其内容进行布局,例如RightOf、Above等,用法与Grid的附加属性类似。同时这些附加属性与iOS中新特性AutoLayout的约束很像,下面是对其附加属性详细解释。

用法 描述
RelativePanel.Above 设置当前element为目标element的上方
RelativePanel.AlignBottomWith 设置当前element与目标element底部对齐
RelativePanel.AlignBottomWithPanel 设置当前element与RelativePanel底部对齐
RelativePanel.AlignHorizontalCenterWith 设置当前element与目标element水平中心对齐
RelativePanel.AlignHorizontalCenterWithPanel 设置当前element与RelativePanel水平中心对齐
RelativePanel.AlignLeftWith 设置当前element与目标element左边框对齐
RelativePanel.AlignLeftWithPanel 设置当前element与RelativePanel左边框对齐
RelativePanel.AlignRightWith 设置当前element与目标element右边框对齐
RelativePanel.AlignRightWithPanel 设置当前element与RelativePanel右边框对齐
RelativePanel.AlignTopWith 设置当前element与目标element顶部对齐
RelativePanel.AlignTopWithPanel 设置当前element与RelativePanel顶部对齐
RelativePanel.AlignVerticalCenterWith 设置当前element与目标element垂直中心对齐
RelativePanel.AlignVerticalCenterWithPanel 设置当前element与RelativePanel垂直中心对齐
RelativePanel.Below 设置当前element为目标element的下方
RelativePanel.LeftOf 设置当前element为目标element的左边
RelativePanel.RightOf 设置当前element为目标element的右边

总结
RelativePanel能够实现几乎所有针对布局的约束,能够满足各种布局需求,配合VisualStateTrigger能够较完美的视线响应式的UI,满足Windows 10设想的小至IoT设备大至80寸Hub的应用情景。

原文转自:msp的昌伟哥哥

你可能感兴趣的:(UWP-RelativePanel使用详解)