Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 412
lhan Avatar asked Dec 31 '25 20:12

lhan


1 Answers

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>
like image 187
siger Avatar answered Jan 05 '26 23:01

siger



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!