ClientProfile and Responsive Properties

Theming & Responsive LayoutsModule 6The 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 profiles that change behaviour, not just widths. ClientProfiles.json in the project root defines six profiles narrow to broad (Phone, Phone (Landscape), Tablet, Tablet (Landscape), Small Desktop, Desktop); the framework matches them into Application.ActiveProfile. ApplyProfile(string profileName) runs at startup and on every Application.ResponsiveProfileChanged: it writes the profile into the status bar (lblProfile), adds one line to the profile log, hides the rail and the details panel on a phone and opens the ticket editor there as a modal Form, docks the details under the grid on a tablet, and switches the toolbar and the rail to icon-only.

The source of this sample

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

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

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

What to try

• Wide desktop window: status bar Profile: Desktop · 1348 px; profile log Startup: Desktop.
• Drag the window to ≤ 1024 px and back: Profile: Small Desktop, the log adds Desktop → Small Desktop; the toolbar buttons become icons (their tooltip is the label) and the details panel narrows to 300 px.
• Devtools device toolbar → iPad → refresh: Profile: Tablet; the rail shows icons only and the details panel is docked under the grid (it scrolls).
• Devtools → iPhone 12 Pro → refresh: Profile: Phone; the rail and the details panel are hidden, the ☰ Menu button lists the same sections, the metric cards go two per row, the grid hides Owner and Due. Tap a row: the editor opens as a maximized dialog, once. Save with an empty Title: the error shows inside the dialog; a valid Save shows a success line in the dialog and a toast.
• Re-apply reads Application.ActiveProfile again and applies it; Refresh reloads the tickets; Clear log empties the profile log.

Where things live

AdaptiveOps/
├─ ClientProfiles.json            six profiles, narrow to broad (Content, copied to bin for both targets)
├─ MainPage.cs                    ApplyProfile(string), the event subscription, the phone dialog, the profile log
├─ MainPage.Designer.cs           the shell: toolbar FlowLayoutPanel, regions, metrics TableLayoutPanel, grid, log, status bar
├─ Shell/NavigationRail.cs        the rail UserControl: SetMode(Full | IconOnly), SectionSelected, Sections
├─ Shell/TicketEditor.cs          the editor UserControl: LoadTicket / ReadTicket / ShowMessage, Save and Close events
├─ Dialogs/TicketEditorForm.cs    the reusable modal host: HostEditor(control)
└─ docs/
   ├─ ProfileNotes.md             every profile, its rule, what changes per region, designer vs code, idempotency
   ├─ ResponsiveQAMatrix.md       the six scenarios, the checks per region, the event checks
   └─ LabNotes.md                 every hidden control with its mobile alternative

In Visual Studio the per-profile Visible, Display and Dock values would be set in the Designer's responsive-profile dropdown (Control.ResponsiveProfiles). This hand-written sample assigns them in ApplyProfile, next to what genuinely needs code (the modal editor, the Menu, the log).