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

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の配置例

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

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

サイズを変更したStackPanel

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

Buttonを配置したStackPanel

配置してみるとわかりますが、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をデザイナで確認すると以下のようになります。

OrientationプロパティにHorizontalを指定した例

コメントを残す

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

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