Como: Aplicar transformações sobre texto

As transformações podem alterar a exibição do texto em seu aplicativo. Os exemplos a seguir usam diferentes tipos de transformações de renderização para afetar a exibição do texto em um controle TextBlock.

Exemplo

O exemplo a seguir mostra o texto girado sobre um ponto especificado no plano x-y bidimensional.

Exemplo de texto girado 90 graus

O exemplo de código a seguir usa uma RotateTransform para girar o texto. Um valor Angle igual a 90 gira o elemento 90 graus no sentido horário.

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

O exemplo a seguir mostra a segunda linha de texto redimensionada em 150% no eixo X, e a terceira linha de texto redimensionada em 150% no eixo Y.

Exemplo de texto em escala

O exemplo de código a seguir usa uma ScaleTransform para aplicar uma escala sobre o texto a partir de seu tamanho original.

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

Observação:
Aplicar uma escala sobre o texto é diferente de aumentar a tamanho de sua fonte. Tamanhos de fonte são calculados independentemente uns dos outros para fornecer a melhor resolução em tamanhos diferentes. Texto com escala, por outro lado, preserva as proporções do texto em seu tamanho original.

O exemplo a seguir mostra o texto enviezado no eixo X.

Exemplo de texto inclinado

O exemplo de código a seguir usa uma SkewTransform para inclinar o texto. Uma inclinação, que também é conhecida como um cisalhamento, é uma transformação que estica o espaço de coordenadas de maneira não uniforme. Nesse exemplo, as duas strings são inclinadas -30° e 30° a longo da coordenada x.

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

O exemplo a seguir mostra o texto transladado, ou movido, ao longo de x e y.

Exemplo de texto transladado

O exemplo de código a seguir utiliza um TranslateTransform para deslocar texto. Neste exemplo, uma cópia ligeiramente deslocada de texto abaixo do texto primário cria um efeito de sombra.

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

Observação:
O DropShadowBitmapEffect Fornece um conjunto rico de recursos para fornecer efeitos de sombra. Para obter mais informações, consulte Como: Create Text with a Shadow.

Consulte também

Tarefas

Como: Apply Animations to Text