Designer
Last updated
Last updated
Wisej.NET is the only web application system that supports a pixel-perfect designer. This unique technology integrates with Visual Studio designer to render final HTML directly on the design surface with minimal limitations.
You can design any JavaScript widget, including custom-built controls and C#/VB.NET backed widgets.
Wisej.NET integrates and extends Visual Studio's built-in designer (👉 significantly!). At design time, all Wisej.NET controls, including third-party JavaScript widgets, are rendered behind the scenes using an array of headless browsers (⭐ this is one of Wisej.NET's patented technologies).
The Visual Studio designer can display any Wisej.NET control, effectively turning JavaScript widgets into fully designable controls.
The first thing you'll notice is the new toolbar at the bottom of the design surface:
Shows a welcome page with resources, help and tips.
Switches the theme used in the current design surface.
Changes the color used to draw selection lines and glyphs.
Changes the size of the grid in the background of the design surface.
Changes the client profile being displayed in design view. Changing the client profile updates the value of the Responsive Properties associated with the client profile.
Takes a screenshot of the selected control or the entire design surface and saves it in the clipboard.
Hides or shows controls with Visible set to false. Visual Studio designer always shows all controls, including the controls with Visible set to false. When a container has several controls that overlap and may be shown/hidden at runtime, the design view can become quite messy. This toggle button solves this problem.
Refreshes the select controls or the entire designer surface. It's useful when the rendering of the widget is incomplete because of a complex control or a third party library slow to load.
Shows or hides the anchor glyhps. In complex screens it is possible to click the anchoring glyphs by mistake, this tool disables the feature.
Shows the toolbox.
Shows the Document Outline viewer.
Enables the "tab order mode" and applies the selected auto-numbering order.
Since 3.0 Shows the Auto Layout panel.
Shows the property viewer for the selected control.
Shows the name, location and size of the selected control.
Shows the current HTML renderer and opens the designer options dialog.
Shows the Wisej.NET License Panel.
All controls in the designer provide snap lines and snap rules to help developers align controls. Wisej.NET adds custom snap lines that are saved with the container.
You can create, delete, and move horizontal or vertical snap lines in a design surface and save them in the .resx file. When other developers open the same control in design mode, they see the same snap lines, helping enforce consistent design across the development team.
To work with snap lines:
Create: Click on the ruler
Delete: Click again on the ruler at the same location
Move: Drag the line on the design surface
While dragging a snap line doesn't move the snapped controls with it, you can easily move a group of controls by selecting them all and moving the group as one block using arrow keys or the pointer.
Wisej.NET controls extend Visual Studio's quick actions feature. When you drop a control on the design surface, the designer immediately opens the quick action menu showing common properties.
This feature significantly speeds up initial UI construction.
Add properties to the quick actions menu by applying the **DesignerActionList** attribute:
The DesignerActionList implementation in Wisej.NET eliminates the need to create custom designers for controls that need quick action lists.
When designing a Wisej.NET page, form, desktop, or control you can manage multiple "views" for the same container by selecting the current Client Profile in the designer toolbar.
Wisej.NET preloads the list with the few built-in client profiles. However, you can create your own by adding a ClientProfiles.json file and see your custom profiles in the designer.
All the responsive properties set at design time are saved in the resx file of the container. You can find which client profiles and, for each profile, which properties are changed by inspecting the (Responsive Properties) collection.
See also:
Client ProfilesResponsive PropertiesThe document outline view shows the full hierarchy of all the controls in the main container being designed. It's an invaluable tool to understand the structure of complex pages.
You can change the theme used in the designer on the fly without changing the theme used by the application. This feature allows you to see what the screen would look like with another theme and to test your custom themes.
The list is automatically populated with all the built-in themes plus all the themes that Wisej.NET can find in the /Themes folder or embedded resources in referenced assemblies.
The last option ("Select Theme...") lets you pick a theme file from any other location. This setting is saved in the registry on the developer's machine.
Changing a theme in the designer doesn't change the application's theme. See Configuration to see how to change the application's theme.
The designer is also able to render overlapping controls transparent colors. Since controls are rendered individually, it's a difficult task to "compose" the overlapping parts together for each control in the right order and at any depth.
This feature is off by default. You can turn it on by turning on the ShowDesignerTransparency property on the design container.
Wisej.NET supports all sorts of extensions, including Extension Providers. These are components that when added to a container extend (add properties and functionality) to all the qualified controls in the container.
The designer also supports this functionality, and is capable of updating the view of the extended controls as they are designed.
This dialog lets you switch the rendering engine between the legacy Internet Explorer (IE) and the new Edge/Chrome. You can also select how many parallel rendering engines are used by the designer and the default rendering timeout.
Wisej.NET always creates the full number of parallel renderers for each designer surface open in Visual Studio. When a designer is closed, Wisej.NET places the renderers in a pool to be able to reuse the instances quickly. However, after a certain timeout, Wisej.NET disposed all the renderers above the number of parallel renderers.
The renderer timeout indicates how long the designer waits for a control to complete its rendering before showing the alert icon in the design view.
A common reason for the timeout icon to display in the designer are broken image links or broken font links.
All Wisej.NET control support custom painting using a standard GDI+ Graphics context and a simple Paint event.
Custom PaintingCustom painting also supported at design time, when the painting is done in the control's class (not in the Paint event handler created in the same design surface).
Animations are not supported at design time
Extender providers that add visual items outside the extended component's rectangle (e.g., tooltips, error icons, information bubbles) are not shown at design time since they typically exist outside the component's frame
When rotations cause component content to exit its rectangle, the outside parts are truncated at design time but visible at runtime
Using the toolbar you can change the level of information shown in the tree and, most importantly, you can move controls up and down their container's collection or move a control in or out a container.
The colors drop down lets you change the selection and glyphs colors. Doesn't really serve any purpose other than it's a cool features 🙂 except that in some cases the colors of the controls may interfere with the designer colors...
