相对布局RelativePanel

36-相对布局RelativePanel

它是 Windows10 新增的一种相对布局面板，WPF 中好像是没有的。控件的位置按相对位置来计算，后一个控件在什么位置依赖于前一个控件的基本位置。它是最灵活的一种布局。它也是通过附加属性来控制控件的布局。

对齐方式的附加属性

• Above：在某元素的上方
• Below：在某元素的下方
• LeftOf：在某元素的左方
• RightOf：在某元素的右方
• AlignBottomWith：本元素的下边缘和某元素的下边缘对齐
• AlignLeftWith：本元素的左边缘和某元素的左边缘对齐
• AlignRightWith：本元素的右边缘和某元素的右边缘对齐
• AlignTopWith：本元素的上边缘和某元素的上边缘对齐
• AlignVerticalCenterWith：本元素和某元素垂直居中对齐

上面的这些属性的值是前一个控件的 Name 值。

练一练

<RelativePanel>
    <Button
        Name="b1"
        Background="Red"
        Height="50"
        Width="50">按钮1</Button>
    <Button
        Name="b2"
        RelativePanel.Below="b1"
        Background="Green"
        Height="50"
        Width="50">按钮2</Button>
    <Button
        Name="b3"
        RelativePanel.RightOf="b2"
        Background="Blue"
        Height="50"
        Width="50">按钮3</Button>
</RelativePanel>Code language: HTML, XML (xml)