Question

I’m writing a windows phone app and I would like to implement a “tap text to expand” feature.

I have a series of TextBlocks that currently look much like this repeated multiple times:

<TextBlock 
    Name="description" HorizontalAlignment="Left" VerticalAlignment="Top" 
    Margin="12,40,0,0" Width="444"
    TextWrapping="NoWrap" TextTrimming="WordEllipsis" />

[Note the last two: TextWrapping="NoWrap" TextTrimming="WordEllipsis" and the lack of Height being set.]

This shows one line, and when the line is longer than the screen it ends in ellipsis, which is perfect. Currently, when the user taps the TextBlock I turn TextWrapping to Wrap. This allows the text to take as many lines as it needs (the functionality I want).

The problem is that when I turn TextWrapping to Wrap it expands into the TextBlock below it (remember, I have a bunch of these packed next to each other). Also, to get it to expand fully I never initially set Height, so if I try to access it later I get NaN (and ActualHeight never changes from 26.6, no matter how many lines it expands to be)

I’m looking for a way to dynamically push the TextBlocks below it down the amount necessary to display the text in its entirety, but I don’t know the “correct” way to go about it. (on a similar note: hardcoding Margin is unideal, especially for dynamicly expanding text, is there a “RelativeLayout” (or something similar) that I’ve been unable to find? )

Answer 1

Have you tried placing your TextBlocks in a StackPanel? This should prevent the TextBlock objects from overlapping and you can set their individual margin values to ensure the spacing you want.