Printer Friendly Version      Send     
Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
Silverlight
 Text and Fonts
Silverlight 2
Text and Fonts (Silverlight 2)
[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

Microsoft Silverlight provides several elements for rendering text, along with a set of properties for creating a variety of formatted text.

This topic contains the following sections.

The TextBlock object is the primary element for displaying text in Silverlight-based applications. The following XAML example shows how to define a TextBlock element and set its Text property to a character string.

XAML
<Canvas>
  <TextBlock Text="Hello, world!" />
</Canvas>

The following illustration displays the result of the previous XAML content example.

TextBlock rendering with default font properties

There are several interesting items to note about the rendered text:

  • The default value of the FontSize property of the rendered TextBlock is 14.666 pixels, which is exactly 11 points.

  • The default value of the FontFamily property of the rendered TextBlock is "Portable User Interface". This value represents a composite font that uses several fonts to implement the range of international languages supported by Silverlight. This includes "Lucida Sans Unicode" and "Lucida Grande" for many Western writing systems, and many more for East Asian writing systems.

  • No font files are required on the hosting Web server, or residing in the same directory as the XAML content, to enable the default font.

When setting text in a TextBlock, it is not necessary to specify the Text property explicitly in XAML. The following XAML example shows how to specify text that is enclosed in a TextBlock element.

XAML
<Canvas>
  <TextBlock>Hello, world!</TextBlock>
</Canvas>
Note:

Leading or trailing white space is not preserved when setting the Text property.

Specifying Font Attributes

When using text elements, such as a TextBlock, you can specify various font attributes. The following table lists the font attributes that you can specify for text elements.

Property

Description

Default Value

FontFamily

Specifies the desired font family, such as "Times New Roman".

The default value is "Portable User Interface", which is described in the "Text Elements" section earlier in this topic.

FontSize

Specifies the desired font size in pixels. The values must be non-negative.

The default value is 14.666 pixels, which is exactly 11 points.

FontStretch

Specifies the desired glyph width of the font. This property can only be used to specify fonts that already exist in a font family. It does not cause programmatic stretching of glyphs.

The default value is Normal.

FontStyle

Specifies whether the desired font style is normal or italic.

The default value is Normal.

FontWeight

Specifies the desired glyph weight of the font. This property can only be used to specify fonts that already exist in a font family. It does not programmatically create alternative weights, except when a family contains a normal weight font, but not a bold weight font. In this case, Silverlight will simulate a bold weight font by increasing the width of strokes using a 2D graphic algorithm.

The default value is Normal.

The following XAML example shows how to define a TextBlock element and specify all of the font attributes listed in the previous table.

Note:

Depending on the font that Silverlight selects, the specified font attributes may not be the ones that are used during rendering. For more information, see the "Font Selection" section later in this topic.

XAML
<TextBlock
  Text="Font Attributes"
  FontFamily="Verdana"
  FontSize="36"
  FontStretch="UltraExpanded"
  FontStyle="Italic"
  FontWeight="ExtraBlack" />

The following illustration displays the result of the previous XAML content example.

TextBlock rendering with defined font property values

Supported Local Fonts

Text elements in Silverlight can use a subset of the fonts on the client computer. The following illustration shows the Latin fonts that Silverlight text elements can use from the local computer.

Supported local Latin fonts for text elements

Additionally, text elements can use the Arial Unicode MS and Cambria Math fonts from the local computer. Lucida Grande and Lucida Sans Unicode are aliases for the same font and are specified as a pair for compatibility reasons. Portable User Interface is a composite font, described earlier in the "Text Elements" section.

If you want to work with East Asian text, Silverlight text elements can use the following East Asian fonts from the local computer.

Batang

BatangChe

DFKai-SB

Dotum

DutumChe

FangSong

GulimChe

Gungsuh

GungsuhChe

KaiTi

Malgun Gothic

Meiryo

Microsoft JhengHei

Microsoft YaHei

MingLiU

MingLiu_HKSCS

MingLiu_HKSCS-ExtB

MingLiu-ExtB

MS Gothic

MS Mincho

MS PGothic

MS PMincho

MS UI Gothic

NSimSun

NSimSun-18030

PMingLiU

PMingLiu-ExtB

SimHei

SimSun

SimSun-18030

SimSun-ExtB

Downloading Fonts

Silverlight does not include any fonts in its installation package. If you want to use a font for a TextBlock or TextBox element that is not on the list of supported local fonts, you can specify the font in XAML by using the FontFamily property, or in code using the FontSource property. The FontFamily property can specify a single font file or a zip of font files, but they must be included in the .xap file. When using FontSource,your code must load the font (or zip of fonts) from a stream such as isolated storage.

Font Selection

The font that you specify, may not necessarily be the font that Silverlight uses. For the TextBlock element, Silverlight chooses the font from the supported local fonts, from the fonts provided in a packaged file referenced in the FontFamily property, or from the file passed to the FontSource property. The font that is selected is the best match based on the values of the FontFamily, FontStretch, FontStyle, and FontWeight properties. It is important to specify all four of these font properties to make sure that an accurate and consistent font selection is made for your TextBlock. The TextBox and Run objects contain similar properties that control their font selection.

Using the Run and LineBreak Objects

The Run object is a text element that represents a discrete section of formatted or unformatted text. The LineBreak object represents an explicit new line in a TextBlock. The following XAML example shows how to define several differently formatted text strings in a TextBlock by using Run objects.

XAML
<!-- Display formatted text as Run objects within a TextBlock. -->
<Canvas>
<TextBlock
  FontFamily="Arial" Width="400" Text="Sample text formatting runs">
  <LineBreak/>
  <Run Foreground="Maroon" FontFamily="Courier New" FontSize="24">Courier New 24</Run>
  <LineBreak/>
  <Run Foreground="Teal" FontFamily="Times New Roman" FontSize="18" FontStyle="Italic">Times New Roman Italic 18</Run>
  <LineBreak/>
  <Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="14" FontWeight="Bold">Verdana Bold 14</Run>
</TextBlock>
</Canvas>

The following illustration shows the rendered formatted text from the previous XAML content example.

TextBlock rendering multiple Run objects

Notice that the LineBreak object forces the text in each Run to display on a separate line. Without the LineBreak object, the text in each Run would flow together as one line and would eventually be truncated after exceeding the TextBlock object's Width value. The following illustration shows how the formatted text would render without using LineBreak objects.

TextBlock rendering multiple Run objects without LineBreak objects

In addition to selecting font attributes for text elements, you can format text by using text-specific properties such as Foreground, TextWrapping, and TextDecorations.

Using the Foreground Property

The Foreground property enables you to specify a Brush for the rendered text. A Brush can represent a solid color, a linear or radial gradient, or an image. The following XAML example shows how to set the Foreground property to a solid color and a linear gradient. Notice that the Foreground property can also be used in a Run object to display a different color than the TextBlock object's Foreground property value.

XAML
<!-- TextBlock with a single brush applied to the text. -->
<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold"
  Foreground="Maroon">
  Maroon
</TextBlock>

<!-- TextBlock with three brushes applied to the text. -->
<TextBlock
  Canvas.Top="60"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold"
  Foreground="Navy">
  Navy
  <Run Text="DodgerBlue " Foreground="DodgerBlue"/>
  <Run Text="LightSteelBlue " Foreground="LightSteelBlue"/>
</TextBlock>

<!-- TextBlock with a linear gradient brush applied to the text. -->
<TextBlock
  Canvas.Top="100"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold">
  LINEAR GRADIENT BRUSH
  <TextBlock.Foreground>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Red" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.2" />
      <GradientStop Color="Yellow" Offset="0.4" />
      <GradientStop Color="Green" Offset="0.6" />
      <GradientStop Color="Blue" Offset="0.8" />
      <GradientStop Color="Violet" Offset="1.0" />
    </LinearGradientBrush>
  </TextBlock.Foreground>
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleY="3.0" />
  </TextBlock.RenderTransform>
</TextBlock>

The following illustration shows the rendered text from the previous XAML example. Notice the effect of applying a ScaleTransform to the last line of rendered text. For more information about applying a RenderTransform to a TextBlock, see the Applying Transforms to Text section in this topic.

TextBlocks rendering solid color and linear gradient brushes

The Foreground property of the TextBlock can also specify an ImageBrush. The following XAML example shows how to set the Foreground property of an ImageBrush whose image is used as the fill for the TextBlock object's rendered text.

XAML
<!-- TextBlock with an image brush applied to the text. -->
<TextBlock
  Canvas.Top="120"
  FontFamily="Verdana"
  FontSize="72"
  FontStyle="Italic"
  FontWeight="Bold">
  SHRUBBERY
  <TextBlock.Foreground>
    <ImageBrush ImageSource="forest.jpg"/>
  </TextBlock.Foreground>
</TextBlock>

The following illustration shows the rendered text from the previous XAML example.

TextBlock rendering an image brush

Wrapping Text

The TextWrapping property indicates how text should wrap in a TextBlock. The TextWrapping enumeration defines the values listed in the following table.

Value

Description

NoWrap

No line wrapping is performed.

Wrap

Line breaking occurs if the line overflows beyond the available block width, even if the standard line-breaking algorithm cannot determine any line-break opportunity, as in the case of a very long word that is constrained in a fixed-width container with no scrolling allowed.

The following XAML example shows how to set the TextWrapping property to NoWrap and Wrap.

XAML
<!-- TextBlock with no text wrapping -->
<TextBlock
  Text="The quick red fox jumped over the lazy brown dog."
  Width="200"
  TextWrapping="NoWrap" />

<!-- TextBlock with text wrapping -->
<TextBlock
  Text="The quick red fox jumped over the lazy brown dog."
  Width="200"
  TextWrapping="Wrap" />

The following illustration shows the rendered text from the previous XAML example.

TextBlock rendering non-wrapped and wrapped text

ActualHeight and ActualWidth are read-only properties that indicate the rendered height and width of the TextBlock. These properties can be different from the Height and Width properties of the TextBlock. Setting the TextWrapping property affects the ActualHeight and ActualWidth values of the TextBlock. The following illustration shows how the TextWrapping property affects ActualHeight and ActualWidth.

How TextWrapping affects ActualWidth and ActualHeight

Using Text Decorations

By using the TextDecorations property, you can create the visual appearance of a hyperlink in a Run or TextBlock object.

Simulating a hyperlink by using the TextDecorations property

The following XAML example shows how to define a TextBlock that simulates a hyperlink by displaying an underline in response to the MouseEnter event. The underline is removed in response to the MouseLeave event. Notice that the Cursor property is set to display the Hand cursor when the mouse pointer is over the TextBlock.

XAML
<TextBlock
  Text="Click to Win!"
  TextDecorations="None"
  Cursor="Hand"
  FontSize="14" FontWeight="Bold"
  MouseEnter="onMouseEnter"
  MouseLeave="onMouseLeave"
  MouseLeftButtonUp="onMouseLeftButtonUp" />

The following JavaScript example shows the corresponding event-handling functions for the TextBlock defined in the previous XAML example.

JScript
function onMouseEnter(sender, mouseEventArgs)
{
    sender.textDecorations = "Underline";
    sender.foreground="Maroon";
}

function onMouseLeave(sender, mouseEventArgs)
{
    sender.textDecorations = "None";
    sender.foreground="Black";
}

function onMouseLeftButtonUp(sender, mouseEventArgs)
{
    alert("Congratulations!");
}

Transforms can alter the display of text in your application. The following examples use different types of rendering transforms to affect the display of text in a TextBlock.

Using a RotateTransform

The following illustration shows text that is rotated 90 degrees by using a RotateTransform.

TextBlock that uses a RotateTransform

The following code example uses a RotateTransform to rotate text. An Angle value of 90 rotates the element 90 degrees clockwise.

XAML
<!-- Rotate the text 90 degrees using a RotateTransform. -->
<TextBlock Text="Rotated Text" FontSize="32" Foreground="Teal">
  <TextBlock.RenderTransform>
    <RotateTransform Angle="90" />
  </TextBlock.RenderTransform>
</TextBlock>

Using a ScaleTransform

The following example shows the second line of text scaled by 150% along the x-axis, and the third line of text scaled by 150% along the y-axis.

TextBlock that uses a ScaleTransform

The following XAML example uses a ScaleTransform to scale text from its original size.

XAML
<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="Scaled Text" />

<!-- Scale the text width using a ScaleTransform. -->
<TextBlock
  Canvas.Top="40"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="Scaled Text">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
  </TextBlock.RenderTransform>
</TextBlock>

<!-- Scale the text height using a ScaleTransform. -->
<TextBlock
  Canvas.Top="80"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="Scaled Text">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.0" ScaleY="1.5" />
  </TextBlock.RenderTransform>
</TextBlock>
Note:

Scaling text is not the same as increasing the font size of text. Font siz es are calculated independently to provide the best resolution at different sizes. Scaled text, on the other hand, preserves the proportions of the original sized text .

Using a SkewTransform

The following example shows text skewed along the x-axis.

TextBlock that uses a SkewTransform

The following code example uses a SkewTransform to skew text. A skew, also known as a shear, is a transformation that stretches the coordinate space in a non-uniform manner. In this example, the two text strings are skewed -30 degrees and 30 degrees along the x-coordinate.

XAML
<!-- Skew the text using a SkewTransform. -->
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="-30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
  Canvas.Top="60"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>

Using a TranslateTransform

The following example shows text translated, or moved, along the x- and y-axis.

TextBlock that uses a TranslateTransform

The following code example uses a TranslateTransform to offset text. In this example, a slightly offset copy of text below the primary text creates a shadow effect.

XAML
<!-- Offset the text using a TranslateTransform. -->
<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Black"
  Text="Translated Text">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Coral"
  Text="Translated Text"/>

The value of many text properties can be animated including the text size, position, and color (see Animation Overview (Silverlight 2) for more information).

Note:

Performance Tip: Animating the size of text can potentially use a lot of system resources. This is because when Silverlight renders text, it uses hinting to smooth each text glyph. If you animate the text size (by using a Transform or FontSize), Silverlight will hint the glyphs for each frame, which is costly and could cause frame dropping. If your application requires dynamic scale changes of large text, it may be better to use vector graphics to represent the text.

Silverlight version 2 has a TextBox control, and many of the properties available to TextBlock and Run are also available to TextBox.

© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker