UWP基础教程 - RelativePanel

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

来看下官方的例子

<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。