How to: Apply Transforms to Text

 

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

The following example shows text rotated about a specified point in the two-dimensional x-y plane.

Text rotated using a RotateTransform
Example of text rotated 90 degrees

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 FontFamily="Arial Black" FontSize="64" Foreground="Moccasin" Margin ="80, 10, 0, 0">
        Text Transforms
        <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.

Text scaled using a ScaleTransform
Example of scaled text

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

      <!-- Scale the text using a ScaleTransform. -->
      <TextBlock
        Name="textblockScaleMaster" 
        FontSize="32"
        Foreground="SteelBlue"
        Text="Scaled Text"
        Margin="100, 0, 0, 0"
        Grid.Column="0" Grid.Row="0">
      </TextBlock>
      <TextBlock
        FontSize="32"
        FontWeight="Bold" 
        Foreground="SteelBlue"
        Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
        Margin="100, 0, 0, 0"
        Grid.Column="0" Grid.Row="1">
        <TextBlock.RenderTransform>
          <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
        </TextBlock.RenderTransform>
      </TextBlock>
      <TextBlock
        FontSize="32"
        FontWeight="Bold" 
        Foreground="SteelBlue"
        Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
        Margin="100, 0, 0, 0"
        Grid.Column="0" Grid.Row="2">
        <TextBlock.RenderTransform>
          <ScaleTransform ScaleX="1.0" ScaleY="1.5" />
        </TextBlock.RenderTransform>
      </TextBlock>

System_CAPS_ICON_note.jpg Note

Scaling text is not the same as increasing the font size of text. Font sizes are calculated independently of each other in order 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.

Text skewed using a SkewTransform
Example of skewed text

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° and 30° along the x-coordinate.

      <!-- Skew the text using a SkewTransform. -->
      <TextBlock
        Name="textblockSkewMaster" 
        FontSize="32"
        FontWeight="Bold" 
        Foreground="Maroon"
        Text="Skewed Text"
        Margin="125, 0, 0, 0"
        Grid.Column="0" Grid.Row="0">
        <TextBlock.RenderTransform>
          <SkewTransform AngleX="-30" AngleY="0" />
        </TextBlock.RenderTransform>
      </TextBlock>
      <TextBlock
        FontSize="32"
        FontWeight="Bold" 
        Foreground="Maroon"
        Text="{Binding Path=Text, ElementName=textblockSkewMaster}"
        Margin="100, 0, 0, 0"
        Grid.Column="0" Grid.Row="1">
        <TextBlock.RenderTransform>
          <SkewTransform AngleX="30" AngleY="0" />
        </TextBlock.RenderTransform>
      </TextBlock>

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

Text offset using a TranslateTransform
Example of translated text

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.

      <!-- Skew the text using a TranslateTransform. -->
      <TextBlock
        FontSize="32"
        FontWeight="Bold" 
        Foreground="Black"
        Text="{Binding Path=Text, ElementName=textblockTranslateMaster}"
        Margin="100, 0, 0, 0"
        Grid.Column="0" Grid.Row="0">
        <TextBlock.RenderTransform>
          <TranslateTransform X="2" Y="2" />
        </TextBlock.RenderTransform>
      </TextBlock>
      <TextBlock
        Name="textblockTranslateMaster" 
        FontSize="32"
        FontWeight="Bold" 
        Foreground="Coral"
        Text="Translated Text"
        Margin="100, 0, 0, 0"
        Grid.Column="0" Grid.Row="0"/>

System_CAPS_ICON_note.jpg Note

The DropShadowBitmapEffect provides a rich set of features for providing shadow effects. For more information, see Create Text with a Shadow.

Apply Animations to Text

Show: