【Win10開發】相對布局——RelativePanel控件

我們知道，Win10引入了Universal Windows Platform，那麼我們針對不同的平台該有不同的布局，此時我們就需要相對布局，就會用到RelativePanel這個控件。我們不再将控件寫死，而是根據界面大小來進行控件布局。

首先我們先看一個小例子。

我們可以看到不論界面多大，重新整理按鈕始終保持在視窗的最中間。這就是相對布局。

接下來，我們看看xaml代碼。

1         <RelativePanel>
2             <Button RelativePanel.AlignHorizontalCenterWithPanel="True" 
3                     RelativePanel.AlignVerticalCenterWithPanel="True"
4                     Content="重新整理" FontFamily="Microsoft YaHei Light" />
5         </RelativePanel>      

AlignHorizontalCenterWithPanel是讓元素保持在視窗水準方向的中央，AlignVerticalCenterWithPanel是讓元素保持在視窗豎直方向的最中央。

當然，不僅是元素與視窗之間的相對布局，還可以是元素與元素之間的。比如如下的例子。

我們可以看到不論界面大小，正方形始終處于圓形的右上方，接下來我們看看xaml代碼。

<RelativePanel>
            <Ellipse Height="200" Width="200" Fill="LightBlue" Name="e1" 
                     RelativePanel.AlignLeftWithPanel="True"
                     RelativePanel.AlignVerticalCenterWithPanel="True"/>
            <Rectangle Height="50" Width="50" Fill="Black"
                       RelativePanel.RightOf="e1"
                       RelativePanel.AlignTopWith="e1"/>
        </RelativePanel>      

将Ellipse的Name設定為“e1”，将Rectangle的RightOf屬性和AlignTopWith屬性指向e1，我們可以知道例子中的Ellipse是相對于視窗布局的，Rectangle是相對于Ellipse元素布局的。

以上就是相對布局的簡單介紹。

轉載于:https://www.cnblogs.com/skyshalo/p/5003367.html