Windows Phone

Programming Windows Phone 7 : TextBlock Properties and Inlines

2/21/2011 5:54:33 PM
Although I’ve been talking about the TextBlock since the early pages of this book, it’s time to look at it in just a little bit more detail. The TextBlock element has five font-related properties: FontFamily, FontSize, FontStretch, FontStyle, and FontWeight.

You can set FontStyle to either Normal or Italic. In theory, you can set FontStretch to values such as Condensed and Expanded but I’ve never seen these work in Silverlight. Generally you’ll set FontWeight to Normal or Bold, although there are other options like Black, SemiBold, and Light.

TextBlock also has a TextDecorations property. Although this property seems to be very generalized, in Silverlight there is only one option:


The TextBlock property I’ve used most, of course, is Text itself. The string you set to the Text property can include embedded Unicode characters in the standard XML format, for example:

Text="π is approximately 3.14159"

If the Text property is set to a very long string, you might not be able to see all of it. You can insert the codes for carriage return or line feed characters (
) or you can set


and TextAlignment to Left, Right, or Center (but not Justify). You can also set the text as a content of the TextBlock element:

This is some text.

However, you might be surprised to learn that the ContentProperty attribute of TextBlock is not the Text property but an entirely different property named Inlines. This Inlines property is of type InlineCollection—a collection of objects of type Inline, namely LineBreak and Run. These make TextBlock much more versatile. The use of LineBreak is simple:

This is some text<LineBreak />This is some more text.

Run is interesting because it too has FontFamily, FontSize, FontStretch, FontStyle, FontWeight, Foreground, and TextDecorations properties, so you can make your text very fancy:

<TextBlock FontSize="36"
This is
some <Run FontWeight="Bold">bold</Run> text and
some <Run FontStyle="Italic">italic</Run> text and
some <Run Foreground="Red">red</Run> text and
some <Run TextDecorations="Underline">underlined</Run> text
and some <Run FontWeight="Bold"
TextDecorations="Underline">big</Run> text.

In the Visual Studio design view, you might see the text within the Run tags not properly separated from the text outside the Run tags. This is an error. When you actually run the program in the emulator, it looks fine:

These are vector-based TrueType fonts, and the actual vectors are scaled to the desired font size before the font characters are rasterized, so regardless how big the characters get, they still seem smooth.

Although you might think of a TextBlock as sufficient for a paragraph of text, it doesn’t provide all the features that a proper Paragraph class provides, such as first-line text indenting or a hanging first line where the rest of the paragraph is indented.

The use of the Inlines property allows us to write a program that explores the FontFamily property. In XAML you can set FontFamily to a string. (In code you need to create an instance of the FontFamily class.) The default is called “Portable User Interface”. On the phone emulator, this default font maps seems to map to Segoe WP—a Windows Phone variant of the Segoe font that is a frequently found in Microsoft products and printed material, including this very book.

The FontFamilies program lists all the FontFamily values that Visual Studio’s Intellisense tells us are valid:

Example 1. Silverlight Project: FontFamilies File: MainPage.xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock FontSize="24">
<Run FontFamily="Arial">Arial</Run><LineBreak />
<Run FontFamily="Arial Black">Arial Black</Run><LineBreak />
<Run FontFamily="Calibri">Calibri</Run><LineBreak />
<Run FontFamily="Comic Sans MS">Comic Sans MS</Run><LineBreak />
<Run FontFamily="Courier New">Courier New</Run><LineBreak />
<Run FontFamily="Georgia">Georgia</Run><LineBreak />
<Run FontFamily="Lucida Sans Unicode">Lucida Sans Unicode</Run><LineBreak />
<Run FontFamily="Portable User Interface">Portable User Interface</
Run><LineBreak />
<Run FontFamily="Segoe WP">Segoe WP</Run><LineBreak />
<Run FontFamily="Segoe WP Black">Segoe WP Black</Run><LineBreak />
<Run FontFamily="Segoe WP Bold">Segoe WP Bold</Run><LineBreak />
<Run FontFamily="Segoe WP Light">Segoe WP Light</Run><LineBreak />
<Run FontFamily="Segoe WP Semibold">Segoe WP Semibold</Run><LineBreak />
<Run FontFamily="Segoe WP SemiLight">Segoe WP SemiLight</Run><LineBreak />
<Run FontFamily="Tahoma">Tahoma</Run><LineBreak />
<Run FontFamily="Times New Roman">Times New Roman</Run><LineBreak />
<Run FontFamily="Trebuchet MS">Trebuchet MS</Run><LineBreak />
<Run FontFamily="Verdana">Verdana</Run><LineBreak />
<Run FontFamily="Webdings">Webdings</Run> (Webdings)

Here’s the result:

If you misspell a name that you assign to FontFamily, nothing bad will happen; you’ll just get the default.

The predefined resources include four keys that return objects of type FontFamily: PhoneFontFamilyNormal, PhoneFontFamilyLight, PhoneFontFamilySemiLight, and PhoneFontFamilySemiBold. These return the corresponding Segoe WP fonts.

Other -----------------
- Programming Windows Phone 7 : The Phone’s Photo Library
- Programming Windows Phone 7 : Capturing from the Camera
- Windows Phone 7 : Loading Local Bitmaps from Code
- Windows Phone 7 : Image and ImageSource
- Windows Phone 7 : Images Via the Web
- Windows Phone 7 : Customizing Your E-Mail Signature
- Windows Phone 7 : Managing Mail Folders
- Windows Phone 7: The Silverlight Image Element
- Windows Phone 7: XNA Texture Drawing
- Windows Phone 7: An Introduction to Touch - Routed Events
- Windows Phone 7 : Working with Attachments
- Programming Windows Phone 7: An Introduction to Touch - The Manipulation Events
- Programming Windows Phone 7: An Introduction to Touch - Low-Level Touch Events in Silverlight
- Windows Phone 7: Composing a New Message
- Programming Windows Phone 7: An Introduction to Touch - The XNA Gesture Interface
- Programming Windows Phone 7: An Introduction to Touch - Low-Level Touch Handling in XNA
- Windows Phone 7: Responding to a Message
- Windows Phone 7: Checking for New Messages
- Windows Phone 7: Sorting and Searching Your Mail
- Windows Phone 7: Customizing Your Contacts List
Most View
- Microsoft SQL Server 2008 R2 : Setting Up Replication (part 1) - Creating a Distributor and Enabling Publishing
- Developing for Windows Phone and Xbox Live : Sprites and 2D Graphics - Spritebatch (part 1)
- Exchange Server 2010 : Designing Upgrade and Coexistence Strategies
- SQL Server 2008 Scheduling and Notification : Scripting Jobs and Alerts, Multiserver Job Management & Event Forwarding
- Exchange Server 2010 : Designing and Implementing Message Classifications (part 1)
- Windows 7 : Connecting to a Remote Desktop via the Internet
- Windows Phone 7 Game Development : The World of 3D Graphics - Rendering 3D Objects
- Changes to Privacy Risk Management and Compliance in Relation to Cloud Computing
- Windows 7 : Sending Faxes from Windows Fax and Scan
- SharePoint 2010 : Implementing and Configuring Information Management Policies (part 2) - Generating Information Management Policy Usage Reports
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS