Search code examples
xamlwindows-phone-8stackpanelword-wrapwrappanel

Wrap text nicely in horizontal stackpanel or wrappanel?


I've seen a few other posts about this but haven't seen anything that solves my problem. Basically, I need to have some text (bold and unbold) wrap within a Stackpanel or Wrappanel nicely. Here is a visual:

enter image description here

I need a combination of the two TextBlocks that you see. I've got the first bold TextBlock which contains "Title: " and then on the same line I need the next TextBlock which may or may not wrap. If it does wrap, I need the top line to stay on the top line and then wrap, as if it were all one TextBlock. Here's a made-in-Paint visual of what I need:

enter image description here

Here's my code that I've got so far:

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here " />
</toolkit:WrapPanel>

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</toolkit:WrapPanel>

Now, I'm not opposed to this being done in one TextBlock either (if possible). I know that with TextBlock.Inlines I can add a Run of bold text and then another of regular text. The problem with that is Inlines cannot be bound using MVVM (which I'm not using in this demonstration, but will be using in the final code).

So whatever the solution is, I need to be able to set the values of the TextBlocks from the code-behind so that I know it can be done with MVVM.

Does anyone know of a way to achieve this?


Solution

  • Use the RichTextBox control with a different run for every font style.

    <RichTextBox>
        <Paragraph>
            <Run FontWeight="Bold">Title:</Run>
            <Run>More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :(</Run>
        </Paragraph>
    </RichTextBox>
    

    You can bind the Text property of the Run elements to your data context, ex.:

        <RichTextBox>
            <Paragraph>
                <Run FontWeight="Bold"
                     Text="{Binding Header}"></Run>
                <Run Text="{Binding Text}"></Run>
            </Paragraph>
        </RichTextBox>