Gewusst wie: Anwenden von Transformationen auf Text

Aktualisiert: November 2007

Transformationen können die Darstellung von Text in der Anwendung ändern. In den folgenden Beispielen wird mit verschiedenen Arten von Renderingtransformationen die Darstellung von Text in einem TextBlock-Steuerelement beeinflusst.

Beispiel

Im folgenden Beispiel wird Text gezeigt, der um einen bestimmten Punkt in der zweidimensionalen x-y-Ebene gedreht ist.

Beispiel für einen um 90 Grad gedrehten Text

Im folgenden Codebeispiel wird Text mithilfe von RotateTransform gedreht. Durch einen Angle-Wert von 90 wird das Element um 90 Grad im Uhrzeigersinn gedreht.

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

Im folgenden Beispiel wird die zweite Textzeile entlang der x-Achse und die dritte Textzeile entlang der y-Achse um je 150 % skaliert.

Beispiel für skalierten Text

Im folgenden Codebeispiel wird mithilfe von ScaleTransform Text ausgehend von seiner ursprünglichen Größe skaliert.

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

Tipp

Das Skalieren von Text ist etwas anderes als das Vergrößern des Schriftgrads von Text. Schriftgrade werden unabhängig voneinander berechnet, um bei unterschiedlichen Größen die beste Auflösung zu ermöglichen. Skalierter Text hingegen behält die Proportionen der ursprünglichen Größe des Texts bei.

Im folgenden Beispiel wird ein entlang der x-Achse verzerrter Text dargestellt.

Beispiel für verzerrten Text

Im folgenden Codebeispiel wird Text mithilfe von SkewTransform verzerrt. Eine Verzerrung (auch als Scherung bekannt), ist eine Transformation, die den Koordinatenraum auf ungleichmäßige Art ausdehnt. In diesem Beispiel werden die zwei Textzeichenfolgen um -30° und 30° entlang der x-Koordinate verzerrt.

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

Im folgenden Beispiel wird Text dargestellt, der entlang der x- und y-Achse übersetzt bzw. verschoben ist.

Beispiel für übersetzten Text

Im folgenden Codebeispiel wird Text mithilfe von TranslateTransform versetzt. In diesem Beispiel wird ein Schatteneffekt erzielt, indem die Kopie des Textes hinter dem primären Text geringfügig versetzt wird.

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

Tipp

Der DropShadowBitmapEffect verfügt über einen umfangreichen Satz an Features zum Bereitstellen von Schatteneffekten. Weitere Informationen finden Sie unter Gewusst wie: Erstellen von Text mit einem Schatten.

Siehe auch

Aufgaben

Gewusst wie: Anwenden von Animationen auf Text