WPF

C#WPFの道#2!StackPanelの使い方をわかりやすく解説!

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

StackPanelとは

StackPanelとは、コントロールを縦方向か横方向に整列して配置してくれるコントロールです。Orientationプロパティを指定して、縦方向に整列するのか、横方向に整列するのかを決定します。

縦方向に並べる場合 Vertical(何も指定しなければ、こちらが選択されます)
横方向に並べる場合 Horizontal

StackPanelの書き方

WPFではXamlという言語を使って、画面のデザインをしていきます。StackPanelを配置する場合は次のようになります。

サンプルコード

縦向きと横向きでコントロールを配置する場合、次のようにStackPanelを入れ子にします。

最初のStackPanelでコントロールを縦向きに配置し、その下から横方向にコントロールを配置していくために、別のStackPanelを配置し、その中にコントロールを配置しています。

また、各コントロールは、HeightとWidthプロパティを調整して、サイズを設定しています。

このXamlを記述したときの画面レイアウトは次のようになります。

VerticalAlignmentとHorizontalAlignment

VerticalAlignmentプロパティを指定することで、コントロールをどこから並べるかを指定できます。StackPanelの上からならTop、下からならBottom、真ん中からならCenterを選びます。

HorizontalAlignmentプロパティを指定することで、コントロールをどこから並べるかを指定できます。StackPanelの左からならLeft、右に寄せるならRight、中心ならCenterです。Stretchを選ぶと全体にひきのばされます。

Marginについて

Marginを設定することで余白の設定をすることができます。Margin=”10,20,30,40″と指定することで、左、上、右、下の順で余白が設定できます。

各コントロールのテキスト表示

StackPanelとは直接関係ないですが、Label等の各コントロールにテキストを設定する方法を解説します。WindowsFormsの場合はすべてTextプロパティに設定していましたが、LabelやButtonの場合はContentというプロパティに設定します。TextBoxはWindowsFormsと同様にTextプロパティとなります。

このXamlを記述したときの画面レイアウトは次のようになります。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。