LogoLogo
HomeNewsSupportVideos
  • Introduction
  • Getting Started
  • What's new in 4.0
    • Known Issues
    • .NET Core Designer
    • Managed Graphics
    • Fluent Markup
    • Markdown Support
    • Upgrade from 3.x
  • Releases
    • What's new in 4.0
    • What's new in 3.5
    • What's new in 3.2
      • View Builder
      • Validation Rules
      • Enhanced Font Support
      • Design-Time Debug
    • What's new in 3.1
    • What's new in 3.0
      • FAQs
      • Update Existing Projects
      • Multi Targeting
      • Visual Studio Designer
      • Referencing Assemblies
      • Docker Support
      • Troubleshooting
      • Deployment
    • What's new in 2.5
    • What's new in 2.2
    • What's new in 2.1
    • What's new in 2.0
    • Upgrade from 1.x
  • Getting Started
    • New Project
    • Templates
    • Troubleshooting
    • License Activation
    • FAQ
    • API
    • Hybrid
    • Deployment
    • Theme Builder
  • Concepts
    • Startup
    • Configuration
    • Load Balancing
    • Designer
    • Layouts
    • Client Profiles
    • Tab Order
    • Compression
    • Embedded Resources
    • Modal Workflow
    • Localization
    • RightToLeft
    • Background Tasks
    • Real Time Web Applications
    • JavaScript
    • JavaScript Object Model
    • Security
    • Synchronization
    • Session Management
    • Theming
    • Dependency Injection
    • Application Switches
    • Visual Studio Code
  • Controls & Components
    • General
      • Application
      • AutoSizing
      • AutoScroll
      • AutoScaling
      • Accessibility
      • Colors & Fonts
      • Embedded Tools
      • Events
      • Touch Events
      • Images
      • Labels
      • ToolTips
      • Data Binding
      • Common Properties
      • Custom Painting
      • Move & Resize
      • Drag & Drop
      • Validation
      • User Data
      • Responsive Properties
      • VB.NET Extensions
    • Common Dialogs
      • FolderBrowserDialog
      • ColorDialog
      • OpenFileDialog
      • SaveFileDialog
    • Editors
      • TextBox
        • TagTextBox
        • MaskedTextBox
        • TypedTextBox
      • DateTimePicker
      • MonthCalendar
      • TimeUpDown
      • DomainUpDown
      • NumericUpDown
      • TrackBar
    • Buttons
      • Button
      • SplitButton
      • CheckBox
      • RadioButton
    • Containers
      • Page
      • Form
      • Desktop
      • Panel
      • FlexLayoutPanel
      • FlowLayoutPanel
      • TableLayoutPanel
      • GroupBox
      • Accordion
      • TabControl
      • UserPopup
      • UserControl
      • ToolBar
      • StatusBar
      • SplitContainer
      • SlideBar
    • Lists & Grids
      • ComboBox
        • UserComboBox
        • TreeViewComboBox
        • ListViewComboBox
      • ListBox
        • CheckedListBox
      • TreeView
      • ListView
      • DataGridView
        • Column
        • TextBoxColumn
        • ButtonColumn
        • LinkColumn
        • ImageColumn
        • MaskedTextBoxColumn
        • DateTimePickerColumn
        • NumericUpDownColumn
        • CheckBoxColumn
        • ComboBoxColumn
      • DataRepeater
      • PropertyGrid
    • Extenders
      • Animation
      • ToolTip
      • ErrorProvider
      • Rotation
      • StyleSheet
      • JavaScript
    • Media
      • Audio
      • Video
      • FlashPlayer
    • Content
      • Label
      • LinkLabel
      • PictureBox
      • ScrollBars
      • Upload
      • AspNetPanel
      • ImageList
      • PdfViewer
      • ProgressBar
      • Spacer
      • Widget
      • WebBrowser
      • IFramePanel
      • HtmlPanel
      • Canvas
      • Shape
      • Line
    • Menus
      • MainMenu
      • MenuBar
      • MenuItem
      • LinkMenuItem
      • ContextMenu
    • Notifications
      • AlertBox
      • MessageBox
      • Toast
    • Other Components
      • Timer
      • BindingSource
      • BindingNavigator
      • DataSet
      • EventLog
      • MessageQueue
      • PerformanceCounter
Powered by GitBook
On this page
  • Snap Lines
  • Quick Actions
  • Client Profiles
  • Document Outline
  • Current Theme
  • Colors
  • Transparent Colors
  • Extension Providers
  • Rendering Options
  • Custom Painting
  • License Panel
  • Unsupported Features

Was this helpful?

Export as PDF
  1. Concepts

Designer

PreviousLoad BalancingNextLayouts

Last updated 3 months ago

Was this helpful?

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:

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.

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.

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

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

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.

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:

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.

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.

Colors

Transparent Colors

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.

Extension Providers

The designer also supports this functionality, and is capable of updating the view of the extended controls as they are designed.

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

Custom Painting

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

License Panel

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

Changes the client profile being displayed in design view. Changing the client profile updates the value of the associated with the client profile.

Enables the and applies the selected auto-numbering order.

Since 3.0 Shows the panel.

Wisej.NET preloads the list with the few built-in client profiles. However, you can create your own by adding a file and see your custom profiles in the designer.

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.

Changing a theme in the designer doesn't change the application's theme. See to see how to change the application's theme.

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

Wisej.NET supports all sorts of extensions, including . These are components that when added to a container extend (add properties and functionality) to all the qualified controls in the container.

All Wisej.NET control support custom painting using a standard GDI+ context and a simple event.

ClientProfiles.json
Client Profiles
Responsive Properties
Configuration
Extension Providers
Graphics
Paint
Custom Painting
Responsive Properties
"tab order mode"
👉
⭐
🙂
Designer toolbar
Snap lines demonstration
Quick actions menu demonstration
Rotation properties are provided by the Rotation extender.
Auto Layout