Custom Presentation - Red wavey line

3 posts, 0 answers
  1. Robert
    Robert avatar
    271 posts
    Member since:
    Mar 2011

    Posted 10 Aug 2012 Link to this post

    Are there any example showing how to draw a red wavy line under a set of text?

    In my project, I use a lot of custom annotations. The annotions have a DateTime property that is used to flag up an expiry time limit.
    I would like a red wavy line to appear under the text in the custom annotation when the expirey time period has elapsed.

    I've already used custom presentation to draw rectangles around certain annotations:

    Rectangle rectangle = new Rectangle();
    rectangle.Width = Math.Max(0, (endInline.BoundingRectangle.Location.X - startInline.BoundingRectangle.Location.X));
    rectangle.Height = startInline.LineInfo.Height;
    Canvas.SetTop(rectangle, startInline.ControlBoundingRectangle.Top - (startInline.LineInfo.Height / 1.5));
    Canvas.SetLeft(rectangle, startInline.BoundingRectangle.Left);
    rectangle.Fill = FillBrush;
    rectangle.Opacity = MouseOverHighlightLayer.MouseOutOpacity;
    rectangle.MouseEnter += (s, e) => { ((Rectangle)s).Opacity = MouseOverHighlightLayer.MouseInOpacity; };
    rectangle.MouseLeave += (s, e) => { ((Rectangle)s).Opacity = MouseOverHighlightLayer.MouseOutOpacity; };

    I'm mainly looking for the best way to draw a red wavy line.

    Thank you very much for your time and help,

  2. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 14 Aug 2012 Link to this post

    Hi Robert,

    The red wavy line we're so used to seeing isn't actually a line at all, its a continuous string of "v" characters.  I've attached an image of a close up of it in Visual Studio, where its pretty smooth, but in some applications if you zoom in close enough you can see the breaks between the characters.

    I hope this helps bring you closer to creating your goal!

    Good luck,
  3. Iva Toteva
    Iva Toteva avatar
    1319 posts

    Posted 15 Aug 2012 Link to this post

    Hello Robert,

    If the red wavy underline that is shown when a word is misspelled in the editor matches your requirements, you can see how it has been implemented in the ProofingErrorsDecorationUILayer. You can download the source of the controls from your account and find it in the \Documents\Core\UI\Layers\TextDecorationLayers\ folder. The layer uses methods from the DecorationUILayerBase class and WaveUnderline, that is why I am not attaching the file itself.

    Of course, you would have to change the logic when the decoration will be drawn.

    I hope this helps.


    Iva Toteva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top