Content Layout ノードを使用する¶
Content Layout ノードを使用して、UIコントロール内のコンテンツを単一のアイテムとして表示します。
例えば、リストアイテムやボーダー、背景、アイコン、ラベルを持つボタンのレイアウトを作成するために、Content Layout ノードを使用します。
デフォルトで、Content Layout ノードのサイズは、その子ノードのサイズによって決定されます。デフォルトで子ノードを持たない Content Layout ノードは、利用可能なすべてのスペースを占めるようにストレッチします。
Content Layout ノードは、その子ノードを配置しません。Content Layout ノード内のノードを配置するには、別のレイアウトコントロールノードを使用してください。レイアウトコントロール (Layout control) ノード を参照してください。
Content Layout を使用すると、次のようなレイアウトを作成できます。
Content Layout ノードのコンテンツは、Content Layout ノードのサイズを決定します。コンテンツのサイズに適応する Content Layout ノードを作成する を参照してください。
Content Layout ノードのコンテンツは、設定したサイズに適応します。固定サイズに適応するコンテンツを持つ Content Layout を作成する を参照してください。
Content Layout ノードの作成¶
Content Layout ノードを作成するには：
Node Tree Alt を押しながら右クリック で、Content Layout ノードを作成したいノードを選択し、Content Layout 3D または Content Layout 2D のいずれかを選択します。
3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Node Tree にコンテンツを Content Layout ノードに追加します。
例えば、Content Layout 2D ノードを作成した場合、Text Block 2D ノードを作成してください。
Content Layout ノードは、その子ノードを配置しません。Content Layout ノード内のノードを配置するには、別のレイアウトコントロールノードを使用してください。レイアウトコントロール (Layout control) ノード を参照してください。
Content Layout ノードのコンテンツの周りにスペースを追加するには、Node Tree で Content Layout ノードを選択し、Properties でパディングプロパティを追加して設定します。
Content Layout 3D ノードのコンテンツの前後にスペースを追加するための Depth Padding
Horizontal Padding は、コンテンツの左側と右側にスペースを追加します。
Vertical Padding でコンテンツの上下にスペースを追加する
コンテンツのサイズに適応する Content Layout ノードを作成する¶
Content Layout ノードを使用して、コンテンツのサイズに適応するレイアウトを作成できます。この例では、ボーダー、背景、アイコン、ラベルを持つ2Dボタンのレイアウトを作成します。
コンテンツのサイズに適応する Content Layout ノードを作成するには:
Node Tree で Button 2D node を作成し、Properties で Background Brush プロパティを追加し、Button 2D ノードを埋めるために使用したいブラシに設定します。2Dノードの外観の調整 を参照してください。
Button 2D ノードにブラシを塗り、ボタンの境界線を表示します。
例えば、+ Color Brush を選択し、ブラシに名前を付け、Background Brush プロパティの隣にある
をクリックし、カラーブラシの色を設定します。
Button 2D node で Content Layout 2D ノードを作成し、Properties で Background Brush プロパティを追加し、Content Layout 2D ノードを埋めるために使用したいブラシに設定します。
Content Layout 2D ノードは、ボタンを利用可能なすべてのスペースに広げます。
Content Layout ノードにコンテンツを追加します。
例えば、Stack Layout 2D ノードを作成し、Stack Layout 2D ノード内に以下を作成します:
Image ノードと Properties で追加して設定します。
ボタンアイコンを表示するテクスチャへの Image
Vertical Alignment から Center へ
Horizontal Margin プロパティ Right プロパティフィールドで Image ノードの右側にスペースを追加します。
Text Block 2D ノードと Properties で追加して設定します。
ボタンラベルを設定するための Text
Vertical Alignment から Center へ
Content Layout 2D ノードは、追加したコンテンツに必要なスペースを取ります。
Node Tree で Content Layout 2D ノードを選択し、Properties で追加して設定します。
Horizontal Padding と Vertical Padding を使用して、Content Layout 2D ノードとその親ノードの間のスペースの量を設定します。
この方法で、ボタンの境界とコンテンツの間のスペースの量を設定します。
Horizontal Margin と Vertical Margin を使用して、ボタンの境界線の太さを設定します。
固定サイズに適応するコンテンツを持つ Content Layout を作成する¶
Content Layout ノードを使用して、設定したサイズにコンテンツが適応するレイアウトを作成できます。この例では、境界線、背景、アイコン、ラベルを持つ固定サイズの2Dボタンのレイアウトを作成します。
固定サイズに適応するコンテンツを持つ Content Layout を作成するには：
コンテンツのサイズに適応する2Dレイアウトを作成します。コンテンツのサイズに適応する Content Layout ノードを作成する を参照してください。
Content Layout 2D ノードを含むノードのサイズを設定します。
例えば、Node Tree で Button 2D ノードを選択し、Properties で Layout Width と Layout Height プロパティを追加して設定します。
Node Tree で Content Layout 2D ノードを選択し、Properties で追加して設定します。
Horizontal Alignment と Vertical Alignment を Stretch に
この方法で、Content Layout 2D ノードを x 軸と y 軸で可能な限り多くのスペースを取るように設定します。
Clip Children を有効にする
この方法では、Content Layout 2D ノードの子ノードのコンテンツをクリップして、Content Layout 2D ノードのサイズに収めます。
Content Layout ノードのコンテンツを整列させます。
例えば、Node Tree で Stack Layout 2D ノードを選択し、Properties で Vertical Alignment プロパティを追加し、それを Center に設定します。
Content Layout 2D ノードの外観を設定する¶
2D ノードの外観を設定するには:
2Dノードを単色、テクスチャ、またはマテリアルで塗りつぶすことができます。2Dノードの外観の調整 を参照してください。
2Dノードにポストプロセッシングエフェクトを適用できます。2Dノードのエフェクト を参照してください。
2Dノードを3つの軸すべてで回転させて、3Dのパースペクティブ効果を作成できます。2Dノードに3Dパースペクティブ効果を作成する を参照してください。
2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成できます。2Dノードにカスタムレンダリングを適用する を参照してください。
2Dノードをピクセルパーフェクトとしてレンダリングできます。ピクセルパーフェクトな2Dノードのレンダリング を参照してください。
APIで Content Layout 3D ノードを使用する¶
詳細については、ContentLayout3D クラスを参照してください。
APIで Content Layout 2D ノードを使用する¶
詳細については、ContentLayout2D クラスを参照してください。
Content Layout プロパティタイプとメッセージ¶
Content Layout ノードの利用可能なプロパティタイプとメッセージのリストについては、Content Layout 2D と Content Layout 3D を参照してください。