12,925
回編集
「Avalonia UI - StackPanel」の版間の差分
ナビゲーションに移動
検索に移動
→概要
(→概要) |
(→概要) |
||
| 12行目: | 12行目: | ||
水平方向の場合はその逆となる。<br> | 水平方向の場合はその逆となる。<br> | ||
(例えば、水平方向では、子コントロールの高さが設定されていない場合、子コントロールは引き伸ばされる)<br> | (例えば、水平方向では、子コントロールの高さが設定されていない場合、子コントロールは引き伸ばされる)<br> | ||
<br> | |||
以下の例では、垂直スタックパネルの作成方法を示している。<br> | |||
子要素は幅に合わせて引き伸ばされて、StackPanelの全体の高さは子要素の高さの合計に等しくなる。<br> | |||
<syntaxhighlight lang="xml"> | |||
<StackPanel Width="200"> | |||
<Rectangle Fill="Red" Height="50"/> | |||
<Rectangle Fill="Blue" Height="50"/> | |||
<Rectangle Fill="Green" Height="100"/> | |||
<Rectangle Fill="Orange" Height="50"/> | |||
</StackPanel> | |||
</syntaxhighlight> | |||
<br> | <br> | ||
Spacingプロパティを使用することで、子要素間の間隔を指定できる。<br> | Spacingプロパティを使用することで、子要素間の間隔を指定できる。<br> | ||
| 22行目: | 33行目: | ||
<br> | <br> | ||
実務では、フォームの入力項目を縦に並べる場合やツールバーのボタンを横に並べる場合等、シンプルな1次元のレイアウトを実現する場合によく使用される。<br> | 実務では、フォームの入力項目を縦に並べる場合やツールバーのボタンを横に並べる場合等、シンプルな1次元のレイアウトを実現する場合によく使用される。<br> | ||
<br><br> | |||
== 基本的なプロパティ == | |||
<center> | |||
{| class="wikitable" | style="background-color:#fefefe;" | |||
|- | |||
! style="background-color:#00ffff;" | プロパティ | |||
! style="background-color:#00ffff;" | 説明 | |||
|- | |||
| Orientation || スタックの方向を設定する。<br>水平または垂直から選択する。<br> | |||
* Vertical | |||
*: 垂直方向に配置 (デフォルト値) | |||
* Horizontal | |||
*: 水平方向に配置 | |||
|- | |||
| Spacing || 子要素間の間隔をピクセル単位で指定する。<br>例えば、10を指定すると各要素間に10ピクセルの空白が設定される。<br><br>デフォルトは<code>0</code> | |||
|- | |||
| Background || パネルの背景色を指定する。<br>単色やグラデーション等、様々な背景スタイルを適用できる。 | |||
|- | |||
| Margin || StackPanel自体の外側の余白を指定する。<br>上下左右それぞれに異なる値を設定可能である。 | |||
|- | |||
| Padding || StackPanel内部の余白を指定する。<br>これにより、子要素との間にスペースを設けることができる。 | |||
|- | |||
| HorizontalAlignment || 親コンテナ内でのStackPanelの水平方向の配置位置を指定する。<br><br>以下に示す値から選択する。<br> | |||
* Left | |||
* Center | |||
* Right | |||
* Stretch | |||
|- | |||
| VerticalAlignment || 親コンテナ内でのStackPanelの垂直方向の配置位置を指定する。<br><br>以下に示す値から選択する。<br> | |||
* Top | |||
* Center | |||
* Bottom | |||
* Stretch | |||
|- | |||
| IsVisible || StackPanelの表示 / 非表示を制御する。<br><code>false</code>を指定する場合、StackPanelとその子要素が非表示になる。 | |||
|} | |||
</center> | |||
<br> | |||
StackPanelのプロパティの詳細を知りたい場合は、[https://reference.avaloniaui.net/api/Avalonia.Controls/StackPanel/#Properties Avalonia UIの公式Webサイト]を参照すること。<br> | |||
<br><br> | |||
== 基本的なイベント == | |||
<center> | |||
{| class="wikitable" | style="background-color:#fefefe;" | |||
|- | |||
! style="background-color:#00ffff;" | イベント | |||
! style="background-color:#00ffff;" | 説明 | |||
|- | |||
| || | |||
|- | |||
| || | |||
|- | |||
| || | |||
|} | |||
</center> | |||
<br><br> | <br><br> | ||