LineStackingStategy on TextBlock in Windows apps

LineStackingStrategy is a property on the TextBlock controls.
If used right you can control the LineHeight and make text lines get closer or further away from to each other. This can be useful to increase readability for text, creating multiline header etc.

The TextBlock have three options for the LineStackingStrategy property: MaxHeight, BlockLineHeight and BaselineToBaseline.

MaxHeight is the default property value on a TextBlock. What MaxHeight does is that it looks at the tallest element in the line and that item determine the stack height of the specific line.

BlockLineHeight sets the height is determined the LineHeight property value. Each line will have the minimum nessecary lineheight per default dertimined by the fontsize.

BaselineToBaseline stacks the height determined by adding LineHeight to the baseline of the previous line. 
Important: Even though you change the LineStackStrategy from default, you have to set the LineHeight to actually apply it.

Visual example of the LineStackingStrategy applied

There is used a 18pt LineHeight to demo this. You see the big difference when you have different fontsizes inside a text. The column on the left is how it looks with default settings:

If you have problems working with lineheight just reach out to me. I'd be more than happy to help you.
Thanks for reading.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.


Create a Resource in Expression Blend

Heres a small guide to how you get started creating resources inside Expression Blend and place it any given resource dictionary.

1.  Select a given Framework Element in the Objects and Timeline tab. In this example we will Select a TextBlock.

 

 

2. Select the Foreground property and change the color in the Color Editor inside the the Property tab.

 

 

 

 

3. Click the white square and choose: Convert to new resource.

Tip: The white square means the property have a value set locally on the page or in the control and that it's different from the default template. 

Tip: You can reset to the default template anytime by clicking the square and then click Reset.

4. Name (unique key) the resource, choose in what resource dictionary you want to define the new resource in and then click OK.

 

 

5. DONE! You have now created a new resource and applied it to your textblock.

You can see it has been added to your TextBlock by the white square you clicked before, is now green.

If you look in the XAML - the resource is now created, and your TextBlock is actually already using it by referencing it using the StaticResource.

Pro tip:
In Blend you have a tab called resources - check it out. It gives you a complete overview of all the defined resources inside your project. You can copy, delete, edit and move the resources as you like. Most people don't know about it but it offers a great overview that I use offen when ever I work with resources.. 

Pro tip 2:
The tutorial above actually works in Visual Studio's properties panel when using the designer as well.

 

Feel free to reach out to me if you have any comments or difficulties with resource creation.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.