Avalonia UI - StackPanel

概要

StackPanelは、Avalonia UIにおける最も基本的なレイアウトコントロールの1つである。

StackPanelは、子要素を垂直方向または水平方向に積み重ねることにより、一列に並べることができる。

また、Orientationプロパティを使用して、並べる方向を指定することができる。(デフォルトは垂直方向)

StackPanelは子要素のサイズを自動的に調整する。
例えば、垂直方向の場合、幅は親コンテナに合わせて調整されて、高さは子要素のサイズに応じて決定される。 (StackPanelの内部では、子要素のスタックに垂直なsizeプロパティが設定されていない場合、子要素は使用可能なスペースを埋めるために引き伸ばされる)

水平方向の場合はその逆となる。
(例えば、水平方向では、子コントロールの高さが設定されていない場合、子コントロールは引き伸ばされる)

以下の例では、垂直スタックパネルの作成方法を示している。
子要素は幅に合わせて引き伸ばされて、StackPanelの全体の高さは子要素の高さの合計に等しくなる。

 <StackPanel Width="200">
    <Rectangle Fill="Red"    Height="50"/>
    <Rectangle Fill="Blue"   Height="50"/>
    <Rectangle Fill="Green"  Height="100"/>
    <Rectangle Fill="Orange" Height="50"/>
 </StackPanel>

Spacingプロパティを使用することで、子要素間の間隔を指定できる。
これにより、要素間に均一な空白を設けることが可能となる。

また、HorizontalAlignmentプロパティあるいはVerticalAlignmentプロパティを使用して、パネル内での子要素の配置を制御できる。
これらは特に、パネルのサイズが子要素の合計サイズより大きい場合に効果を発揮する。

StackPanelは単純なレイアウトに適しているが、複雑なレイアウトを作成する場合は、GridやDockPanel等のより柔軟なレイアウトコントロールを使用する必要がある。

実務では、フォームの入力項目を縦に並べる場合やツールバーのボタンを横に並べる場合等、シンプルな1次元のレイアウトを実現する場合によく使用される。

基本的なプロパティ

プロパティ	説明
Orientation	スタックの方向を設定する。 水平または垂直から選択する。 Vertical 垂直方向に配置 (デフォルト値) Horizontal 水平方向に配置
Spacing	子要素間の間隔をピクセル単位で指定する。 例えば、10を指定すると各要素間に10ピクセルの空白が設定される。 デフォルトは0
Background	パネルの背景色を指定する。 単色やグラデーション等、様々な背景スタイルを適用できる。
Margin	StackPanel自体の外側の余白を指定する。 上下左右それぞれに異なる値を設定可能である。
Padding	StackPanel内部の余白を指定する。 これにより、子要素との間にスペースを設けることができる。
HorizontalAlignment	親コンテナ内でのStackPanelの水平方向の配置位置を指定する。 以下に示す値から選択する。 Left Center Right Stretch
VerticalAlignment	親コンテナ内でのStackPanelの垂直方向の配置位置を指定する。 以下に示す値から選択する。 Top Center Bottom Stretch
IsVisible	StackPanelの表示 / 非表示を制御する。 falseを指定する場合、StackPanelとその子要素が非表示になる。

StackPanelのプロパティの詳細を知りたい場合は、Avalonia UIの公式Webサイトを参照すること。

基本的なイベント

イベント	説明
PointerEntered (マウスオーバー)	マウスポインタがStackPanel上に入った時に発生する。 例えば、パネルにマウスが重なった時に背景色を変更する、あるいは、ツールチップを表示する場合に使用する。 <StackPanel PointerEntered="OnPointerEntered">
PointerExited (マウスアウト)	マウスポインタがStackPanelから出た時に発生する。 例えば、PointerEnteredで変更した背景色を元に戻す、あるいは、表示したツールチップを非表示にする場合に使用する。 <StackPanel PointerExited="OnPointerExited">
Loaded (読み込み完了)	StackPanelがビジュアルツリーに読み込まれた時に発生する。 例えば、パネルの初期化処理や子要素の動的な追加等を行う場合に使用する。 <StackPanel Loaded="OnLoaded">
Tapped (タップ / クリック)	StackPanel上でタップまたはクリックされた時に発生する。 例えば、パネル全体をクリック可能な領域として使用する場合、あるいは、特定のアクションを実行する場合に使用する。 <StackPanel Tapped="OnTapped">
SizeChanged (サイズ変更)	StackPanelのサイズが変更された時に発生する。 例えば、パネルのサイズに応じて子要素のレイアウトを動的に調整する必要がある場合に使用する。 <StackPanel SizeChanged="OnSizeChanged">

各イベントはコードビハインドを使用して、以下に示すように処理することができる。
以下の例では、マウスポインタがStackPanel上に入った時、StackPanelの背景色を変更している。

 private void OnPointerEntered(object sender, PointerEventArgs e)
 {
    var panel        = (StackPanel)sender;
    panel.Background = Brushes.LightBlue;
 }