Adding Context Sensibility to your own buttons

Once you added your own buttons or if you placed a toolsrtripButton on ToolStrip Control, you may want to change some properties of your custom button based on the context. For example, you may want the checked status to be TRUE for your custom Bold button, Italic Button, Underline Button etc if the selected or active context is bolded, italic or underlined etc.

First of all, let us explain how you can get Context Information :

You can get the context information anytime from the Composite Property StateQuery. This composite property has members for getting the context status of the editor . For example, the Bold button's checked status can be set by the following snippet.

toolStripButtonBold.Checked = htmlEditor1.StateQuery.IsBold();

In this way, you can check the status for Italic button, Underline button, Ordered List button, Unordered List Button etc. You may also check the active Font Family Name, Font Size, Font Color etc from this StateQuery object.

state_query

From the above screenshot, you can easily understand that, a lot of context information is available from this object. For example, you can see that there is a member named "IsImage()". Yes, that means, this member will return true if an image is selected or if an image is activated.

Now, let us explain, how can you detect the context changed and use this StateQuery to change your control's properties.

This control has an event named SelectionChanged. This SelectionChanged event is fired as soon as you change the caret from one element to another element. So, this event is the best place to host the logic for updating your control's properties based on context. For example, if you have 3 buttons in your Form named btnBold, btnItalic, btnUnderline who are responsible for applying bold, italic and underline formatting respectively. Now, the following snippet will show how to change properties of these buttons based on context changes.

1.Handle SelectionChanged event

attaching_selection_changed_event

2. Write Event Handler code as

selection_changed_event_handler_cs

selection_changed_event_handler_vb

3. Now, when you run the form, add some text and format some of the portion as Bold, and some of them as Underline. Now, keep changing your mouse caret and you will notice that the button's background colors are being changed based on the logic we just wrote here.

bold_underline_higghlighted

Common context queries

Custom ribbon Bold button reflecting StateQuery IsBold result with checked visual state as caret moves across HTML content

The StateQuery service on the editor is the single entry point for asking the editor about the current caret/selection state. Use the boolean queries to toggle the pressed/checked state of your own toolbar or ribbon items, and the getters to populate font / size pickers.

Custom font name and size pickers bound to StateQuery GetActiveFontFamilyName and GetActiveFontSize values from the WinForms HTML Editor

// Formatting state -- ideal for Checked / Pressed visuals on your buttons.
bool bold       = htmlEditor1.StateQuery.IsBold();
bool italic     = htmlEditor1.StateQuery.IsItalic();
bool underline  = htmlEditor1.StateQuery.IsUnderline();

// List / alignment state.
bool ol         = htmlEditor1.StateQuery.IsOrderedList();
bool ul         = htmlEditor1.StateQuery.IsUnorderedList();
bool alignLeft  = htmlEditor1.StateQuery.IsJustifyLeft();
bool alignCntr  = htmlEditor1.StateQuery.IsJustifyCenter();
bool alignRight = htmlEditor1.StateQuery.IsJustifyRight();

// Element-under-caret queries -- enable/disable element-specific commands.
bool isLink     = htmlEditor1.StateQuery.IsHyperLink();
bool isImage    = htmlEditor1.StateQuery.IsImage();
bool isTable    = htmlEditor1.StateQuery.IsTable();

// Active font info -- bind to your font name / size pickers.
string fontName = htmlEditor1.StateQuery.GetActiveFontFamilyName();
string fontSize = htmlEditor1.StateQuery.GetActiveFontSize();   // e.g. "11pt"

// Undo / Redo availability -- enable/disable your own Undo/Redo buttons.
bool canUndo    = htmlEditor1.StateQuery.CanUndo();
bool canRedo    = htmlEditor1.StateQuery.CanRedo();

Custom Undo Redo toolbar buttons enabled or disabled based on StateQuery CanUndo CanRedo flags inside SelectionChanged event

A reliable pattern is to call these from the editor's SelectionChanged / HtmlChanged handlers and project the results onto your custom UI — that way your buttons mirror the editor exactly as the user moves the caret, opens a new document, or undoes a change.