What’s New in Silverlight 5? – Control and Text Improvements

Introduction

In this article, we’ll have a brief discussion of the new features of controls and text in Silverlight 5.

Overview

Silverlight 5 has undergone few improvements in controls and text; new added features for controls, and rendering and performance enhancements for text.

The following are the new features of controls in Silverlight 5:

Text tracking and leading control

Text overflow

Multi-click support

Type-ahead text searching

SaveFileDialog DefaultFilename

DataContextChanged event (not in Beta)

And text has been improved in in a few ways:

Rendering is now better

Performance of text layout has been improved

Text clarity is improved with Pixel Snapping

OpenType support has been enhanced

As improvements in text were all about rendering and performance, we won’t talk more about the text improvements. Instead, we’ll focus in this article on control stack and cover the changes that happened to it in details.

Text Tracking and Leading Control

Silverlight 5 has added three features to text controls (TextBlock, TextBox, and RichTextBox) to allow you to control precisely text tracking and leading space for characters and lines:

Character Spacing

Line Height

Line Stacking Strategy

Character Spacing

This feature allows you to precisely set how far apart each character is. This feature is available in all text controls through a property called CharacterSpacing that specifies the distance between characters. This distance is measured by 1000th of the current font size, means that for instance if you set the font size to 20px and character spacing to 500, then the distance will be 10px between each character (since 20 * 500 / 1000 = 10px.)

Here’s an example of a TextBlock that uses the character spacing feature to put 10px between each character:

Line Height

This feature allows you to set precisely the height of each line of the content in a text controls. It’s available in all text controls through a property called LineHeight and, unlike CharacterSpacing, it’s measured in pixels.

Line Stacking Strategy

This feature allows you to specify how each line box is determined. For example, if you’re in a scenario like the following where you have some text larger than other text, what will you do? Would you increase the height for each line to accommodate the size for the larger text and allow the text to be readable? Or would you leave the text as it as if there wasn’t any text with different font size? That’s what the stacking strategy is all about.

The stacking strategy is available to your code through a new property called LineStackingStrategy. This property takes one value of three:

MaxHeight (default):
Increases the size of each line’s box enough to hold its content. If LineHeight is set, adds the value of LineHeight to the determined value of the height of line’s box.

BlockLineHeight:
Uses value from LineHeight if specified. Otherwise, increases the size for each line’s box to hold its various font sizes content.

BaselineToBaseline:
Uses value from LineHeight if sepified. Otherwise, uses the default line height that doesn’t care about whether the content has larger text or not.

The following figure compares between the three stacking strategies while setting LineHeight and while not setting it.

Makes sense?

Text Overflow

This feature allows for multi-column and free-form text layouts. It’s available for RichTextBoxes only. You set a RichTextBox as the master element, and link it to the new RichTextBoxOverflow to capture extra text that doesn’t fit in the master RichTextBox. You can also continue the chain and link another RichTextBoxOverflow to the previous one to capture extra text that doesn’t fit there and so on. To link an overflow control to another one, you use the new OverflowContentTarget property available in the previous control to bind to the next overflow control.

The following figure shows how you can use overflow controls to create multi-column text:

And the following shows an example of a free-form text where the text wraps around an object in the center:

Multi-Click Support

Silverlight 5 now allows you to capture multi-clicks in controls. It can capture any n-clicks, but most of the time you’ll capture double-clicks and sometimes triple clicks. This feature is available through a property called ClickCount available in MouseButtonEventArgs. While MouseButtonEventArgs is available in ButtonDown and ButtonUp events, ClickCount is only valid on MouseLeftButtonDown and MouseRightButtonDown, it always return 1 from ButtonUp events.

The following code shows how you can capture multiple clicks in a TextBlock, it updates the TextBlock for each click:

Type-Ahead Text Searching

Type-ahead text searching capability in Silverlight 5 allows you to search in a collection control (e.g. ComboBox, ListBox, etc.) using keyboard; you reach the desired item by typing the first letters of its content.

The content that the control searches in must be specified in DisplayMemberPath. For example, in our books scenario to search in book titles you must set DisplayMemberPath to the Title field. This leads up to another problem, if you have set a data template, you cannot set DisplayMemberPath along with it. This problem can be solved by using the new Silverlight 5 XAML feature, implicit data templates, which has been covered earlier in the previous article.

In our books scenario, we have the following ComboBox that has an implicit data template applied:

<ComboBox x:Name="books" />

And we have also the following code that populates the ComboBox and sets the DisplayMemberPath to allow searching using keyboard: