特定のコントロールに対して相対的な座標指定をする – RelativePanel

RelativePanel

RelativePanelを使うと特定のUIElementに対し、相対的な座標指定をすることができます。

RelativePanelは、RelativePanelの子要素に対し添付プロパティを提供します。

子要素でRelativePanel.とプロパティを指定すると相対的な座標を決定することができます。

  • 自身の座標を特定のコントロールの隣につけるプロパティ
    • Above
    • Below
    • LeftOf
    • RightOf
  • 自身の座標を特定のコントロールと同一にするプロパティ
    • AlignTopWith
    • AlignBottomWith
    • AlignLeftWith
    • AlignRightWith
  • 自身の座標を親要素のRelativePanelの隣につけるプロパティ
    • AlignTopWithPanel
    • AlignBottomWithPanel
    • AlignLeftWithPanel
    • AlignRightWithPanel

自身の座標を特定のコントロールの隣につけるプロパティ

Above

特定のUIElement(赤)の上に自身(青)のBottom座標をつけます

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" />
    <Rectangle RelativePanel.Above="red" Fill="Blue" Height="100" Width="100"/>
</RelativePanel>

Below

特定のUIElement(赤)の下に自身(青)のTop座標をつけます

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" />
    <Rectangle RelativePanel.Below="red" Fill="Blue" Height="100" Width="100"/>
</RelativePanel>

LeftOf

特定のUIElement(赤)の左に自身(青)のRight座標をつけます

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" />
    <Rectangle RelativePanel.LeftOf="red" Fill="Blue" Height="100" Width="100"/>
</RelativePanel>

 

RightOf

特定のUIElement(赤)の右に自身(青)のLeft座標をつけます

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" />
    <Rectangle RelativePanel.RightOf="red" Fill="Blue" Height="100" Width="100"/>
</RelativePanel>

自身の座標を特定のコントロールと同一にするプロパティ

AlignTopWith

自身(青)のTop座標を特定のUIElement(赤)のTopと同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" /
    <Rectangle RelativePanel.AlignTopWith="red" Fill="Blue" Height="100" Width="100"/>
</RelativePanel>

AlignBottomWith

自身(青)のBottom座標を特定のUIElement(赤)のBottomと同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" />
    <Rectangle RelativePanel.AlignBottomWith="red" Fill="Blue" Height="60" Width="60"/>
</RelativePanel>

AlignLeftWith

自身(青)のLeft座標を特定のUIElement(赤)のLeftと同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" />
    <Rectangle RelativePanel.AlignLeftWith="red" Fill="Blue" Height="60" Width="60"/>
</RelativePanel>

AlignRightWith

自身(青)のRight座標を特定のUIElement(赤)のRightと同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle x:Name="red" RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True" Fill="Red" Height="100" Width="100" />
    <Rectangle RelativePanel.AlignRightWith="red" Fill="Blue" Height="60" Width="60"/>
</RelativePanel>

自身の座標を親要素のRelativePanelの隣につけるプロパティ

AlignTopWithPanel

自身(青)のTop座標を親要素のRelativePanelのTop座標と同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle RelativePanel.AlignTopWithPanel="True" Fill="Blue" Height="60" Width="60"/>
</RelativePanel>

AlignBottomWithPanel

自身(青)のBottom座標を親要素のRelativePanelのBottom座標と同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle RelativePanel.AlignBottomWithPanel="True" Fill="Blue" Height="60" Width="60"/>
</RelativePanel>

AlignLeftWithPanel

自身(青)のLeft座標を親要素のRelativePanelのLeft座標と同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle RelativePanel.AlignLeftWithPanel="True" Fill="Blue" Height="60" Width="60"/>
</RelativePanel>

AlignRightWithPanel

自身(青)のRight座標を親要素のRelativePanelのRight座標と同一にします

<RelativePanel Margin="100" Background="#FFDEDEDE">
    <Rectangle RelativePanel.AlignRightWithPanel="True" Fill="Blue" Height="60" Width="60"/>
</RelativePanel>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください