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的應用情景。

?

轉載于:https://www.cnblogs.com/mantgh/p/4702007.html

總結

以上是生活随笔為你收集整理的Windows10开发手记-RelativePanel使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。