This article is sponsored by
Telerik RadControls for Silverlight. For similarly awesome content check out
Telerik XAMLflix, your step-by-step guide to Telerik Silverlight and WPF controls. Get access to video tutorials, written tutorials, and tons of code!
Tweet
To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.
This article is Part 5 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.
To refresh your memory on what Silverlight is:
Microsoft Silverlight is an application framework for writing Rich Internet Applications. The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.
To recap what we learned in the previous section:
- We discussed the new media features included with Silverlight 5.
- We looked at using Low-Latency Sound with XNA SoundEffect and SoundEffectInstance classes.
- We also learned how to use remote control and media command (keys) support.
In this article, I am going to discuss the new text improvements in Silverlight 5 including: Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions. Please review the Roadmap for the series before going any further.
The Roadmap for this Series
I’ve included the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.
1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.
2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.
3) Graphics –XNA 3D API and Improved Graphics Stack.
4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.
5) Text [This post] - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.
6) Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.
7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.
8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.
9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.
10) Other items - In-Browser HTML, PostScript and Tasks for TPL.
Linked and Multi-Column Text
We will use an example that I’ve demonstrated in the past that many have found helpful. The Linked and Multi-Column Text feature enables the text of a RichTextBlock control to overflow from one into the next. Multiple RichTextBlockOverflows can be chained together to spread text across a layout. Let’s go ahead and take a look at a screenshot of a RichTextBlock with a RichTextBlockOverflow working together.
As you can see from this screenshot, we had a RichTextBlock in the upper left and its content overflowed onto the RichTextBlockOverFlow #1, #2 and #3. You can think of this as something that is similar to a newspaper article. As the browser expands or contracts the content fills the available area.
Let’s check out the code that made it happen:
1: <Grid x:Name="LayoutRoot"
2: Background="White">
3: <Grid.ColumnDefinitions>
4: <ColumnDefinition Width="0.415*" />
5: <ColumnDefinition Width="0.168*" />
6: <ColumnDefinition Width="0.418*" />
7: </Grid.ColumnDefinitions>
8: <Grid.RowDefinitions>
9: <RowDefinition Height="0.373*" />
10: <RowDefinition Height="0.143*" />
11: <RowDefinition Height="0.483*" />
12: </Grid.RowDefinitions>
13: <Rectangle Fill="Blue"
14: Margin="0,1"
15: Stroke="Black"
16: Grid.Row="1"
17: Grid.ColumnSpan="3" />
18: <Rectangle Fill="Blue"
19: Margin="-1,0,1,0"
20: Stroke="Black"
21: Grid.RowSpan="3"
22: Grid.Column="1" />
23: <RichTextBlock x:Name="rtb1"
24: Margin="0,0,5,3"
25: OverflowContentTarget="{Binding ElementName=rtb2}"
26:
27: >
28: <Paragraph>
29: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
30: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
31: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
32: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
33: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
34:
35: </Paragraph>
36: </RichTextBlock>
37: <RichTextBlockOverflow x:Name="rtb2"
38: Grid.Row="2"
39: OverflowContentTarget="{Binding ElementName=rtb3}"
40:
41: />
42: <RichTextBlockOverflow x:Name="rtb3"
43: Grid.Column="2"
44: OverflowContentTarget="{Binding ElementName=rtb4}"
45: />
46:
47: <RichTextBlockOverflow x:Name="rtb4"
48: Grid.Column="2"
49: Grid.Row="2"
50: />
51:
52:
53: </Grid>
The key thing to remember here is that a RichTextBlock contains OverflowContentTarget which will allow you to bind to a special control called RichTextBlockOverflow.
NOTE: Post-beta, Microsoft changed this to use the non-editable RichTextBlock instead of RichTextBox. So a word of warning, many post-beta demos of this functionality on the web will no longer work. Good thing you are reading this guide, right? =)
Character Spacing
The TextBox and TextBlock controls provides a way to control the spacing of letters inside the text very easily. Let’s go ahead and take a look at a screenshot of the various character spacing inside of a TextBlock.
Let’s look at the code:
1: <Grid x:Name="LayoutRoot" >
2: <StackPanel>
3: <TextBlock CharacterSpacing="1000" FontSize="14"
4: Text="The quick brown fox jumps over the lazy dog" />
5: <TextBlock CharacterSpacing="500" FontSize="14"
6: Text="The quick brown fox jumps over the lazy dog" />
7: <TextBlock CharacterSpacing="250" FontSize="14"
8: Text="The quick brown fox jumps over the lazy dog" />
9: <TextBlock CharacterSpacing="100" FontSize="14"
10: Text="The quick brown fox jumps over the lazy dog" />
11: <TextBlock CharacterSpacing="-100" FontSize="14"
12: Text="The quick brown fox jumps over the lazy dog" />
13: </StackPanel>
14: </Grid>
As you can see, we just set the CharacterSpacing property of the TextBlock control. Please note that you may use a negative number to “squish” text together.
Open-Type Font
Silverlight 5 provides many new options for the Typography class inside of a TextBlock. They have so many improvements that the best way to see everything is to explore the class. Let’s look at two new features:
- ContextualAlternates - Gets or sets a value that determines whether custom glyph forms can be used based upon the context of the text being rendered.
- StylisticSets - Gets or sets a value that indicates whether a stylistic set of a font form is enabled. (20 StylisticSets are available)
Let’s look at a sample that uses ContextualAlternates and StylisticSets.
The code looks like the following:
1: <TextBlock FontSize="80"
2: FontFamily="Gabriola"
3: Text="Michael Crump"
4: Typography.ContextualAlternates="True"
5: Typography.StylisticSet5="True" />
Pixel Snapped Text and TextOptions
Silverlight 5 provides many new options for the TextOptions property inside of a TextBlock.
- TextFormattingMode – Gets the TextFormattingMode for the element
- TextHintingMode – Gets or sets a value that indicates whether text rendering is optimized for readability or animation.
- TextRenderingMode - Sets the TextRenderingMode for the element. 4 options are available: Aliased, Auto, ClearType and Grayscale.
Let’s look at a sample that uses all of them together (Display, Fixed and Aliased). It may be hard to see in this demo, so try this one in your own application.
The code looks like the following:
1: <TextBlock FontSize="30" Text="The quick brown fox jumps over the lazy dog"
2: TextOptions.TextFormattingMode="Display"
3: TextOptions.TextHintingMode="Fixed"
4: TextOptions.TextRenderingMode="Aliased" />
Conclusion
At this point, we have seen how you would use Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions in your Silverlight 5 Applications. We have also discussed a few other features in Silverlight 5. In the next part of the series, I am going to take a look at the new operating system integrations including : P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust. Again, thanks for reading and please come back for the next part.
To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.