# Using Mewui Layout

> Arranges UI elements using MewUI layout panels. Use when building UI layouts with StackPanel, Grid, Canvas, DockPanel, WrapPanel, or creating custom panels. Use when this capability is needed.

- Skill: `tomevault-io/using-mewui-layout` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/using-mewui-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/using-mewui-layout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/using-mewui-layout

---


## 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.

---

## DockPanel

```csharp
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

```csharp
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

```csharp
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](custom-panel.md)
**Attached properties**: See [attached-properties.md](attached-properties.md)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/christian289) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->