dotnet-with-claudecode: Skill for Claude Code

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)