UWP基础教程 - RelativePanel

在Windows10 UWP开发中,新增和改变了很多特性,这次给大家介绍下RelativePanel,这个控件其实和RelativeLayout基本一种使用方式,大大方便Android开发人员转行做UWP开发哈。

来看下官方的例子 ::: hljs-center

:::

<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.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的右边

这个控件相比Grid更加灵活,比较麻烦的地方是使用该控件布局需要对里面的子元素都加上{x:Name}扩展标记,对于我这种不爱命名的程序员,还是更喜欢用Grid。