Condividi tramite

Procedura: Applicare trasformazioni al testo

Le trasformazioni possono modificare la visualizzazione del testo nell'applicazione. Negli esempi seguenti vengono usati diversi tipi di trasformazioni di rendering per influire sulla visualizzazione del testo in un controllo TextBlock.

Esempio

L'esempio seguente mostra il testo ruotato su un punto specificato nel piano x-y bidimensionale.

Testo ruotato usando un RotateTransform

Nell'esempio di codice seguente viene usato un RotateTransform per ruotare il testo. Un valore Angle di 90 ruota l'elemento in senso orario di 90 gradi.

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

Nell'esempio seguente viene illustrata la seconda riga di testo ridimensionata di 150% lungo l'asse x e la terza riga di testo ridimensionata di 150% lungo l'asse y.

testo ridimensionato usando un *ScaleTransform*

Nell'esempio di codice seguente viene usato un ScaleTransform per ridimensionare il testo dalle dimensioni originali.

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

Annotazioni

Il ridimensionamento del testo non equivale ad aumentare le dimensioni del carattere del testo. Le dimensioni dei caratteri vengono calcolate indipendentemente l'una dall'altra per garantire la migliore risoluzione a dimensioni diverse. Il testo ridimensionato, invece, mantiene le proporzioni del testo originale.

L'esempio seguente mostra un testo inclinato lungo l'asse x.

testo inclinato usando uno SkewTransform

Nell'esempio di codice seguente viene utilizzata una SkewTransform per distorcere il testo. Un'asimmetria, nota anche come taglio, è una trasformazione che estende lo spazio delle coordinate in modo non uniforme. In questo esempio, le due stringhe di testo sono inclinate di -30° e 30° lungo la coordinata 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>

Nell'esempio seguente viene illustrato il testo tradotto o spostato lungo l'asse x e y.

Testo con offset utilizzando un TranslateTransform

Nell'esempio di codice seguente viene utilizzata una TranslateTransform per sfalsare il testo. In questo esempio, una copia leggermente spostata del testo al di sotto del testo principale crea un effetto ombra.

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

Annotazioni

Il DropShadowBitmapEffect fornisce un set completo di funzionalità per fornire effetti ombreggiatura. Per altre informazioni, vedere Create Text with a Shadow.

Vedere anche

  • Last updated on