SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

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>

f:id:minami_SC:20150901004543p:plain:w350
これだけだったら、HorizontalAlignmentとVerticalAlignmentを設定する方法と何ら変わりないので、特にメリットはないですが。。
まずは基本ということで。


左右いっぱいに広げる

この二つのプロパティを同時にTrueにすることで、パネルの幅いっぱいに広げることができます。

        <RelativePanel>
            <Rectangle 
                       Height="100"
                       Fill="Blue"
                       Stroke="Black"
                       RelativePanel.AlignVerticalCenterWithPanel="True"
                       RelativePanel.AlignLeftWithPanel="True"
                       RelativePanel.AlignRightWithPanel="True"/>
        </RelativePanel>

f:id:minami_SC:20150901004559p:plain:w350
これも、HorizontalAlignmentをStretchにしてWidthをAutoにすればできるレイアウトです。
まぁ、ここまでは、別にRelativePanelじゃなくても、普通にできた範囲の内容。


相対的な配置

パネルの名前が表す通りの、xamlの要素同士を相対的に配置する機能を使ってみます。

これらのプロパティは、以下のように添付プロパティの値として、XAML上の要素名を書きます。

RelativePanel.LeftOf="origin"

こうすることで、XAML上の特定の要素に対する相対的な位置を指定できます。

基準となる要素の外側に接するように配置するプロパティ

以下のようなプロパティを使うことで、基準として指定したコントロールに対して上下左右に外側に接するように配置することができます。

添付プロパティ名 内容
LeftOf 基準にする要素の左端に接するように配置
Above 同様に上側に配置
RightOf 右側に・・・以下略
Below 下側に・・・略

f:id:minami_SC:20150901004939p:plain:w350

        <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 下側に・・・略

f:id:minami_SC:20150901005000p:plain:w350

        <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>