Cómo: Aplicar transformaciones a texto
Actualización: noviembre 2007
Las transformaciones pueden modificar la presentación del texto en la aplicación. Los ejemplos siguientes utilizan diferentes tipos de representación de las transformaciones que afectan a la presentación del texto en un control TextBlock.
Ejemplo
En el ejemplo siguiente se muestra texto girado alrededor de un punto específico del plano bidimensional x-y.
Ejemplo de texto girado 90 grados
.jpg "Texto girado usando RotateTransform")
En el ejemplo de código siguiente se utiliza un objeto RotateTransform para girar texto. Un valor Angle de 90 gira el elemento 90 grados en el sentido de las agujas del reloj.
<!-- 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>
En el ejemplo siguiente se muestra la segunda línea de texto ajustada a una escala del 150% a lo largo del eje X y la tercera línea de texto ajustada a una escala del 150% a lo largo del eje Y.
Ejemplo de texto escalado
.jpg "Texto con escala ajustada usando ScaleTransform")
En el ejemplo de código siguiente se utiliza ScaleTransform para escalar el texto desde su tamaño 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>
Nota
Escalar texto no es lo mismo que aumentar el tamaño de la fuente de texto. Los tamaños de fuente se calculan de forma independiente para proporciona la mejor resolución en diferentes tamaños. El texto escalado, por otro lado, conserva las proporciones del texto de tamaño original.
En el ejemplo siguiente se muestra el texto sesgado a lo largo del eje X.
Ejemplo de texto sesgado
.jpg "Texto sesgado usando SkewTransform")
En el ejemplo de código siguiente se utiliza un objeto SkewTransform para sesgar el texto. Un sesgo, también conocido como distorsión, es una transformación que expande el espacio de coordenadas de una manera no uniforme. En este ejemplo, las dos cadenas de texto están sesgadas -30° y 30° a lo largo de la 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>
En el ejemplo siguiente se muestra texto trasladado o movido, a lo largo del eje x y del eje y.
Ejemplo de texto trasladado
.jpg "Texto desplazado usando TranslateTransform")
En el ejemplo de código siguiente se utiliza un objeto TranslateTransform para desplazar texto. En este ejemplo, una copia del texto primario ligeramente desplazada crea un efecto 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"/>
Nota
El objeto DropShadowBitmapEffect proporciona un rico conjunto de características para ofrecer efectos de sombra. Para obtener más información, vea Cómo: Crear texto con sombreado.