セクション&セクションコラム

SectionおよびSectionColumnコンポーネントは、フォームフィールドやコンテンツを整理するためのレスポンシブな多列レイアウトを提供します。列は水平に配置され、利用可能な幅が制限されると自動的に次の行に巻き付きます。

柱

Sectionの中に1つ以上のSectionColumn部品を配置します。列は利用可能な幅に均等に分布しています。ColumnCountを使って列数(1〜4)を明示的に設定します。省略すると、SectionColumn子の数がデフォルトになります。

列の最小幅

SectionのColumnMinWidthを設定して、列が次の行に巻き替わるタイミングを制御します。1列あたりの利用可能な幅がこの閾値を下回ると、列は縦に積み重なります。デフォルトは340pxです。

列幅

SectionColumnに付けてWidthを使い、列のシェアを大きくしたり小さくしたりします。幅はCSSパーセンテージではなく比率です。3列に3列、Width="3"、Width="4"、Width="3"30%(3 + 4 + 3 = 10)で配置されます。Widthのない列はデフォルトの等分分布に戻されます。

ヘッダーとフッター

SectionもSectionColumnもHeaderText/HeaderおよびFooterText/Footerパラメータをサポートしています。簡単なテキスト見出しにはHeaderTextを、カスタムの断片をレンダリングするにはHeaderを使いましょう。

国境

SectionやSectionColumnにBorderVisible="true"を設定して、その周囲に枠を表示させてください。境界線は断面と各列で独立して設定できます。

内容指向

デフォルトでは、 SectionColumn 内のエディタコンポーネントは縦に積み重ねられています。 ColumnContentOrientation="ComponentOrientation.Horizontal" を水平に配置するように設定してください。 HorizontalGap と VerticalGap を使ってアイテム間の間隔をコントロールしましょう。