Inline text box labels with WPF

Question

I'm trying to reproduce the layout of some paper forms in a WPF application. Labels for text boxes are to be "inline" with the content of the text boxes, rather than "outside" like normal Windows forms. So, with an Xxxxxx label:

+-----------------------------+
| Xxxxxx: some text written   |
| in the multiline input.     |
|                             |
| another paragraph continues |
| without indentation.        |
|                             |
|                             |
+-----------------------------+

The Xxxxxx cannot be editable, if the user selects all the content of the text box, the label must remain unselected, I need to be able to style the text colour/formatting of the label separately, when there is no text in the text box, but it has focus, the caret should flash just after the label, and I need the baselines of the text in the text box and the label to line up.

One solution I tried was putting a textblock partially over the input, then using text indent to indent the editable text, though this caused problems with following paragraphs, since they were indented too. I'm not sure how to indent just the first paragraph. It required some fiddling to get the text to line up - a more reliable setup would be ideal.

So, any suggestions on how to set this up?

Thanks

Answer 1

Well, I can suggest a somewhat hackish way to do it.

First, note that you can put UI elements into a FlowDocument. So that makes something like this possible:

<RichTextBox>
  <FlowDocument>
    <Paragraph>
      <InlineUIContainer>
        <TextBlock>This is your label: </TextBlock>
      </InlineUIContainer>
      <Run>And this is the editable text.</Run>
    </Paragraph>
  </FlowDocument>
</RichTextBox>

The problem now becomes keeping the user from editing the InlineUIContainer. That's really two problems.

The first problem is keeping the user from selecting it. To do that, you have to handle the SelectionChanged event. In the event, find the first InlineUIContainer in the RTB's document, and if Selection.Start is before that, change it.

private void RichTextBox_SelectionChanged(object sender, RoutedEventArgs e)
{
    RichTextBox rtb = (RichTextBox) sender;
    if (rtb == null) return;

    InlineUIContainer c = rtb.Document
        .Blocks
        .Where(x => x is Paragraph)
        .Cast<Paragraph>()
        .SelectMany(x => x.Inlines)
        .Where(x => x is InlineUIContainer)
        .Cast<InlineUIContainer>()
        .FirstOrDefault();

    if (c == null) return;

    if (rtb.Selection.Start.CompareTo(c.ElementEnd) < 0)
    {
        rtb.Selection.Select(c.ElementEnd, rtb.Selection.End);
    }
}

There's probably an easier way to formulate that LINQ query, but I kind of like it. And this isn't 100% perfect; if you select inside the text and drag left over the TextBlock, it will lose the selection. I'm sure that can be fixed. But it works pretty well. It even handles the case where the user navigates around with arrow keys.

Just this much gets you almost all the way there. The other thing that can mess you up, though, is if the user positions the cursor at the very beginning of the text and presses BACKSPACE.

Handling that requires something similar: compare the caret position with the end of the first InlineUIElement, and cancel the BACKSPACE (by marking the event as handled) if the caret's at that position:

private void RichTextBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key != Key.Back)
    {
        return;
    }

    RichTextBox rtb = (RichTextBox)sender;
    if (rtb == null) return;

    InlineUIContainer c = rtb.Document
        .Blocks
        .Where(x => x is Paragraph)
        .Cast<Paragraph>()
        .SelectMany(x => x.Inlines)
        .Where(x => x is InlineUIContainer)
        .Cast<InlineUIContainer>()
        .FirstOrDefault();

    if (c == null) return;

    if (rtb.CaretPosition.CompareTo(c.ElementEnd.GetInsertionPosition(LogicalDirection.Forward)) <= 0)
    {
        e.Handled = true;
    }            
}