Designer
Last updated
Last updated
Wisej is the only Web Application system that supports a pixel-perfect designer. It's a unique technology integrated with Visual Studio designer that renders the final HTML directly on the designer surface with very little, if any, limitations.
You can design any JavaScript widget, including custom-built controls, and including C#/VB.NET backed widgets.
Wisej integrates and extends ( a lot! ) Visual Studio's built-in designer. At design time, all Wisej controls, including third party JavaScript widgets, are rendered behind the scenes using an array of headless browsers ( this is one of the patented technologies in Wisej.)
There is no limit to what Wisej can display in the Visual Studio designer. Effectively turning JavaScript widgets into fully designable controls.
The first thing you will notice is the new toolbar at the bottom of the design surface:
All controls in the designer provide their own snap lines and snap rules to help developers align controls with each other. Wisej has added custom snap lines saved with the container.
You can create/delete/move any number of 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 will see the same snap lines, helping enforce design location in a development team.
You can create a new snap line by clicking on the ruler, and delete it by clicking again on the ruler at the same location. Move a snap line by dragging it on the design surface.
Unfortunately, when dragging a snap line it doesn't drag along the controls that snapped to it. In any case, it's easy to move a group of controls simply by selecting all of them and moving the group as one block either with the arrow keys or the pointer.
All Wisej controls have extended the quick actions feature of the Visual Studio designer. As soon as you drop a control to the design surface, the designer opens the quick action menu immediately, showing the most common properties.
This feature speeds up the initial building of complex UIs quite a lot.
You can add your own properties to the quick actions menu simply by adding the DesignerActionList attribute to the property.
Without the DesignerActionList implementation in Wisej you'd have to create a custom designer for each control that you want to show the quick action list for.
When designing a Wisej 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 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:
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.
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 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 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 always creates the full number of parallel renderers for each designer surface open in Visual Studio. When a designer is closed, Wisej places the renderers in a pool to be able to reuse the instances quickly. However, after a certain timeout, Wisej 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 control support custom painting using a standard GDI+ Graphics context and a simple Paint event.
Custom 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 obviously not supported at design time.
Extender providers that add visual items that are outside of the extended component's rectangle are not shown at design time. For example, tooltips, error icons, and information bubbles cannot be displayed in the designer because they are typically outside of the frame used by the component that they extend.
Rotations that make the content of a component exit its rectangle cause the outside parts to be truncated at design time. They are visible at runtime.
| Tool | Description |
|---|---|
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...
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 License Panel.
