Containers, Layouts, Navigation, and Reuse

Mastering the Control LibraryModule 3The 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

This example is the real Operations Console shell — a ToolBar docked Top, a StatusBar docked Bottom and a SplitContainer splitMain docked Fill, with the navigation list in Panel1 and a TabControl tabDetail in Panel2, one TabPage per peer section. The repeated record header and status strip are the RecordHeader and StatusStrip UserControls (Title, RecordCount, LastRefresh, RefreshRequested). A narrow client profile collapses the navigation and shows btnMobileMenu, and the StatusBar shows the active profile, record count, selected record and last refresh.

Editors comes from Module 2; Lists and Trees, DataGridView, Dashboard and Widgets are still placeholders.

The source of this sample

iceteagroup/LearnWisej-SamplesMastering the Control Library Course/Module 3

Browse this folder on GitHub

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

Run it

cd "LearnWisej-Samples/Mastering the Control Library Course/Module 3/OperationsConsole"
dotnet run -f net10.0 --urls http://localhost:5703

Then open http://localhost:5703.

What to try

Action	What you should see
Nothing yet	the Layouts tab is open; StatusBar Showing Layouts, Desktop profile · Desktop, 6 records, Record: LAY-001
Click a card chip	the form fills with Region / Container / Why; StatusBar Record: LAY-004
Click a section in the navigation list, or a tab	the list and the tabs stay in step; the page is created on first use
New (Layouts tab)	a new chip appears, Added LAY-007 to Layouts., 7 records, Toast
New / Save on a placeholder tab	amber "New is not available …" / "Nothing to save …"
Refresh	the chips are rebuilt, Refreshed: HH:mm:ss in the StatusBar and in both UserControls
Save right after a Refresh	amber "Nothing has changed on Layouts since the last save."
New, then Save	green "Saved 7 layout cards."
Tick Simulate service failure, New, Save	red "Layouts could not be saved …" + Toast; untick and Save again to recover
Resize the browser under 1025 px	the navigation collapses, ☰ Sections appears, StatusBar Narrow profile · Tablet, the Layouts content stacks into one column
☰ Sections	the six sections plus Show the navigation panel
Refresh in the record header, or ↻ in the strip	both raise RefreshRequested; the same RefreshSection() runs
Right-click the navigation list	Refresh / New / Save — the same command methods as the ToolBar

Where things live

OperationsConsole/
├─ MainPage.cs / .Designer.cs       toolBar (Top), statusBar (Bottom), splitMain (Fill); navList | tabDetail; ApplyNarrowProfile
├─ Shell/  ISectionRecords.cs       RecordCount / NewRecord() / Save() → SectionSaveResult
│          RecordHeader, StatusStrip   the two reusable UserControls
├─ Sections/LayoutsPage.cs          cards (FlowLayoutPanel), selected card (TableLayoutPanel), the two UserControls
├─ Models/LayoutCard.cs, Services/LayoutCardService.cs (SimulateFailure)
└─ docs/LayoutNotes.md, docs/ContainerDecisions.md