Does anyone know how to go about creating mouse over effects for custom annotations?
For example, if I "mouse over" between a custom annotation range I may want the font colour, or font size to change or to even highlight the annotation. Going even further, maybe have some way to activate a little popup window which in turn may display more detailed information about the annotation properties (I guess that's similar to the Comments Annotations feature).
Any information would be really handy.
Thanks for your time,
10 Answers, 1 is accepted
The suggested approach in scenarios like these is to create custom UILayer. You can read more about how to do that in this help article or check out out this online demo. However, there are some limitations when using UILayers, as they are updated after the layout of the document is already calculated. So you can add additional UI within the RadRichTextBox control, but you cannot affect the current layout of the document inside it. For example, you can add highlight over the elements in your custom annotation, but changing the font size means that document's layout should be invalidated and it is not recommended to do that, inside the UILayer.
The other part of the API that you will probably need are the GetDocumentPositionFromViewPoint and GetViewPointFromDocumentPosition methods of the current presenter that is showing the document (accessible trough the ActiveEditorPresenter property of the RadRichTextBox). These will help you to translate the coordinates that you get form the MouseMove event to an actual position inside the document you are editing and vice versa.
Please don't hesitate to contact us again if you need more help.
the Telerik team
I have tried the following but I don't ge the correct result.
Here's the code I use to get the annotation marker from the mouse position:
This now works for me (although I do have to offset the Y value slightly).
I can see from the demo example, HightlightCurrentLine & HighlightCurrentWord, you override the OnDocumentChanged & Changing methods and assign CaretPositionChanged events.
I can't find a way to assign RadRichTextBox_MouseMove event. ** if that is the correct way to achieve what I'm looking for **
You can get to the RadRichTextBox control from the UILayerUpdateContext like this: (RadRichTextBox)context.Presenter.Owner. However I can suggest you a slightly different approach. You can create elements needed for the highlight and add them to the layer but with a low opacity. This way you can attach the mouse events directly to them and only change their opacity when the mouse is over them. You can also add a tool tip with the additional information you need to show about the elements.
I've attached a simple project that demonstrates this approach. There is a layer that will highlight only the words with text "test" in the document when the mouse is over them and also show a tooltip .
I hope this will help you to move on.
the Telerik team
Thank you very much for your demo. It was a huge help. I now have a much better idea of how the custom layers work.
I have modified your code so that the annotations are applied to my semantic ranges (please let me know if you think there is a better way of achieving this).
The only problem I have is that the Top and bottom positions are not reporting the correct locations. It is as if the bounding rectangle is offset. You can see what I mean by taking a look at the attached image.
It is obvious to see that the top edge of the rectangle layer should be the bottom position. I came across this issue in another situation when trying to record the location of an annotation. I guess I can manually offset the Y position to compensate for this. Do you know of any other solutions?
Thank you again for all of your help.
It isn't ideal, but it will do for now as fairly good quick fix.
You've made great progress so far. The reason for the strange offset is that the bounding rectangles of the annotations are really small ant they are positioned on baseline of the current line. So using the Top of the bounding rectangle of the AnnotationLayoutBox, for positioning the UI elements you've created, will produce such results.
However there is a solution to your problem - to calculate the Y coordinate of the line that contains the annotation box. Here is how this can be done (similar method is used in the online demo:
Now that you have this method , you can set the Canvas.Top property of the Rectangle element you've created this way:
I hope this makes sense.Kind regards,
the Telerik team