Section & SectionColumn

The Section and SectionColumn components provide a responsive multi-column layout for organizing form fields and content. Columns are laid out horizontally and automatically wrap to the next row when the available width is constrained.

<Section>
    <SectionColumn HeaderText="Contact Info">
        <TextEdit ColumnName="firstname" />
        <TextEdit ColumnName="lastname" />
    </SectionColumn>
    <SectionColumn HeaderText="Account Info">
        <TextEdit ColumnName="name" />
    </SectionColumn>
</Section>

Columns

Place one or more SectionColumn components inside a Section. The columns distribute evenly across the available width. Use ColumnCount to explicitly set the number of columns (1-4); if omitted, it defaults to the number of SectionColumn children.

<!-- Explicit 3-column layout -->
<Section ColumnCount="3">
    <SectionColumn>Column 1</SectionColumn>
    <SectionColumn>Column 2</SectionColumn>
    <SectionColumn>Column 3</SectionColumn>
</Section>

Column Minimum Width

Set ColumnMinWidth on the Section to control when columns wrap to the next row. When the available width per column falls below this threshold, columns stack vertically. Defaults to 340px.

<Section ColumnMinWidth="200px">
    <SectionColumn>Narrow column 1</SectionColumn>
    <SectionColumn>Narrow column 2</SectionColumn>
    <SectionColumn>Narrow column 3</SectionColumn>
    <SectionColumn>Narrow column 4</SectionColumn>
</Section>

Column Widths

Use Width on a SectionColumn to give it a larger or smaller share of the row. Widths are ratios, not CSS percentages: three columns with Width="3", Width="4", Width="3" lay out as 30% / 40% / 30% (3 + 4 + 3 = 10 parts). Columns without a Width fall back to the default equal distribution.

<!-- Widths are ratios: 3 + 4 + 3 = 10 parts, so 30% / 40% / 30% -->
<Section>
    <SectionColumn Width="3">Column 1 (30%)</SectionColumn>
    <SectionColumn Width="4">Column 2 (40%)</SectionColumn>
    <SectionColumn Width="3">Column 3 (30%)</SectionColumn>
</Section>

Headers & Footers

Both Section and SectionColumn support HeaderText/Header and FooterText/Footer parameters. Use HeaderText for simple text headings or Header for custom render fragment content.

<Section HeaderText="Account Details" FooterText="Last updated: today">
    <SectionColumn HeaderText="General">
        <TextEdit ColumnName="name" />
    </SectionColumn>
    <SectionColumn HeaderText="Address">
        <TextEdit ColumnName="address1_city" />
    </SectionColumn>
</Section>

Borders

Set BorderVisible="true" on a Section or SectionColumn to display a border around it. Borders can be set independently on the section and each column.

<Section BorderVisible="true">
    <SectionColumn BorderVisible="true">
        Bordered column
    </SectionColumn>
    <SectionColumn BorderVisible="false">
        No border on this column
    </SectionColumn>
</Section>

Content Orientation

By default, editor components inside a SectionColumn are stacked vertically. Set ColumnContentOrientation="ComponentOrientation.Horizontal" to lay them out horizontally instead. Use HorizontalGap and VerticalGap to control spacing between items.

<Section>
    <SectionColumn ColumnContentOrientation="ComponentOrientation.Horizontal"
                    HorizontalGap="20"
                    VerticalGap="10">
        <TextEdit ColumnName="firstname" />
        <TextEdit ColumnName="lastname" />
    </SectionColumn>
</Section>