text

The TextBlock element enables you to add text to your Silverlight content. This document describes how to use the TextBlock element.

This document contains the following sections.

the TextBlock element

To add text to your Silverlight control, create a TextBlock element and add your text content between the <TextBlock> tags. The following example uses a TextBlock to display some text.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <TextBlock>hello world!</TextBlock>
</Canvas>

common TextBlock properties

In addition to the properties it gets for being a UIElement, such as Clip and Opacity, the TextBlock element provides several more properties, including the following:

  • FontSize: The font size, in pixels.
  • FontStyle: The font style. Choices are Normal, Italic, and Oblique.
  • FontWeight: The font weight. Choices are Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack.
  • FontFamily: The font typeface family name.
  • Foreground: The Brush that paints the text inside the TextBlock. You can use a solid color, gradient, or an image. For more information, see drawing with shapes and painting with brushes.

The following example demonstrates these properties.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <TextBlock FontSize="40"
      FontFamily="Georgia"
      FontStyle="Italic" FontWeight="Bold"
      Canvas.Top="20" Canvas.Left="20">
      
      Hello world!
      
      <TextBlock.Foreground>
        <LinearGradientBrush>
          <GradientStop Color="SlateBlue" Offset="0.0" />
          <GradientStop Color="Black" Offset="1.0" />
        </LinearGradientBrush>
      </TextBlock.Foreground>
  </TextBlock>
</Canvas>

the Run element

You can mix different fonts in the same TextBlock using the Run element. Run has the same font properties as TextBlock, although it cannot be positioned using the Canvas.Left and Canvas.Top properties. The following example uses a Run element to change the size of some, but not all, of the text in a TextBlock.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <TextBlock>
    Hello <Run FontSize="30">world</Run>
  </TextBlock>
</Canvas>

specifying multiple fonts

Not every font is available on every machine.  The FontFamily property supports listing multiple fonts when the first font isn't available.  The font "Portable User Interface" is always available on every machine. The following example demonstrates different FontFamily settings.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <TextBlock FontFamily="Arial, Times New Roman"
      Text="Hello World" FontSize="20"/>
  <TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40"
      Text="Hello World" FontSize="20"/>
  <TextBlock FontFamily="Portable User Interface" Canvas.Top="80"
      Text="Hello World" FontSize="20"/>
</Canvas>

 

what's next

The next topic, media, describes how to add audio and video to your Silverlight content.