[UWPアプリ][StackPanel] 基本的な使用方法を理解する

UWP

2016.03.022019.12.15

StackPanel は文字通りコントロールをスタックして（積み重ねて）表示するコンテナです。

MainPage.xamlに標準で配置されているGridの代わりに配置することもできますし、もちろんGrid上に配置することも可能です。

まずは、Grid上にStackPanelを配置する例を見てみましょう。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel HorizontalAlignment="Left" Height="100" 
                Margin="10,10,0,0" 
                VerticalAlignment="Top" Width="100"/>
</Grid>

上記Xamlのデザインは以下の通りです。

左上にある正方形の枠が配置したStackPanelです。このままではコントロールを配置できないので、任意のサイズに変更しましょう。以下は幅を300に、高さを500にしたStackPanelです。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel HorizontalAlignment="Left" 
                Margin="10,10,0,0" 
                VerticalAlignment="Top" 
                Height="500"  Width="300"/>
</Grid>

上記のStackPanelにButtonを2つ配置してみましょう。

配置してみるとわかりますが、ButtonはStackPanelの上側に吸い付くように配置されます。

他のコントロールを配置した場合も同様に上側に吸い付くように配置されます。

ここまでは縦方向でしたので、横方向にスタックされるように変更してみましょう。

横方向にする場合はStackPanelのOrientationプロパティにHorizontalを指定します（既定ではVerticalになっています）。

以下にOrientationプロパティにHorizontalを指定する例を示します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel HorizontalAlignment="Left" 
                Margin="10,10,0,0" 
                VerticalAlignment="Top" 
                Height="500"  Width="300"
                Orientation="Horizontal">
        
        <Button x:Name="button" Content="Button" 
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch"/>
        <Button x:Name="button1" Content="Button" 
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch"/>
    </StackPanel>
</Grid>

上記のXamlをデザイナで確認すると以下のようになります。