レイアウトコントロール (Layout control) ノード¶
レイアウトコントロールノードを使用してコンテンツを配置します。レイアウトコントロールノードは、Kanzi アプリケーションの使用中に動的に追加または削除されるコンテンツや、ディレクトリ内のファイルなど外部ソースからロードされるコンテンツに特に便利です。
Grid Layout ノードを使用して、アイテムをテーブルに配置します。 グリッドレイアウト (Grid Layout) ノードについて詳しく知る > 
|
Stack Layout ノードを使用して、アイテムを隣り合わせに配置します。 スタックレイアウト (Stack Layout) ノードについて詳しく知る > 
|
Flow Layout ノードでアイテムを行に配置します。 フローレイアウト (Flow Layout) ノードについて詳しく知る > 
|
Trajectory Layout ノードを使用して、アイテムをトラジェクトリに沿って配置します。 トラジェクトリレイアウト (Trajectory Layout) ノードについて詳しく知る > 
|
Dock Layout ノードを使用して、レイアウトの内枠に沿ってアイテムを互いに相対的に配置します。 ドックレイアウト (Dock Layout) ノードについて詳しく知る > 
|
Content Layout ノードを使用して、UIコントロール内のコンテンツを単一のアイテムとして表示します。 コンテンツレイアウト (Content Layout) ノードについて詳しく知る > 
|
ユニバーサルレイアウトプロパティ¶
Kanzi アプリケーション内のアイテムを配置するには、次の変換タイプを使用できます。
レイアウト変換では、レイアウトパスの適用前にアイテムを変換します。
レンダー変換では、レイアウトパス適用後、アイテムをレンダリングする前に、アイテムを変換します。
Kanzi は、レイアウト変換を適用した後にレンダー変換を適用し、レイアウト計算には影響を与えません。例えば、これによりレイアウト内のノードをアニメーション化しても、レイアウトの再計算を引き起こさないようにすることができます。
レイアウト制御ノード、例えば Stack Layout ノードや Grid Layout ノードは、すべての直下の子ノードに対して独自の変換を適用します。これらの子ノードは、それぞれの子ノード、レイアウト変換、マージン、アライメントを考慮して独自のレイアウトを定義します。
配置はレイアウトの重力を定義します。例えば、Horizontal Alignment プロパティを Right に設定すると、ノードが親レイアウトの右側に揃います。配置プロパティを Stretch に設定すると、ノードは親レイアウトの寸法に合わせて伸びます。レイアウトがそのコンテンツをどのように処理するかを指定するには、Content Stretch プロパティを使用します。
マージンは、親レイアウトの境界に対するオブジェクトの間隔を強制します。例えば、Horizontal Margin プロパティを設定して、ノードの左側と右側の親レイアウトに対する間隔を設定します。
レイアウトプロパティはノードのバウンディングボックスサイズをオーバーライドします。デフォルトのレイアウトサイズは、バウンディングボックスとマージンに基づいてノードのサイズによって定義されます。
例えば、x軸方向に設定された Stack Layout ノードは、その寸法（バウンディングボックス）に基づいて2つの子ノードを隣接して配置します。Layout Width プロパティを使用することで、バウンディングボックスの幅を上書きすることができます。ノードのサイズより小さい値を設定するとノードが重なり、ノードのサイズより大きい値を設定すると2つのノード間のスペースが広がります。
すべてのレイアウトタスクが完了した後、Kanzi は親ノードからの最終的な変換を適用します。Screen ノードの下の RootPage は、Viewport 2D または Empty Node 2D の場合、レイアウトに特別なルールがあります。レイアウトプロパティで定義されていない限り、定義された画面サイズを継承します。
関連項目¶
コンテンツコントロール (Content control) ノード