Jak zastosować przekształcenia do tekstu

Przekształcenia mogą zmieniać wyświetlanie tekstu w aplikacji. W poniższych przykładach użyto różnych typów przekształceń renderowania, aby wpłynąć na wyświetlanie tekstu w kontrolce TextBlock .

Przykład

Poniższy przykład przedstawia tekst obrócony o określony punkt na dwuwymiarowej płaszczyźnie x-y.

Poniższy przykład kodu używa elementu do RotateTransform obracania tekstu. Angle Wartość 90 obraca element 90 stopni zgodnie z ruchem wskazówek zegara.

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

W poniższym przykładzie pokazano drugi wiersz tekstu skalowany o 150% wzdłuż osi x, a trzeci wiersz tekstu skalowany o 150% wzdłuż osi y.

Poniższy przykład kodu używa elementu do ScaleTransform skalowania tekstu z oryginalnego rozmiaru.

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

W poniższym przykładzie pokazano niesymetryczność tekstu wzdłuż osi x.

W poniższym przykładzie kodu użyto elementu , SkewTransform aby wypaczyć tekst. Niesymetryczność, znana również jako ścinanie, jest transformacją, która rozciąga przestrzeń współrzędnych w sposób nieujeżny. W tym przykładzie dwa ciągi tekstowe są niesymetryczne -30° i 30° wzdłuż współrzędnej 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>

W poniższym przykładzie pokazano tekst przetłumaczony lub przeniesiony wzdłuż osi x i y.

Poniższy przykład kodu używa elementu do TranslateTransform przesunięcia tekstu. W tym przykładzie nieznacznie przesunięty kopię tekstu poniżej tekstu podstawowego powoduje efekt cienia.

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

Zobacz też

• Stosowanie animacji do tekstu