CODEWITHSUNDEEP
c#wpfxaml
EpicKip
EpicKip

Reputation: 4043

How to wrap text from 2 different textblocks with different alignments

I would like to wrap text from 2 different textblocks.
The reason I need 2 is because they both have a different text format/alignment.

It currently looks like this:

enter image description here

I would like the xx.xx to be in the red circle if there is still room (like in the image).

This is the xaml: 

<TextBlock TextAlignment="Right" TextWrapping="Wrap">
    <TextBlock
        Text="texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext"
        TextAlignment="Left"
        TextWrapping="Wrap" />
    <TextBlock
        HorizontalAlignment="Right"
        FontSize="10"
        Foreground="LightGray"
        Text="xx.xx"
        TextAlignment="Right"/>
</TextBlock>

Inlines do not work either as Run's do not support alignment (and I need 2 different alignments).

Essentially WhatsApp is a perfect example of the behavior I want:

enter image description here

I've tried a lot of variations of my current code but either the xx.xx starts on a newline or the other text will overlap.

Upvotes: 0

Views: 422

Answers (2)

Pavel Anikhouski
Pavel Anikhouski

Reputation: 23228

Try to do it using the following way (I've restricted the TexBlock size to wrap the text)

<TextBlock Width="200" TextAlignment="Right" TextWrapping="Wrap">
    <Run Text="texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext"/>
    <Run FontSize="10" Text="xx.xx" Foreground="LightGray"/>
</TextBlock>

Actually it looks like as (xx.xx text is displayed on the same line)

enter image description here

Upvotes: 1

GregorMohorko
GregorMohorko

Reputation: 2857

To make it look like in your example from Whatsapp, you can put both TextBlocks into a Grid and position them accordingly.

<Grid VerticalAlignment="Top">
    <TextBlock
        Text="xx.xx"
        HorizontalAlignment="Right"
        VerticalAlignment="Bottom"
        FontSize="10"
        Foreground="LightGray" />
    <TextBlock
        Text="texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext this is text texttexttext dfgdffdg fgffgf"
        TextWrapping="Wrap" />
</Grid>

This is as simple as it can get to achieve what you are trying to achieve and it allows you to add any other controls to the xx.xx part, like in the Whatsapp example (the Check icon). The only problem with this solution is the situation from the top text from your Whatsapp example, because the text will simply be on top of the xx.xx text.

If I really wanted to achieve something like this, then I would programmatically check (every time the Text changes) the width of the TextBlock and whether or not it overlaps with the xx.xx TextBlock. And if it does, I would split it into two TextBlock objects: One for the text above, and one just for the last line. It's complicated, but I don't know of any other option how to achieve something like this. It's a lot of work for a little UI tweak. :)

Upvotes: 0

Related Questions