がりらぼ

WindowsRuntimeの応援ブログ

WPレイアウト-StackPanelの基礎

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

Orientation="Horizontal"の場合

XAML

<StackPanel Orientation="Horizontal">
                <Button Content="hoge" />
                <Button Content="hoge" />
                <Button Content="hoge" />
                <Button Content="hoge" />
</StackPanel>

Orientation="Vertical"の場合

XAML

<StackPanel Orientation="Vertical">
                <Button Content="hoge" />
                <Button Content="hoge" />
                <Button Content="hoge" />
                <Button Content="hoge" />
</StackPanel>

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

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プロパティで指定しましょう。

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>