using-mewui-layoutlisted
Install: claude install-skill christian289/dotnet-with-claudecode
## 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
```csharp
new StackPanel()
.Orientation(Orientation.Vertical) // or .Horizontal(), .Vertical()
.Spacing(8)
.Children(
new Label().Text("First"),
new Label().Text("Second"),
new Button().Content("Action")
)
```
---
## Grid
```csharp
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
```csharp
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.
--