Windows10开发手记-RelativePanel使用详解
Windows 10已于7月29号面向全球发布，同时Universal Windows Platform（UWP） SDK也已正式放出，配合VS 2015我们可以开发出通用的Windows App。
在Windows 10 SDK中，新增和改变了很多特性，其中用于适配的新控件RelativePanel将会成为我们开发中最常用的Windows 10组件。
布局示例
代码示例：
<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的应用情景。
