Designer

WATCH & LEARN0:51 · Animated tutorial

7 scenesPlay, pause, or scrub at your own pace

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 JavaScript widgets, including custom controls and widgets backed by C# or VB.NET classes.

Wisej.NET extends Visual Studio's built-in designer. At design time, it renders controls, including third-party JavaScript widgets, using an array of headless browsers. This rendering approach 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:

Tool	Description
	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.
	Shows or hides controls whose Visible property is false. By default, the designer displays these controls so you can edit them. Hide them temporarily when overlapping controls make the design surface difficult to navigate.
	Refreshes the selected controls or the entire designer surface. Use this when a complex control or a slow-loading third-party library leaves the widget only partially rendered.
	Shows or hides the anchor glyphs. In complex screens it is possible to click the anchoring glyphs by mistake. This tool lets you hide them to prevent accidental changes.
	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.

Snap Lines

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

info

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.

Quick Actions

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:

/// <summary>
/// Returns or sets a value that indicates whether the
/// control is collapsed or expanded.
/// </summary>
[DesignerActionList]
public virtual bool Collapsed

tip

The DesignerActionList implementation in Wisej.NET eliminates the need to create custom designers for controls that need quick action lists.

Client Profiles

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.

The list includes the built-in client profiles. To make your own profiles available in the designer, add a ClientProfiles.json file to the project.

Responsive property values set at design time are saved in the container's .resx file. Inspect the (Responsive Properties) collection to see which profiles have overrides and which properties each profile changes.

See also:

Client Profiles

Responsive Properties

Document Outline

The 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.

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.

Current Theme

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.

info

Changing the designer's theme does not change the application's runtime theme. See Configuration for instructions on setting the application's theme.

Colors

The colors drop-down lets you change the colors of selection outlines and glyphs. Choose colors that contrast with your controls so the designer's indicators remain easy to see.

Transparent Colors

The designer can render transparent colors on overlapping controls. Because each control is rendered individually, the designer must compose the overlapping parts in the correct order to show the controls beneath them.

This feature is off by default. To enable it, set ShowDesignerTransparency to true on the container being designed.

Extension Providers

Wisej.NET supports Extension Providers: components that add properties and functionality to eligible controls when placed in the same container.

The designer updates the appearance of extended controls as you change the properties provided by these components.

Rendering Options

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 creates the configured number of parallel renderers for each open design surface in Visual Studio. When you close a designer, its renderers return to a pool for reuse. After a timeout, Wisej.NET disposes of pooled renderers beyond the configured number.

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.

danger

Broken image or font links are common causes of rendering timeouts in the designer.

Custom Painting

All Wisej.NET controls support custom painting through a standard GDI+ Graphics context and the Paint event.

Custom Painting

Custom painting is also supported at design time when implemented in the control's class. A Paint event handler defined in the container currently being designed does not run on that design surface.

License Panel

The license icon at the right end of the designer toolbar opens the Wisej.NET Developer license panel. It shows the license key in use, its status, the date it is valid to, the Wisej.NET version it covers and the license type, and it is where a key is entered and activated, a license bought, or a trial requested. See License Activation.

Unsupported Features

• 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