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.

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.

<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

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

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.

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.

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.

<!-- 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

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.

<!-- 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.

<!-- 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

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

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

<!-- 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

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.

<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.

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!");
}

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.

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

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.

<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 .

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.

<!-- 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>

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.

<!-- 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"/>