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。

Comment