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。