Condividi tramite


Procedura: Creare testo con un'ombra

Negli esempi di questa sezione viene illustrato come creare un effetto ombreggiatura per il testo visualizzato.

Esempio

L'oggetto DropShadowEffect consente di creare un'ampia gamma di effetti di ombreggiatura per gli oggetti Windows Presentation Foundation (WPF). Nell'esempio seguente viene illustrato un effetto ombreggiatura applicato al testo. In questo caso, l'ombra è un'ombra morbida, il che significa che il colore dell'ombra si sfuma.

ombreggiatura del testo con morbidezza = 0,25

È possibile controllare la larghezza di un'ombreggiatura impostando la proprietà ShadowDepth. Il valore 4.0 indica una larghezza dell'ombreggiatura di 4 pixel. È possibile controllare la morbidezza o la sfocatura di un'ombra modificando la proprietà BlurRadius. Un valore di 0.0 indica assenza di sfocatura. Nell'esempio di codice seguente viene illustrato come creare un'ombreggiatura morbida.

<!-- Soft single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Teal">
  <TextBlock.Effect>
    <DropShadowEffect
      ShadowDepth="4"
      Direction="330"
      Color="Black"
      Opacity="0.5"
     BlurRadius="4"/>
  </TextBlock.Effect>
</TextBlock>

Annotazioni

Questi effetti di ombreggiatura non attraversano la pipeline di rendering del testo di Windows Presentation Foundation (WPF). Di conseguenza, ClearType è disabilitato quando si usano questi effetti.

Nell'esempio seguente viene illustrato un effetto di ombreggiatura dura applicato al testo. In questo caso, l'ombra non è sfocata.

ombreggiatura del testo con morbidezza = 0

È possibile creare un'ombra netta impostando la proprietà BlurRadius su 0.0, che indica che non viene usata alcuna sfocatura. È possibile controllare la direzione dell'ombreggiatura modificando la proprietà Direction. Impostare il valore direzionale di questa proprietà su un grado compreso tra 0 e 360. La figura seguente mostra i valori direzionali dell'impostazione della proprietà Direction.

impostazione del grado di ombreggiatura DropShadow di

Nell'esempio di codice seguente viene illustrato come creare un'ombreggiatura rigida.

<!-- Hard single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon">
  <TextBlock.Effect>
    <DropShadowEffect
      ShadowDepth="6"
      Direction="135"
      Color="Maroon"
      Opacity="0.35"
      BlurRadius="0.0" />
  </TextBlock.Effect>
</TextBlock>

Utilizzare l'effetto sfocatura

Un BlurBitmapEffect può essere usato per creare un effetto simile a un'ombra che può essere posizionato dietro un oggetto di testo. Un effetto bitmap di sfocatura applicato al testo offusca uniformemente il testo in tutte le direzioni.

Nell'esempio seguente viene illustrato un effetto sfocatura applicato al testo.

Ombreggiatura del testo usando un effetto bitmap sfocato

Nell'esempio di codice seguente viene illustrato come creare un effetto sfocatura.

<!-- Shadow effect by creating a blur. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Green"
  Grid.Column="0" Grid.Row="0" >
  <TextBlock.Effect>
    <BlurEffect
      Radius="8.0"
      KernelType="Box"/>
  </TextBlock.Effect>
</TextBlock>
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon"
  Grid.Column="0" Grid.Row="0" />

Uso di una trasformazione Translate

Un TranslateTransform può essere usato per creare un effetto simile a un'ombra che può essere posizionato dietro un oggetto di testo.

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.

Ombreggiatura del testo usando un TranslateTransform

Nell'esempio di codice seguente viene illustrato come creare una trasformazione per un effetto ombreggiatura.

<!-- Shadow effect by creating a transform. -->
<TextBlock
  Foreground="Black"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="3" Y="3" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Foreground="Coral"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
</TextBlock>