Wrap text nicely in horizontal stackpanel or wrappanel?

Question

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:

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:

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?

Answer 1

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>

Answer 2

Fix Width Property of both StackPanel. this may help you. Problem is if you don't set Width Property it consider as Auto width.

<StackPanel Orientation="Horizontal" Width="400">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here " />
</StackPanel >

<StackPanel  Orientation="Horizontal" Width="400">
   <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. :( " />
</StackPanel >

Answer 3

This would helpful for you:

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock>       
       <Run FontWeight="Bold" Text="{Binding Header}"></Run>     
        <Run Text="{Binding Text}"></Run>    
    </TextBlock>
</toolkit:WrapPanel>

Answer 4

Have you tried using construction like this?

<TextBlock>
    <TextBlock.Inlines>
        <Bold>
            <Bold.Inlines>
                <Run Text="Title: "/>
            </Bold.Inlines>
        </Bold>
        <Run Text="{Binding Text}"/>
    </TextBlock.Inlines>
</TextBlock>

It works like a charm if text-block should be bound to just one block of text.