がりらぼ

WindowsRuntimeの応援ブログ

WPレイアウト-StackPanelの基礎

WindowsPhoneは現時点ですべての端末が解像度一定なのでGridで配置しようと思えばどんなものでも配置できるのですが、何かコンテンツを縦または横に一列にキレイに並べたい...とかそういうときにStackPanelを使います。
StackPanelのOrientationプロパティで向きを並べる向きを指定します。

Orientation="Horizontal"の場合
f:id:garicchi:20120223161020p:image

XAML

<StackPanel Orientation="Horizontal">

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

</StackPanel>


Orientation="Vertical"の場合
f:id:garicchi:20120223161021p:image

XAML

<StackPanel Orientation="Vertical">

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

</StackPanel>


StackPanelを組み合わせることによってマス目みたいなのも作成できます。
f:id:garicchi:20120223161022p:image

XAML

<StackPanel Orientation="Vertical">

<StackPanel Orientation="Horizontal">

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

<Button Content="hoge" />

</StackPanel>

</StackPanel>


このマス目みたいなレイアウトはSilverlight for Windows Phone Toolkit内のWrapPanelでも実現できます。

StackPanel内のコンテントがどう配置されるかは各コンテント内のHorizontalAlignmentプロパティかVerticalAlignmentプロパティで指定しましょう。

f:id:garicchi:20120223161024p:image

XAML

<StackPanel Orientation="Vertical">

<Button Content="hoge" />

<Button Content="hoge" Width="154" HorizontalAlignment="Left" />

<Button Content="hoge" Width="282" HorizontalAlignment="Right" />

<Button Content="hoge" Width="292" HorizontalAlignment="Left" />

</StackPanel>