HelpLine Plug-In

The helpline plug-in is an extender provider for the HtmlEditor class. Once it has been added to the current form you can activate a helpline. A helpline is a vertical, horizontal, or both line, that the user can move over the text. It stays on an independent layer and does not persist in the document. The purpose is simply to support the alignment of objects that are absolute positioned. Hence, it's reocmmended to position elements absolutely.

The helpline tab exposes to helper functions, 'Show Grid' and 'Absolute Position' that makes sense especially when using the helpline.

Code

Use this code to create two helpline objects:

this.helpLine1 = new GuruComponents.Netrix.HelpLine.HelpLine(this.components);
this.helpLine1.SetHelpLine(htmlEditor1, new HelpLineProperties());
this.helpLine2 = new GuruComponents.Netrix.HelpLine.HelpLine(this.components);
this.helpLine2.SetHelpLine(htmlEditor1, new HelpLineProperties());

 This is similar to what the Visual Studio designer does internally. You can use the designer as well. Just drag the extender control onto the designer surface.

Once the helpline is there, you can set various properties:

this.helpLine2.GetHelpLine(htmlEditor1).LineVisible = false;
this.helpLine2.GetHelpLine(htmlEditor1).LineColor = Color.Blue;
this.helpLine2.GetHelpLine(htmlEditor1).X = 100;
this.helpLine2.GetHelpLine(htmlEditor1).Y = 100;
 
this.helpLine1.GetHelpLine(htmlEditor1).LineVisible = false;
this.helpLine1.GetHelpLine(htmlEditor1).LineColor = Color.Red;
this.helpLine1.GetHelpLine(htmlEditor1).X = 30;
this.helpLine1.GetHelpLine(htmlEditor1).Y = 30;

The call to GetHelpLine is necessary to assign the helpline to a specific editor on your form (even if there is one only). The call exposes the property bag.

In the demo code we do two things. First, the tools get synchronized with current property bag (simplified shortcut to the code shown above):

_togglebuttonHelpLine_B.BooleanValue = EditorDocument.HelpLineB.LineVisible;
_togglebuttonHelpLine_A.BooleanValue = EditorDocument.HelpLineA.LineVisible;

Second, we use the ribbon's excecute events to set the appropriate properties:

void _togglebuttonHelpLine_B_ExecuteEvent(object sender, ExecuteEventArgs e)
{
    EditorDocument.HelpLineB.LineVisible = _togglebuttonHelpLine_B.BooleanValue;
}

Again, HelpLineB (as well as HelpLineA) are public properties that give access to the property bag like this:

public HelpLineProperties HelpLineB
{
    get
    {
        return helpLine2.GetHelpLine(htmlEditor1);
    }
}

Properties

To make most out of the helpline it makes sense to put the control in absolute position mode. To do so, click the "Absolute Position' toggle button in the ribbon's tab.


Here are some elements you can easily position and move around. Activate the helplines and see, how the various functions work:

Helpline B is just to show how a preset line can be switched on and off easily. It shows that you can have as many helplines as you like, too. However, working with more than 2 or 3 helplines is not recommended (performance issues might arise, users get confused, snapping is hard to control).

Exercise

OBJECT 1
OBJECT 3
OBJECT 2

Switch one or both helplines on an move the absolute positioned objects shown below around: