【Win10應用開發】相對布局（RelativePanel）

外面的雨下得很大，老周就決定雨下漫筆了。

今天咱們說一個新控件——RelativePanel。本質上，它就是一個面板，面板干啥用的？面板就是一個容器，里面可以放其他對象，就像我們小時候玩的七巧板一樣，估計現在的孩子不玩了，現在的孩子除了游戲機就是游戲機，人生如戲啊，不對，應該叫人生如兒戲恰當一些。

RelativePanel控件公開了一堆附加屬性，既然是附加了，當然就是在子元素上使用的了。這些屬性我不再一一去說，相當沒意思。以后也不要問我哪個類在哪個命名空間、哪個類有哪些屬性之類的沒水平問題，我不回答這些問題，VS那么強大你都不會利用。

 

RelativePanel是通過相對位置來布局的，也就是說，不管面板的大小如何改變，元素之間或者元素與面板之間的相對位置不會改變。大體上可以分為兩類：一類是子元素相對於面板的位置；另一類是子元素與其他子元素之間的位置。

 

紙上談X的話我就不多說了，老周理論水平比較差。還是動手干活充實一點。

 

先看下面這個例子：

        <RelativePanel>
            <Button 
                Content="起飛"
                RelativePanel.AlignRightWithPanel="True"
                RelativePanel.AlignBottomWithPanel="True"/>
        </RelativePanel>

這是一個典型的是相對於面板進行定位的，AlignRightWithPanel設置為true表示按鈕對齊到面板的右側；AlignBottomWithPanel屬性值為true表示按鈕對齊到面板的底部。綜合起來就是按鈕停靠在面板的右下角。

我們來看看結果。

 

現在你可以調整窗口的大小。

然后你會發現，“起飛”按鈕始終處於面板的右下角。

 

下面再看一例。

        <RelativePanel>
            <Rectangle Width="200" Height="200" Fill="Blue" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Name="r1"/>
            <Rectangle Width="200" Height="100" Fill="Green" RelativePanel.RightOf="r1" RelativePanel.AlignTopWith="r1" />
        </RelativePanel>

這個例子中，面板里面有兩個矩形。第一個矩形是相對於面板進行布局的，它對齊面板到左側，並且在垂直方向上居中對齊。

第二個矩形是相對於第一個矩形來定位，RightOf屬性指定一個參考元素，當前元素就位於屬性指定的元素的右邊。在XAML文檔中，直接引用目標元素的名字就可以了。正因為如此，需要為第一個矩形取個名字r1。AlignTopWith屬性指定，這個矩形的對齊是相對於第一個矩形而言的，對齊到第一個矩形的頂部。

運行后的結果如下：

 

下面給大家看一個更猛的例子。

        <RelativePanel>
            <!-- 中 -->
            <Ellipse Fill="Red" Name="ec" Width="300" Height="300" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True"/>
            <!-- 左 -->
            <Ellipse Fill="Yellow" Width="50" Height="50" RelativePanel.LeftOf="ec" RelativePanel.AlignTopWith="ec"/>
            <Ellipse Fill="Brown" Width="50" Height="50" RelativePanel.LeftOf="ec" RelativePanel.AlignVerticalCenterWith="ec"/>
            <Ellipse Fill="Crimson" Width="50" Height="50" RelativePanel.LeftOf="ec" RelativePanel.AlignBottomWith="ec"/>
            <!-- 上 -->
            <Ellipse Fill="DarkSlateBlue" Width="50" Height="50" RelativePanel.Above="ec" RelativePanel.AlignLeftWith="ec"/>
            <Ellipse Fill="CornflowerBlue" Width="50" Height="50" RelativePanel.Above="ec" RelativePanel.AlignHorizontalCenterWith="ec"/>
            <Ellipse Fill="Linen" Width="50" Height="50" RelativePanel.Above="ec" RelativePanel.AlignRightWith="ec"/>
            <!-- 右 -->
            <Ellipse Fill="#FF24B831" Width="50" Height="50" RelativePanel.RightOf="ec" RelativePanel.AlignTopWith="ec"/>
            <Ellipse Fill="MediumSlateBlue" Width="50" Height="50" RelativePanel.RightOf="ec" RelativePanel.AlignVerticalCenterWith="ec"/>
            <Ellipse Width="50" Height="50" Fill="LawnGreen" RelativePanel.RightOf="ec" RelativePanel.AlignBottomWith="ec"/>
            <!-- 下 -->
            <Ellipse Width="50" Height="50" Fill="#FF7B30C7" RelativePanel.Below="ec" RelativePanel.AlignLeftWith="ec"/>
            <Ellipse Fill="#FFF05D26" Height="50" Width="50" RelativePanel.Below="ec" RelativePanel.AlignHorizontalCenterWith="ec"/>
            <Ellipse Width="50" Height="50" Fill="#FFBF1D7D" RelativePanel.Below="ec" RelativePanel.AlignRightWith="ec"/>
        </RelativePanel>

面板中間位置是一個名為ec的圓，在ec周圍有十二個小圓，積極團結在ec周圍。在定位時，先確定小圓相對於大圓的位置，比如RelativePanel.Below表示該小圓位於大圓的下方。接着確定小圓相對於大圓的對齊方式，如RelativePanel.AlignBottomWith設置小圓在垂直方向上對齊到大圓的底部。

 

得到的結果如下圖所示。

 

從上面這幾個例子，大家可以發現，RelativePanel使用起來並不復雜，你只要把握各個附加屬性的使用即可。

示例源碼下載：http://files.cnblogs.com/files/tcjiaan/relativeLayoutSample.zip