Comment on page
Client Profiles are a set of device-related properties associated to a name that are matched to the client device when the page is loaded or the browser is resized.
Responsive Properties are standard .NET properties available at design time (serializable) that are decorated with the [ResponsiveProperty] attribute. These properties are capable of holding multiple values associated with a Client Profile.
When the ActiveProfile changes, all the [ResponsiveProperties] are updated with the value their value associated to the Client Profile. For example, the Visible property or a button can hold the value true when the Client Profile is "Default" and the value false when the Client Profile is "Galaxy Tablet", or the Display property of a Button or TabControl can be Both on Desktops and Icon on Phone devices.
You can define your custom client profiles by adding the ClientProfiles.json file to the project. Click Add -> New Item, select Wisej.NET 3 and select ClientProfiles:
It will add the file ClientProfiles.json containing the pre-configured profiles:
* Client Profiles
* You can add additional profiles or modify the default ones by
* placing a ClientProfiles.json file in the /bin directory of the
* Or add it to the root files and set it to: "EmbeddedResource", or "Content" or "Copy if newer".
* Profiles with names matching the names in the default file will
* override the corresponding matching profile definition.
* Profile Properties:
* name: The name of the profile.
* minWidth: The minimum width of browser in pixels.
* maxWidth: The maximum width of browser in pixels.
* minScreenWidth: The minimum width of the device in pixels.
* maxScreenWidth: The maximum width of the device in pixels.
* device: A string or regular expression to match the name of the device returned by the client browser ("Mobile", "Tablet" or "Desktop").
* userAgent: A string or regular expression to match the user-agent string returned by the client browser.
* landscape: A boolean flag that indicates that the profile matches devices in landscape mode.
"name": "Phone (Landscape)",
"name": "Tablet (Landscape)",
"name": "Small Desktop",
When using the Chrome mobile emulator and switch to a mobile from a desktop, you may have to hit refresh to update client profiles based on screen width or user agents since these two properties don't change dynamically.
The ResponsiveProfileChanged event is fired on:
- ContainerControl (Form, Page, Desktop, UserControl)
Handling this event allows your code to adapt the controls to the client profile in any way possible. While responsive properties are useful and easy to use (especially at design time), they are limited. In code, handling this event, you can adjust the control without limitations.