$npx -y skills add DevExpress/agent-skills --skill devexpress-wpf-layout-managementBuild WPF applications with the DevExpress layout-management controls — DockLayoutManager (Visual Studio-style dockable panels and MDI), LayoutControl (compound forms with auto-aligned labels and groups), DataLayoutControl (auto-generated form from a POCO via DataAnnotations), Ti
| 1 | # DevExpress WPF Layout Management |
| 2 | |
| 3 | DevExpress ships **six layout-management controls** for WPF, each solving a different layout problem. The two libraries are: |
| 4 | |
| 5 | - **`DevExpress.Xpf.Docking`** — `DockLayoutManager` (Visual-Studio-style dockable panels, MDI, document selector, save/restore). |
| 6 | - **`DevExpress.Xpf.LayoutControl`** — `LayoutControl`, `DataLayoutControl`, `DockLayoutControl`, `FlowLayoutControl`, `TileLayoutControl` (in-panel layout containers). |
| 7 | |
| 8 | Picking the right one is the most important decision — most layout problems map naturally to exactly one of the six. This skill covers the picker, building rules for each, and layout persistence. |
| 9 | |
| 10 | ## When to Use This Skill |
| 11 | |
| 12 | Use this skill when you need to: |
| 13 | |
| 14 | - Build a Visual-Studio-like UI with dockable panels (`DockLayoutManager`) |
| 15 | - Build a data-entry form with auto-aligned labels and groups (`LayoutControl`) |
| 16 | - Auto-generate a form from a POCO via `DataAnnotations` attributes (`DataLayoutControl`) |
| 17 | - Show a Windows UI tile dashboard (`TileLayoutControl`) |
| 18 | - Arrange items in a wrapping flow with resizing and maximization (`FlowLayoutControl`) |
| 19 | - Dock items to the edges of a single panel (`DockLayoutControl`) |
| 20 | - Save and restore a user-customized layout |
| 21 | |
| 22 | ## Prerequisites & Installation |
| 23 | |
| 24 | ### NuGet Packages |
| 25 | |
| 26 | | Package | Provides | |
| 27 | |---------|---------| |
| 28 | | `DevExpress.Wpf.Docking` | `DockLayoutManager`, dock panels, layout panels, document selector, customization window | |
| 29 | | `DevExpress.Wpf.LayoutControl` | `LayoutControl`, `DataLayoutControl`, `DockLayoutControl`, `FlowLayoutControl`, `TileLayoutControl`, `GroupBox`, `LayoutItem`, `LayoutGroup` | |
| 30 | |
| 31 | Both packages transitively reference `DevExpress.Wpf.Core` (MVVM helpers). Install whichever you need: |
| 32 | |
| 33 | ```bash |
| 34 | dotnet add package DevExpress.Wpf.Docking # if using DockLayoutManager |
| 35 | dotnet add package DevExpress.Wpf.LayoutControl # for all *LayoutControl variants |
| 36 | ``` |
| 37 | |
| 38 | All DevExpress packages in a project must share the same version. A valid DevExpress license is required. |
| 39 | |
| 40 | ## XAML Namespaces |
| 41 | |
| 42 | ```xml |
| 43 | xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking" |
| 44 | xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" |
| 45 | xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" |
| 46 | ``` |
| 47 | |
| 48 | | Prefix | Use for | |
| 49 | |---|---| |
| 50 | | `dxdo:` | `DockLayoutManager`, `DocumentGroup`, `DocumentPanel`, `LayoutGroup` (docking), `LayoutPanel` | |
| 51 | | `dxlc:` | `LayoutControl`, `DataLayoutControl`, `DockLayoutControl`, `FlowLayoutControl`, `TileLayoutControl`, `LayoutItem`, `LayoutGroup` (layout-control), `Tile`, `GroupBox` | |
| 52 | | `dxe:` | In-place editors inside layout items — `TextEdit`, `DateEdit`, `CheckEdit`, etc. | |
| 53 | |
| 54 | > **The name `LayoutGroup` exists in both namespaces** and refers to different types. Always check which namespace is bound — `dxdo:LayoutGroup` is for docking; `dxlc:LayoutGroup` is for the layout-control family. |
| 55 | |
| 56 | ## Before You Start — Ask the Developer |
| 57 | |
| 58 | If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code. |
| 59 | |
| 60 | 1. **Target framework**: .NET 8+ or .NET Framework 4.x? |
| 61 | 2. **What kind of layout?** Pick from: |
| 62 | - **Dockable panels / MDI** → `DockLayoutManager` |
| 63 | - **Compound data-entry form (labels + editors + groups)** → `LayoutControl` |
| 64 | - **Auto-generated form from a class** → `DataLayoutControl` |
| 65 | - **Tile dashboard** → `TileLayoutControl` |
| 66 | - **Wrapping flow of cards/groupboxes** → `FlowLayoutControl` |
| 67 | - **Dock to edges of one panel (no panel detach)** → `DockLayoutControl` |
| 68 | 3. **Save/restore needed?** Wh |