Adjusting LineHeight in Silverlight for Windows Phone 7 Applications

Question

In my application I have squares at around 160 x 160 in size. Inside the squares are TextBlocks. The Textblocks are dynamic and can be filled in with any amount of words.

The design I have been given requires the Line Height of the text inside the TextBlock to be smaller than the default size. Smaller in that it almost looks like its overlapping.

If I were to do this in CSS/HTML I would simple do...

<p style="display: block; width: 90px; padding: 10px; background: none repeat scroll 0% 0% rgb(51, 51, 51); color: rgb(255, 255, 255); font-family: arial,san-serif; height: 90px; font-size: 16px; line-height: 9px;">This is my sentence, it is contained inside a small square. I need the line height to be less than normal</p>

If you test that out you will get something like this...

However, I can't seem to adjust the LineHeight Property below the default 0 value in silverlight. It throws an error...

What do can I do to get a lower-than-default-line-height like I did with css/html?

Answer 1

Yay!

You'll find the answer to this question here at MSDN.

http://msdn.microsoft.com/en-us/library/system.windows.controls.textblock.linestackingstrategy%28v=vs.95%29.aspx

<TextBlock LineStackingStrategy="MaxHeight"/>
<!-- or -->
<TextBlock LineStackingStrategy="BlockLineHeight"/>

You'll notice in the example below that by add the property "LineStackingStrategy" and setting it to "BlockLineHeight" I was able to achieve the desired effect!

Answer 2

I think you'll need to create multiple TextBlocks and overlay them yourslef manually to get that effect.

Alternatively, you could use the WebBrowser control and put the HTML & CSS in that to create the effect that way.