Windows10开发手记-RelativePanel使用详解

Changwei | 8/4/2015 2:46:00 PM


Windows 10已于7月29号面向全球发布,同时Universal Windows Platform(UWP) SDK也已正式放出,配合VS 2015我们可以开发出通用的Windows App。

在Windows 10 SDK中,新增和改变了很多特性,其中用于适配的新控件RelativePanel将会成为我们开发中最常用的Windows 10组件。

RelativePanel示例

布局示例

代码示例:

 

<RelativePanel BorderBrush="Gray" BorderThickness="10">
    <Rectangle x:Name="RedRect" Fill="Red" MinHeight="100" MinWidth="100"/>
    <Rectangle x:Name="BlueRect" Fill="Blue" MinHeight="100" MinWidth="100" 
               RelativePanel.RightOf="RedRect" />
    <!-- Width is not set on the green and yellow rectangles.
         It's determined by the RelativePanel properties. -->
    <Rectangle x:Name="GreenRect" Fill="Green" MinHeight="100" Margin="0,5,0,0" 
               RelativePanel.Below="RedRect" 
               RelativePanel.AlignLeftWith="RedRect" 
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Yellow" MinHeight="100" 
               RelativePanel.Below="GreenRect" 
               RelativePanel.AlignLeftWith="BlueRect" 
               RelativePanel.AlignRightWithPanel="True"/>
</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的应用情景。