Layout Fundamentals and Shell Composition

Theming & Responsive LayoutsModule 4The lesson guide, the walkthrough video, the knowledge check and the hands-on lab this sample was built from are on learnwisej.com — free, with an AI tutor in every lesson.

Open the course

The Adaptive Operations Console shell is five docked regions in the right child order (toolbar Top, status Bottom, navigation Left, details Right, workspace Fill), with Padding for the gaps, MinimumSize on the workspace and the grid, MaximumSize on the details region, and no code that sets Bounds. Four regions are UserControls with their own local layout (Shell/NavigationRail, Shell/DetailsEditor, Shell/Workspace, Shell/StatusBar); the details editor scrolls through AutoScroll with hidden scrollbars and anchors its fields and its Save / Cancel buttons.

The source of this sample

iceteagroup/LearnWisej-SamplesTheming and Responsive Layouts Course/Module 4

Browse this folder on GitHub

Or clone it: git clone https://github.com/iceteagroup/LearnWisej-Samples.git — then open AdaptiveOps.slnx in Visual Studio and press F5.

Run it

cd "LearnWisej-Samples/Theming and Responsive Layouts Course/Module 4/AdaptiveOps"
dotnet run -f net10.0 --urls http://localhost:5504

Then open http://localhost:5504 (or open AdaptiveOps.slnx in Visual Studio and press F5).

What to try

• Drag the browser from 1366 px down to 576 px and back: only the workspace width changes; it never drops below 320 × 240 (below that the page scrolls, Page.AutoScroll). The status bar shows Width: N px.
• Make the window short: the details fields scroll by wheel or touch with no scrollbar; the Save and Cancel buttons stay pinned to the bottom-right of the editor. In a very short window the rail scrolls too.
• Edit a ticket and Save: the grid and the metric cards follow; the status bar reads Saved T-1042.
• Clear the Title and Save: the server rejects it; the status bar reads Not saved: Title is required. Any other exception during the save is caught the same way (Save failed: …).
• Cancel restores the ticket as it was loaded into the editor.
• Click a rail section: the workspace heading follows (NavigationRail.SelectedSection).

Where things live

AdaptiveOps/
├─ MainPage.cs                 loads tickets, hands them to the regions, saves on DetailsEditor.Saved (no Bounds)
├─ MainPage.Designer.cs        the five regions: Dock, child order, Padding, MinimumSize / MaximumSize, Page.AutoScroll
├─ Shell/
│  ├─ NavigationRail.cs        Dock=Left region: buttons Anchor T|L|R in an AutoScroll rail; SelectedSection + SectionChanged
│  ├─ DetailsEditor.cs         Dock=Right region: header · scrolling fields (AutoScroll, hidden bars) · Save/Cancel B|R; Ticket + Saved
│  ├─ Workspace.cs             Dock=Fill region: metric cards above the grid (MinimumSize 300×160)
│  └─ StatusBar.cs             Dock=Bottom region: status text and the browser width
├─ Models/                     the same 12 tickets as every module
└─ docs/
   ├─ ShellComposition.md      the container tree and every Dock / Anchor / AutoScroll / Padding / MinimumSize decision
   └─ LayoutComparison.md      resize code vs containers: before / after code and the side-by-side table