The Wisej.NET Visual System

Theming & Responsive LayoutsModule 1The 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 Adaptive Operations Console shell as five Panels docked on the main Page (toolbar Top, status Bottom, navigation Left, details Right, workspace Fill with a MinimumSize of 320 × 240), a built-in base theme (Bootstrap-4) selected for the running application in Default.json, and a status-bar widthLabel that reports the browser width on first load and on every resize. The stretch goal (four metric cards above a ticket grid) is included, with a working details editor, because every later module grows this same console.

The source of this sample

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

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 1/AdaptiveOps"
dotnet run -f net10.0 --urls http://localhost:5501

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

What to try

• Resize the browser from desktop to tablet to phone width: widthLabel in the status bar follows (Width: 1024 px). The docked regions hold; below 220 + 320 + 340 px the details panel is pushed out. The desktop shell does not adapt yet, which is what later modules fix.
• Select a row in the grid: the details editor on the right shows that ticket.
• Edit and Save: the grid and the metric cards follow, the status label reads Saved T-1042. Clear the Title or Owner and Save: the server rejects it and the status label says why.
• Refresh reloads the metric cards, the grid and the editor from the repository.
• Click a navigation button: the workspace heading changes.

Where things live

AdaptiveOps/
├─ MainPage.Designer.cs          the five docked regions, metric cards, grid, details editor, status bar
├─ MainPage.cs                   ReportWidth() (constructor, Load, Resize), grid and editor code
├─ Models/Ticket.cs, TicketRepository.cs   12 seed tickets, metrics, Save() with server-side validation
├─ Default.json                  "theme": "Bootstrap-4" (the base theme for the running app)
├─ Web.config                    Wisej.DefaultTheme = Bootstrap-4 (Windows/IIS target)
└─ docs/
   ├─ VisualInventory.md         controls, tokens, regions, breakpoints, each with its owning layer
   └─ VisualLayers.md            base theme choice and reason; which layer owns each visual decision

Region sizes follow the course-wide convention (navigation 220, details 340); the lab text says 240 / 360. Change the two Size lines in MainPage.Designer.cs to use the values.