AlignWidget

Position child content within available space using alignment flags.

AlignWidget allows you to align a child widget horizontally (left, center, right) and/or vertically (top, center, bottom) within the available layout space. It's particularly useful for positioning content within containers like borders or panels.

Interactive Demo

Try selecting different alignments to see how they position content:

csharp

dotnet run

Basic Usage

Create an aligned widget using the fluent API:

csharp

dotnet run

Convenience Method

For the common case of centering content, use the Center() method directly:

ctx.Center(ctx.Text("Centered!"))

Alignment Options

AlignWidget uses the Alignment flags enum, which supports both individual axis alignment and convenient combinations.

Horizontal Alignment

Value	Description
Left	Align to the left edge (default)
Right	Align to the right edge
HCenter	Center horizontally

Vertical Alignment

Value	Description
Top	Align to the top edge (default)
Bottom	Align to the bottom edge
VCenter	Center vertically

Combination Flags

For convenience, common combinations are predefined:

Value	Equivalent To
Center	HCenter | VCenter
TopLeft	Top | Left
TopRight	Top | Right
TopCenter	Top | HCenter
BottomLeft	Bottom | Left
BottomRight	Bottom | Right
BottomCenter	Bottom | HCenter
LeftCenter	Left | VCenter
RightCenter	Right | VCenter

Examples

Center Alignment

ctx.Align(Alignment.Center, ctx.Text("Centered!"))

Bottom Right Alignment

ctx.Align(Alignment.BottomRight, ctx.Text("Bottom Right"))

Custom Combination

You can combine flags for custom alignments:

// Center horizontally at the bottom
ctx.Align(Alignment.Bottom | Alignment.HCenter, ctx.Text("Footer"))

Layout Behavior

AlignWidget consumes all available space and positions its child within that space:

• Measuring: The child is measured with loose constraints, then the align widget reports the full available size
• Arranging: The child is positioned based on the alignment flags within the allocated bounds

This means AlignWidget expands to fill its parent container, which is why it works well inside borders and fixed-size containers.

Common Patterns

Centered Dialog

ctx.Border(b => [
    b.Align(Alignment.Center,
        b.VStack(v => [
            v.Text("Are you sure?"),
            v.Text(""),
            v.Button("OK").OnClick(_ => /* ... */)
        ])
    )
], title: "Confirm")

Status Bar at Bottom

ctx.VStack(v => [
    v.Text("Main content here...").Fill(),
    v.Align(Alignment.BottomCenter,
        v.Text("Status: Ready")
    ).FixedHeight(1)
])

Right-Aligned Button

ctx.Border(b => [
    b.VStack(v => [
        v.Text("Form content..."),
        v.Text(""),
        v.Align(Alignment.Right,
            v.Button("Submit")
        )
    ])
], title: "Form")

Related Widgets

• VStackWidget - Vertical layout container
• HStackWidget - Horizontal layout container
• BorderWidget - Container with visual border