Grid コンテナー コントロールを使用すると、子コンポーネントをグリッド パターンでレイアウトできます。 行と列の観点から、各コンポーネントの場所を正確に制御できます。
このコンテナーは CSS スタイルのグリッドと同様に機能します。 行と列を定義し、そのプロパティを使用して各子コンポーネントの正確な位置を設定します。
Description
Grid コンテナー コントロールは、キャンバス アプリ用の柔軟なレイアウト システムを提供します。 これによって、次のことが可能になります:
- 子コンポーネントをグリッド パターンに配置する
- 子ごとに 行と列の開始と終了 を指定する
- コンテナーまたは画面サイズが変更されたときに応答性の高い調整を行う
- グリッド内の配置、間隔、オーバーフローを制御する
この方法を使用すると、各コンポーネントを手動で配置する必要はありません。 アプリ の保守性と応答性が向上します。
Display properties
- ギャップ – グリッド内の子コンポーネント間の間隔 (ピクセル単位)。
- [列] – グリッド レイアウト内の列の数。
- 行 – グリッド レイアウト内の行数。
サイズと位置
- X – 親コンテナーの左端からの水平方向の距離 (親がない場合は画面)。
- Y – 親コンテナーの上端からの垂直方向の距離 (親がない場合は画面)。
- 幅 – コントロールの左端と右端の間の距離。
- Height – コントロールの上端と下端の間の距離。
- 埋め込み - コンテナーの端とその子コンポーネントの間の間隔。
色と境界線
- 色 – コンテナーの前景色。必要に応じて、罫線とテキストに使用されます。
-
Border
- スタイル – 罫線の種類: 実線、破線、点線、またはなし。
- 太さ – 境界線の幅 (ピクセル単位)。
- 色 – 罫線の色。
- 境界線の半径 – コンテナーの角を丸める角度。 この設定は、すべてのコーナーに均一に適用することも、詳細設定で個々のコーナーに分割することもできます。
- ドロップ シャドウ – コンテナーに適用されるシャドウ効果。 オプション: None、Light、Medium、Heavy。
Visibility
- 表示 – グリッド コンテナーが表示されるかどうか。 オンまたはオフを切り替えます。
グリッド レイアウトプロパティ (子固有)
- 列の開始/終了 – 子コンポーネントの開始列と終了列を定義します。
- 行の開始/行の終了 – 子コンポーネントの開始行と終了行を定義します。
Example
レスポンシブ レイアウトで空のキャンバス アプリをゼロから作成します。
新しい画面を作成します。
[レイアウト] の [挿入] ウィンドウで、[グリッド コンテナー] を選択します。
全画面表示を占有するようにコンテナーのプロパティを設定します。
- X = 0
- Y = 0
- 幅 = Parent.Width
- 身長 = 親。身長
ボタン、テキスト入力、アイコン、メディアなど、いくつかの子コンポーネントを追加します。 子ごとに、グリッド配置プロパティを設定します。
- 列の開始/終了
- 行の開始/終了
- セル内で整列
F5 キーを押してプレビューします。 画面のサイズを変更し、子コンポーネントが グリッド位置にどのように残っているかを 確認し、応答性を調整します。