Vorgehensweise: Anwenden von Transformationen auf Text

Transformationen können die Anzeige von Text in Ihrer Anwendung ändern. Die folgenden Beispiele verwenden verschiedene Arten von Renderingtransformationen, um die Anzeige von Text in einem TextBlock-Steuerelement zu beeinflussen.

Beispiel

Das folgende Beispiel zeigt Text, der um einen angegebenen Punkt in der zweidimensionalen X-Y-Ebene gedreht wurde.

gedreht wurde

Das folgende Codebeispiel verwendet RotateTransform, um den Text zu drehen. Ein Angle-Wert von 90 dreht das Element um 90 Grad im Uhrzeigersinn.

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

Das folgende Beispiel zeigt die zweite Textzeile, die um 150% entlang der X-Achse skaliert wurde, und die dritte Textzeile, die auf der Y-Achse um 150% skaliert wurde.

Im folgenden Codebeispiel wird ScaleTransform verwendet, um den Text von seiner Originalgröße aus zu skalieren.

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

Hinweis

Das Skalieren von Text ist nicht dasselbe wie die Vergrößerung der Schriftgröße von Text. Schriftgrade werden unabhängig voneinander berechnet, um die beste Auflösung in unterschiedlichen Größen bereitzustellen. Skalierter Text behält dagegen die Proportionen der Größe des ursprünglichen Texts bei.

Das folgende Beispiel zeigt Text, der entlang der X-Achse geneigt ist.

Das folgende Codebeispiel verwendet SkewTransform, um den Text zu neigen. Eine Neigung, auch Scherung genannt, ist eine Transformation, die den Koordinatenraum auf ungleichmäßige Art ausdehnt. In diesem Beispiel werden die zwei Textzeichenfolgen um –30 Grad und 30 Grad entlang der X-Koordinate geneigt.

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

Das folgende Beispiel zeigt Text, der entlang der X- und Y-Achse übersetzt oder verschoben wird.

Das folgende Codebeispiel verwendet TranslateTransform, um den Text zu versetzen. In diesem Beispiel erstellt eine geringfügig versetzte Kopie des Textes hinter dem primären Text einen Schatteneffekt.

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

Hinweis

DropShadowBitmapEffect stellt eine Vielzahl von Features zur Erzeugung von Schatteneffekten bereit. Weitere Informationen finden Sie unter Erstellen von Text mit einem Schatten.

Siehe auch

• Animationen auf Text anwenden