CODEWITHSUNDEEP
.netwpfsilverlightxamluser-interface
Burt
Burt

Reputation: 7758

WPF/Silverlight Text Effect

Notice in the image below the 1px highlight below the text in the grey panel. How could this be achieved with WPF/Silverlight?

Valid XHTML http://www.iconpaper.org/preview/10012101b.jpg.

Upvotes: 2

Views: 1056

Answers (2)

mdip
mdip

Reputation: 685

I stumbled upon this while trying to figure out how to do this myself.

In my case, I didn't control the original application (Visual Studio, incidentally) and when I applied any additional WPF elements the result was bizarre with the "glow-shadow" being quite removed from the text. I could never figure out how to make it work so I wrote a ShaderEffect specific for this.

You can download the project from its repo.

To use it, apply the effect directly to the text element (label, text block, etc):

<Label Content="My Label Content">
    <Label.Effect>
        <effects:ChiseledTextEffect 
                 ShadowIntensity="1" GlowIntensity="1" Size="0.5" MixDivisor="3" />
    </Label.Effect>
</Label>

Of course, include:

xmlns:effects="clr-namespace:Diagonactic.WPF.Effects;assembly=Diagonactic.WPF"

... in the appropriate place in your XAML and reference the project.

The parameters I've included are actually the defaults, so you can leave them off unless you need to tweak it.

My aim was for a well performing chisel (or bevel if Size is set to a negative number) implemented as an HLSL/WPF ShaderEffect. It's PixelShader 2.0, so it should work with Silverlight, though I haven't personally tested it.

The full documentation is here and there's a screenshot of how it looks configured a little subtler than the defaults will give you, but here's the brief version:

Size - Pixel size for glow/shadow (0.5 would produce a visible glow underneath; shadow above is extremely subtle and would be invisible in dark text like that in the sample). Use a negative number to get a bevel.

Glow/ShadowIntensity - Increases/Decreases effect. Increasing both simultaneously leaves the text in its original color, increasing one or the other will affect the color of the rendered text and the intensity of the effect.

MixDivisor - Blends the text and effect into the background. 3.0 is a very subtle blend, 2.0 is none at all. Increasing the number beyond 3.0 is useful if the text will be sitting on top of an image or inconsistent background, but result in the text being at a lower contrast with the background. The intensities and divisor work together for this use case.

Upvotes: 0

Shawn Mclean
Shawn Mclean

Reputation: 57469

In Silverlight 3, it is called a DropShadow effect.

Eg.

  <Border Height="300" Width="300" Background="Gray">
        <Border.Effect>
            <DropShadowEffect Opacity="0.34" ShadowDepth="9" Direction="542" BlurRadius="9"/>
        </Border.Effect>
  </Border>

Upvotes: 5

Related Questions