【Win10】UAP/UWP/通用 開發之 RelativePanel

[Some information relates to pre-released product which may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.]

[涉及某信息預發布的版本可能在它的商業版本大幅修改。對於這里提供的信息，微軟不作任何擔保。]

在MSDN中，Windows 10 SDK 的東東上，都會聲明這一句話，我也引過來吧啦，他不擔保，我也保不了。

 

RelativePanel

RelativePanel 是Win10的 Xaml 中新的一個控件，看名字就知道是一個相對布局的控件。問了一個安卓的同學，說這個東西和他們的RelativeLayout是一樣子的，都是相對於其它的東西布局的。

一、示例

 

<StackPanel>
    <RelativePanel>
        <Rectangle x:Name="rectangle1" Fill="Red" Height="100" Width="100" />
        <Rectangle Fill="Blue" Height="50" Width="50" RelativePanel.RightOf="rectangle1" RelativePanel.Below="rectangle1"/>
    </RelativePanel>
    <RelativePanel>
        <Rectangle x:Name="rectangle2" Fill="Red" Height="100" Width="100" />
        <Rectangle x:Name="rectangle3" Fill="Blue" Height="50" Width="50" RelativePanel.RightOf="rectangle2" RelativePanel.AlignBottomWith="rectangle2"/>
        <Rectangle x:Name="rectangle4" Fill="Yellow" Height="100" Width="100" RelativePanel.RightOf="rectangle2"/>
        <Rectangle Fill="Blue" Height="50" Width="50" RelativePanel.RightOf="rectangle2" RelativePanel.AlignBottomWith="rectangle2"/>
    </RelativePanel>
</StackPanel>

二、主要屬性

RelativePanel的用法與 Canvas 是相似的，都是用附件屬性來設置。用法很簡單，在這里例一下屬性吧。

主要分以面四類

1.相對於控件的位置

RelativePanel.Above
RelativePanel.Below
RelativePanel.LeftOf
RelativePanel.RightOf

2.對齊於控件

RelativePanel.AlignTopWith
RelativePanel.AlignBottomWith
RelativePanel.AlignLeftWith
RelativePanel.AlignRightWith
RelativePanel.AlignHorizontalCenterWith
RelativePanel.AlignVerticalCenterWith

3.對齊於Panel，這個是bool 值

RelativePanel.AlignTopWithPanel
RelativePanel.AlignBottomWithPanel
RelativePanel.AlignLeftWithPanel
RelativePanel.AlignRightWithPanel
RelativePanel.AlignHorizontalCenterWithPanel
RelativePanel.AlignVerticalCenterWithPanel

三、總結

這個布局控件真心應該會很廣泛的，方便了布局方式，也使布局更加的靈活了。但對於自己適應空間的大小，可能會差一些，到真正應用的時候就知道啦。

 

PS: 之前寫了一次，瀏覽器莫名的刷新，全沒啦，今天又很是的忙，也覺得這個控件也沒寫多少寫的，就這么草草的結束的。

 

本文地址：http://www.cnblogs.com/gaoshang212/p/4539273.html