Lyrics for Music Editor

Question

I'm trying to create a neume (gregorian chant) editor. I have really much done, but I got stuck on the subject of lyrics under the music score.

Basically the problem I'm trying to solve is: there are some independent blocks of User Controls. Under them there should be text areas to put lyrics. The whole point is - lyrics are rich text (but only text - no tables, images, etc.).

To make things funnier - the image rendered by my User Control has to know where is the first vowel in the text below (the first neume - lets call it a note - has to be placed exacly above the first vowel).

I am really struggling trying to make it done. I considered using RTB, but there is the whole problem with re-sizing it - the lyrics can basically be infinite in lenght - (It re-sizes downwards, not to the right), as well as binding to RTB is really funny deal.

Can you please give me any idea how to solve the issue? Here is a small image explaining - I hope - my problem.

Thank you very much in advance!

Answer 1

Have you looked at the TextBox.GetRectFromCharacterIndex method?

http://msdn.microsoft.com/en-us/library/ms603094.aspx

If I'm understanding your issue correctly, you should be able to get that the rect for the letter 'O' in your example above.

I have a similar issue where I needed to draw "red squigglies" on the adorner layer of a given text box to represent a custom Spell Checker solution (the WPF spell checker was too limited for us).

Here's a partial example of that implementation in case it helps.

          //loop through the invalid words and draw the squiggilies
      foreach (var word in rslt)
      {
        //find the index of the start of the invalid word
        int idx1 = tbx.Text.ToLower().IndexOf(word.ToLower());
        //find the index of the end of the invalid word
        int idx2 = idx1 + (word.Length);

        if (idx1 == -1)
          continue;

        //get a rect defining the location in coordinates of the invalid word.
        var rec1 = tbx.GetRectFromCharacterIndex(idx1);
        var rec2 = tbx.GetRectFromCharacterIndex(idx2);

        //if the word is not visible or not fully visible, do not show the red line.
        if (tbx.ActualWidth > 0)
        {
          if (rec1.X < 0 || rec2.X > tbx.ActualWidth)
            continue;
        }

        if (rec1.Y < 0)
          continue;

        //actually draw the line under the word
        SquigglyAdorner ado = new SquigglyAdorner(tbx, word, rec1.X, rec2.X, rec2.Bottom);
        adornerLayer.Add(ado);
      }

Then take that rect and convert it to screen coord's (or whatever coord's you need)