Skip to main content

Flow, Table and Flex Layouts

The console keeps its docked shell regions; the content inside them is built three ways:

  • Layout/FilterBar : FlowLayoutPanel (the toolbar): title, txtSearch (FillWeight 1, MinimumSize 180), cmbStatus, btnApply (FlowBreak), then the four metric cards, which therefore always start a new row and wrap as the browser narrows.
  • Shell/TicketEditor around a two-column TableLayoutPanel (ColumnStyle(Absolute, 140) for captions, ColumnStyle(Percent, 100) for editors, editors docked Fill in their cells, Notes spanning both columns with a MinimumSize height of 120).
  • Layout/DashboardWorkspace : FlexLayoutPanel (the workspace): pnlList and detailsPanel weighted 2 : 1, MinimumSize on both, MaximumSize and AlignY Top on the details, written entirely in code with the Wisej.Web.Markup fluent extensions.

Run it​

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

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

What to try​

  • Resize the browser from 1400 to 1024 to 700 px: the metric cards wrap from four to fewer per row, the search box stretches and stops at 180 px, the editor captions stay at 140 px while the editors narrow, and the details region stops at its MinimumSize (280 px) instead of vanishing. The status bar shows Width: N px. At narrow widths the filter bar scrolls to reach the wrapped cards.
  • Type printer and press Apply (or Enter): the grid shows the matching tickets and the status label reads Filters applied: 3 of 12 tickets; combine with a status in the drop-down.
  • Type /[/ and press Apply: the regular expression does not parse, the status label reports the error and the grid keeps its last good filter.
  • Select a ticket, edit, Save; clear the Owner and Save to see the server reject it.
  • Click a navigation button: the list heading changes.

Where things live​

AdaptiveOps/
├─ MainPage.Designer.cs            the docked regions, the TopDown FlowLayoutPanel rail, the status bar
├─ MainPage.cs                     ApplyFilters(), tickets, save; no layout code, no Resize handler
├─ Layout/FilterBar.cs (+ .Designer.cs)   FlowLayoutPanel: SetFillWeight(txtSearch, 1), SetFlowBreak(btnApply, true), the cards
├─ Layout/DashboardWorkspace.cs    FlexLayoutPanel list / details split, built with Wisej.Web.Markup (no Designer file)
├─ Shell/TicketEditor.cs (+ .Designer.cs) the TableLayoutPanel form
├─ Shell/MetricCard.cs (+ .Designer.cs)   one card: Title, Value, Accent; 192×76, Margin 4
└─ docs/
   ├─ LayoutComparison.md          which container fits each region, the extended property that did the work, per-width geometry
   ├─ LayoutNotes.md               the Margin / Padding audit
   └─ FluentMarkupRegion.md        the DashboardWorkspace chain and the one-notation rule