Column

The Column element arranges content vertically, stacking items one below another.

It supports paging functionality, allowing content to flow naturally across multiple pages when needed. When required, child items are split across pages, ensuring that the content is not cut off.

Basic usage

The Column element uses a lambda function to define its content. Inside the lambda, you can add multiple items using the Item method.

container
    .Width(250)
    .Padding(25)
    .Column(column =>
    {
        column.Item().Background(Colors.Grey.Medium).Height(50);
        column.Item().Background(Colors.Grey.Lighten1).Height(75);
        column.Item().Background(Colors.Grey.Lighten2).Height(100);
    });

Spacing

You can adjust the vertical spacing between items using the Spacing method.

container
    .Width(250)
    .Padding(25)
    .Column(column =>
    {
        column.Spacing(25);
        
        column.Item().Background(Colors.Grey.Medium).Height(50);
        column.Item().Background(Colors.Grey.Lighten1).Height(75);
        column.Item().Background(Colors.Grey.Lighten2).Height(100);
    });

Optionally, you can specify the unit value (default is Unit.Points).

column.Spacing(5, Unit.Millimeters);

TIP

Learn more about supported units in the Lenght unit types section.

Custom spacing

You can adjust the spacing between items individually by adding an empty item with a specific height.

.Column(column =>
{
    column.Item().Background(Colors.Grey.Darken1).Height(50);
    column.Item().Height(10);
    column.Item().Background(Colors.Grey.Medium).Height(50);
    column.Item().Height(20);
    column.Item().Background(Colors.Grey.Lighten1).Height(50);
    column.Item().Height(30);
    column.Item().Background(Colors.Grey.Lighten2).Height(50);
});