NetRix Professional Editor

Common Editor Features

The NetRix editor component comes with a lot of sophisticated features. All features are easy to use, often just by setting a simple property. They turn the host application in a professional and mature software.

Grid, Grid Layout and Positioning Features

The Grid helps the user to position objects if the control is in grid layout mode. This mode allows the absolute positioning of any block element. It works like the GridLayout feature in Visual Studio.NET. To get the same behavior as of VS.NET the following features must be activated:

Grid (to make the mode visible and helpful in conjunction with snap)

Snap to Grid (to move the element borders exactly to the grid)

Multiple Selection (to let the user select multiple objects and arrange them)

The Grid feature be activated using the following property (assumes that the component is instantiated as htmlEditor1):

this.htmlEditor1.GridVisible = true;

The Snap-to-Grid features allows the grid dots to be magnetic against the floating objects borders. Rectangle objects snap to the upper left corner. The activation is quite easy:

this.htmlEditor1.SnapEnabled = true;

The multiple-selection features allows the user to select more than one element. If a selection contains two element or more, the component allows some additional commands, like alignment or move to different layers. The activation uses a property, too:

this.htmlEditor1.MultipleSelectionEnabled = true;


The helpline is an additional method to help exact positioning of objects. The helpline has various properties and is fully customizable. Actually, websites or HTML driven documents are often prepared for printing or have a strong design approach. The helpline is an instrument to position objects exactly, or remember the user where to right or down border is.   

To activate the helpline the following method call is necessary:


This method has a second overload to position the helpline as they first appear. Once activated, a lot of properties can be set, using the property HelpLine:

HelpLineProperties helplineProperties = new HelpLineProperties();
helplineProperties.CrossEnabled = true;
helplineProperties.LineStyle = new Pen(Color.Blue, 2.0F);
helplineProperties.SnapEnabled = true;
helplineProperties.SnapGrid = false;
helplineProperties.SnapOnResize = true;
helplineProperties.SnapZone = 20; helpLine11.SetHelpLine(this.htmlEditor1, helplineProperties);

The property CrossEnabled enables the hotspot where the two lines cross. Then LineStyle sets the Pen used to draw both lines. SnapEnabled enables the snap to helpline feature. If SnapGrid is enabled the helpline jumps exactly on the underlying grid (see above for Grid). With SnapOnResize the snap feature will also work on resizing of elements, not only on moving. The magnetic area, where the snapping takes place, can controlled by SnapZone, measured in pixels.


Glyphs are small images in design view to make tags visible. The can help to navigate in complex HTML documents without digging deeper into the worls of tags as necessary. The glyphs has various states for different purposes.

To activate Glyphs the following code has to be used:

this.htmlEditor1.GlyphVisible = true;
this.htmlEditor1.GlyphKind = GuruComponents.Netrix.WebEditing.GlyphKind.All;

There are many other options you can select using the GlyphKind enumeration. The feature is fast enough to being switched on and off during editing sessions frequently.

Last edited Dec 18, 2013 at 11:02 AM by joergisageek, version 1