WPFコントロール:StackPanel(縦横並び配置)

スタックパネル コンピュータ
スタックパネル

StackPanelは、子要素を縦または横の一方向に隙間なく並べるためのレイアウトコンテナです。

縦積み(デフォルト)

XAML

<StackPanel>
    <Button Content="1" />
    <Button Content="2" />
    <Button Content="3" />
</StackPanel>
スタックパネル

スタックパネル

文字の高さがButtonの高さになり、幅は領域一杯に広がる。

横積み

XAML

<StackPanel Orientation="Horizontal">
    <Button Content="Apple" />
    <Button Content="Banana" />
    <Button Content="Cherry" />
</StackPanel>

横積みする場合、オプションでOrientation="Horizontal"をセットする。


文字列の幅がButtonの幅になり、高さは領域一杯に広がる。

垂直中央

<StackPanel VerticalAlignment="Center">
    <Button Content="Apple" />
    <Button Content="Banana" />
    <Button Content="Cherry" />
</StackPanel>

VerticalAlignment

  1. Top … 上端揃え
  2. Center … 中央揃え
  3. Bottom … 下端揃え
  4. Stretch … 全体に引き伸ばす

水平中央

<StackPanel HorizontalAlignment="Center">
    <Button Content="asagao" />
    <Button Content="tanpopo" />
    <Button Content="lily" />
</StackPanel>

HorizontalAlignment

  1. Left… 左端揃え
  2. Center … 中央揃え
  3. Right… 右端揃え
  4. Stretch … 全体に引き伸ばす

コメント