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:

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?

So, you want to bind to a single source of text and some of that text might be bold? — Peter Ritchie, Feb 05 '14 at 01:48
Potentially, yes. I need the title to be bold and the rest not. If it were easier though, the titles can be in separate textblocks. — lhan, Feb 05 '14 at 02:11

score 3 · Accepted Answer · answered Feb 05 '14 at 03:18

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>

This works perfectly. It occurred to me earlier that Silverlight's `RichTextBox` is an actual text box that users can type in, and for a second I assumed this wouldn't work. I did not know that the Windows Phone `RichTextBox` was more like the `TextBlock` rather than a `TextBox`. Thanks again! — lhan, Feb 06 '14 at 02:05

Pradeep Kesharwani · Answer 2 · 2014-02-05T14:54:39.687

0

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>

edited Feb 05 '14 at 14:54

answered Feb 05 '14 at 04:02

Pradeep Kesharwani

1,480
1
12
21

Did you test this? AFAIK, `Run`s must be inside a `` (I assume you meant `TextBlock` and not `TextBox`) container, and as I mentioned in my post, `Inlines` of a `TextBlock` cannot be bound with MVVM. – lhan Feb 05 '14 at 14:23

score 0 · Answer 3 · answered Feb 05 '14 at 05:28

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 >

Thank you. I believe I tried something like this, binding the `Width` of the `StackPanel` to the `ActualWidth` of it's parent. If I remember correctly, it *almost* worked but when the text would wrap, the text from the second `TextBlock` would not go directly underneath that of the first. I will try this again tonight though. Thank you! — lhan, Feb 05 '14 at 14:20

score 0 · Answer 4 · answered Jul 10 '14 at 18:59

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.

Wrap text nicely in horizontal stackpanel or wrappanel?

4 Answers4