Theming & Responsive Layouts
One runnable Wisej.NET 4 application per module, built from the course's lesson guide, lab guide
and walkthrough video. Every sample is a stage of the same Adaptive Operations Console
(project AdaptiveOps): a toolbar, a navigation rail, a workspace with metric cards and a ticket
grid, a details editor and a status bar. Each screen shows only what that module's lab guide and
video build. Each folder has its own README.md (what to check, self-check answers) and a docs/
folder with the lab deliverables written as Markdown.
Requirements: .NET 10 SDK and the Wisej-4 4.1.0 NuGet package. Nothing is deployed anywhere.
The modules
| Module | What it builds |
|---|---|
| 1 · The Wisej.NET Visual System | the console shell from five docked Panels, base theme chosen in Default.json, browser-width status label, VisualInventory.md and the "which layer owns what" note |
| 2 · Theme Builder and Theme JSON Internals | Themes/AdaptiveOps.theme (tokens, fonts, appearances, states, inheritance) selected for the running app, Theme Builder steps |
| 3 · CSS, CssClass, CssStyle, States, Runtime Themes | appearance, CssClass with a scoped Styles/AdaptiveOps.css, one computed CssStyle, custom stale state, session-only dark theme |
| 4 · Layout Fundamentals and Shell Composition | shell split into UserControls composed by Dock only, Anchor, AutoSize, AutoScroll and MinimumSize |
| 5 · Flow, Table and Flex Layouts | a wrapping filter bar (FlowLayoutPanel), an aligned editor (TableLayoutPanel), a proportional dashboard (FlexLayoutPanel), fluent markup API |
| 6 · ClientProfile and Responsive Properties | custom ClientProfiles.json, Application.ActiveProfile, ResponsiveProfileChanged and an ApplyProfile that changes behaviour per profile (icon-only rail, details as dialog, stacked cards) |
| 7 · Capstone, Accessibility, Performance, Governance | the finished console across every profile: theme, CSS and profiles, accessibility review, QA matrix, architecture note, grounding pack and production checklist |
Run any module from its AdaptiveOps project folder. The projects multi-target net10.0-windows and net10.0, so dotnet run needs a framework (-f net10.0, or -f net10.0-windows), e.g.
cd "LearnWisej-Samples/Theming and Responsive Layouts Course/Module 3/AdaptiveOps"
dotnet run -f net10.0 --urls http://localhost:5503
or open the AdaptiveOps.slnx in the module folder with Visual Studio and press F5.
Testing profiles without a phone: resize the browser window (Small Desktop ≤ 1024 px) or use the browser devtools device emulation (Mobile / Tablet device type and orientation); the profile is re-evaluated on the next request or resize.