RelativePanelを使ってみる
UWPでは、新たなUIレイアウト用のパネルとして、RelativePanelというものが加わっています。
このパネルで設定する各種プロパティをメモしときます。
RelativePanelの添付プロパティ
基本
親のパネルに対しての動作を決めるプロパティ。
最初に基準となる要素を配置する位置を決めるために使う感じかな。
添付プロパティ名 | 内容 |
---|---|
AlignLeftWithPanel | 親のパネルに対し左端を揃えて配置する |
AlignHorizontalCenterWithPanel | 親のパネルに対し水平方向中央に配置する |
AlignRightWithPanel | 親のパネルに対し右端を揃えて配置する |
AlignTopWithPanel | 親のパネルに対し上端を揃えて配置する |
AlignVerticalCenterWithPanel | 親のパネルに対し垂直方向中央に配置する |
AlignBottomWithPanel | 親のパネルに対し下端を揃えて配置する |
真ん中に配置してみる。
まずはRelativePanelを配置して、パネル内の上下左右の中央にRectangleを配置してみます。
AlignHorizontalCenterWithPanelとAlignVerticalCenterWithPanelをTrueにすれば、親のRelativePanelに対して中央に配置できます。
<RelativePanel> <Rectangle Width="100" Height="100" Fill="Blue" Stroke="Black" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True"/> </RelativePanel>
これだけだったら、HorizontalAlignmentとVerticalAlignmentを設定する方法と何ら変わりないので、特にメリットはないですが。。
まずは基本ということで。
左右いっぱいに広げる
この二つのプロパティを同時にTrueにすることで、パネルの幅いっぱいに広げることができます。
<RelativePanel> <Rectangle Height="100" Fill="Blue" Stroke="Black" RelativePanel.AlignVerticalCenterWithPanel="True" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"/> </RelativePanel>
これも、HorizontalAlignmentをStretchにしてWidthをAutoにすればできるレイアウトです。
まぁ、ここまでは、別にRelativePanelじゃなくても、普通にできた範囲の内容。
相対的な配置
パネルの名前が表す通りの、xamlの要素同士を相対的に配置する機能を使ってみます。
これらのプロパティは、以下のように添付プロパティの値として、XAML上の要素名を書きます。
RelativePanel.LeftOf="origin"
こうすることで、XAML上の特定の要素に対する相対的な位置を指定できます。
基準となる要素の外側に接するように配置するプロパティ
以下のようなプロパティを使うことで、基準として指定したコントロールに対して上下左右に外側に接するように配置することができます。
添付プロパティ名 | 内容 |
---|---|
LeftOf | 基準にする要素の左端に接するように配置 |
Above | 同様に上側に配置 |
RightOf | 右側に・・・以下略 |
Below | 下側に・・・略 |
<RelativePanel> <Rectangle x:Name="origin" Width="100" Height="100" Fill="Blue" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Stroke="Black" /> <Border Width="70" Height="70" Background="Cyan" RelativePanel.LeftOf="origin"> <TextBlock Text="LeftOf" /> </Border> <Border Width="70" Height="70" Background="Cyan" RelativePanel.Above="origin"> <TextBlock Text="Above" /> </Border> <Border Width="70" Height="70" Background="Cyan" RelativePanel.RightOf="origin"> <TextBlock Text="RightOf" /> </Border> <Border Width="70" Height="70" Background="Cyan" RelativePanel.Below="origin"> <TextBlock Text="Below" /> </Border> </RelativePanel>
基準となる要素の内側に接するように配置するプロパティ
以下のプロパティでは、それぞれ基準となる要素の上下左右各
添付プロパティ名 | 内容 |
---|---|
AlignLeftWith | 基準にする要素と左端の位置を揃えて配置 |
AlignTopWith | 同様に上側を揃えて配置 |
AlignRightWith | 右側に・・・以下略 |
AlignBottomWith | 下側に・・・略 |
<RelativePanel> <Rectangle x:Name="origin" Width="200" Height="200" Fill="Blue" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Stroke="Black" /> <Border Width="70" Height="70" Background="Cyan" RelativePanel.AlignLeftWith="origin"> <TextBlock Text="AlignLeftWith" TextWrapping="Wrap" /> </Border> <Border Width="70" Height="70" Background="Cyan" RelativePanel.AlignTopWith="origin"> <TextBlock Text="AlignTopWith" TextWrapping="Wrap" /> </Border> <Border Width="70" Height="70" Background="Cyan" RelativePanel.AlignRightWith="origin"> <TextBlock Text="AlignRightWith" TextWrapping="Wrap" /> </Border> <Border Width="70" Height="70" Background="Cyan" RelativePanel.AlignBottomWith="origin"> <TextBlock Text="AlignBottomWith" TextWrapping="Wrap" /> </Border> </RelativePanel>