Gör så här: Skapa text med en skugga

Exemplen i det här avsnittet visar hur du skapar en skuggeffekt för text som visas.

Exempel

Med DropShadowEffect-objektet kan du skapa en mängd olika skuggeffekter för WPF-objekt (Windows Presentation Foundation). I följande exempel visas en skuggeffekt som tillämpas på text. I det här fallet är skuggan en mjuk skugga, vilket innebär att skuggfärgen suddas ut.

Du kan styra bredden på en skugga genom att ange egenskapen ShadowDepth. Värdet 4.0 anger en skuggbredd på 4 bildpunkter. Du kan styra en skuggas mjukhet eller oskärpa genom att ändra egenskapen BlurRadius. Värdet 0.0 indikerar ingen suddighet. I följande kodexempel visas hur du skapar en mjuk skugga.

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

Anmärkning

Dessa skuggeffekter går inte igenom textrenderingspipelinen för Windows Presentation Foundation (WPF). Därför inaktiveras ClearType när du använder dessa effekter.

I följande exempel visas en hård skuggeffekt som tillämpas på text. I det här fallet är skuggan inte suddig.

Du kan skapa en hård skugga genom att ange egenskapen BlurRadius till 0.0, vilket indikerar att ingen suddig information används. Du kan styra skuggriktningen genom att ändra egenskapen Direction. Ange egenskapens riktningsvärde till en grad mellan 0 och 360. Följande bild visar riktningsvärdena för egenskapsinställningen Direction.

I följande kodexempel visas hur du skapar en hård skugga.

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

Använda en oskärpaeffekt

En BlurBitmapEffect kan användas för att skapa en skuggliknande effekt som kan placeras bakom ett textobjekt. En bitmappseffekt med oskärpa som appliceras på text gör att texten suddas ut jämnt i alla riktningar.

I följande exempel visas en blureffekt applicerad på text.

I följande kodexempel visas hur du skapar en oskärpaeffekt.

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

Använda en Translate-transformation

En TranslateTransform kan användas för att skapa en skuggliknande effekt som kan placeras bakom ett textobjekt.

I följande kodexempel används en TranslateTransform för att förskjuta text. I det här exemplet skapar en något förskjuten kopia av texten under den primära texten en skuggeffekt.

I följande kodexempel visas hur du skapar en transformering för en skuggeffekt.

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