using-mewui-layout

SKILL.md

Panel Quick Reference

Panel Use Case
StackPanel Vertical/horizontal lists
Grid Row/column layouts
Canvas Absolute positioning
DockPanel Edge docking (toolbars, status bars)
WrapPanel Flow with wrapping

StackPanel

new StackPanel()
    .Orientation(Orientation.Vertical)  // or .Horizontal(), .Vertical()
    .Spacing(8)
    .Children(
        new Label().Text("First"),
        new Label().Text("Second"),
        new Button().Content("Action")
    )

Grid

new Grid()
    .Rows("Auto,*,Auto")      // Auto, Star(*), Pixel(100)
    .Columns("200,*")
    .Spacing(8)               // Note: single Spacing property for both rows and columns
    .Children(
        new Label().Text("Header").Row(0).ColumnSpan(2),
        new ListBox().Row(1).Column(0),
        new ContentControl().Row(1).Column(1),
        new Button().Content("OK").Row(2).Column(1)
    )

// Convenience: .GridPosition(row, column) or .GridPosition(row, col, rowSpan, colSpan)

Row/Column definitions: "Auto" (content), "*" (proportional), "2*" (2x proportional), "100" (pixels)


Canvas

new Canvas()
    .Children(
        new Rectangle().CanvasLeft(10).CanvasTop(10).Width(50).Height(50),
        new Rectangle().CanvasRight(10).CanvasBottom(10).Width(50).Height(50)
    )

// Convenience: .CanvasPosition(left, top)

Rules: Left > Right, Top > Bottom. Both set = stretch.


DockPanel

new DockPanel()
    .LastChildFill(true)
    .Children(
        new Menu().DockTo(Dock.Top),        // Note: .DockTo() not .Dock()
        new StatusBar().DockTo(Dock.Bottom),
        new TreeView().DockTo(Dock.Left).Width(200),
        new ContentArea()  // Fills remaining space
    )

// Convenience methods: .DockTop(), .DockBottom(), .DockLeft(), .DockRight()

WrapPanel

new WrapPanel()
    .Orientation(Orientation.Horizontal)
    .Spacing(8)               // Note: single Spacing property for all gaps
    .ItemWidth(100).ItemHeight(100)  // Optional fixed size
    .Children(tag1, tag2, tag3, tag4)

Alignment & Sizing

element
    .Width(200).Height(100)
    .MinWidth(50).MaxWidth(500)
    .Margin(8)                    // All sides
    .Margin(8, 4)                 // H, V
    .Margin(8, 4, 8, 4)           // L, T, R, B
    .HorizontalAlignment(HorizontalAlignment.Center)
    .VerticalAlignment(VerticalAlignment.Stretch)

Custom panels: See custom-panel.md Attached properties: See attached-properties.md

Weekly Installs
4
GitHub Stars
16
First Seen
14 days ago
Installed on
gemini-cli4
opencode4
codebuddy4
github-copilot4
codex4
kimi-cli4