WPF Effects - on text

Question

I've seen a variety of references to WPF effects, but it seems like they're for bitmaps, not text. Is it possible to apply effects other than Blur or Drop Shadow to a TextBlock object in XAML?

Examples of what I'm wanting to do would be maybe an outline stroke, or a bevel/emboss effect.

Is there something you can do in XAML to convert a TextBlock into a bitmap and then apply bitmap effects to it?

A library would be fine, but so is coding it myself, but I don't even know where to start. Is it possible? If so, how do you do it?

Answer 1

Look into the Typography in WPF article for more advanced effects using FormattedText.

And here is the MSDN help for drawing FormattedText.

Answer 2

I think you basically have two options here, and which one you use really depends on which specific effects you are trying to implement. You may even want both.

A Custom Element

As Frank J mentioned in his answer, the FormattedText class has a lot of power and allows you do to a lot of things. You can see several examples on this page.

You can build a custom element that extends a base class such as FrameworkElement and override the OnRender method to render your text using the DrawText method on the drawing context. You will want some method by which to specify and customize the effects you want to use for each instance of the control. I can think of two ways to do that:

1. Add dependency properties to the control for each thing that can be customized, and determine what to render in OnRender based on those properties.

2. Or, add a dependency property to the control to allow you to specify the effect to use. It would be typed as an effect base class or interface that you create with an appropriate API for using the effect. You could then create derived classes for each type of effect you want to implement. This would be similar to the pattern WPF uses with the Effect property, but using your own effect system.

Note: Make sure that any dependency properties you define which have an effect on rendering set the AffectsRender flag in their meta data when you create them.

Shader Effects

Another option is to make use of the existing effect system WPF provides and write your own shader effects. It takes a bit of learning to setup a process for creating effects this way, but once you do it is relatively easy to add new effects.

Warning: Applying effects to elements may cause them to have very poor rendering performance if you render them without hardware acceleration (such as when rendering to a RenderTargetBitmap). You won't notice it if you use them sparingly, but get too many of them on the screen and your application can slow to a crawl. Use with care.

Here are steps you can take to get started with shader effects.

1. If you are not already familiar, learn about HLSL (at least the basics). It is the language used to write WPF (and DirectX) compatible shaders. You only need to worry about pixel shaders for WPF, not vertex or geometry shaders.

2. Install some version of the Windows SDK if you don't have one. It includes the HLSL shader compiler command line program: FXC. You will need it to compile your shaders before you can use them in WPF. You can run it manually, or simplify the process by configuring build steps in Visual Studio to run it for you in a given project.

3. Once you have shaders that are compiled, you will want to add them as resources to your WPF library or application that will be defining them.

4. Finally, create and implement a class that extends ShaderEffect and set it up to work with your shader. An instance of this class can be assigned to the Effect property on any element, similar to the built-in effects that come with WPF.

If you want a more complete guide on shader effects, do a web search for WPF shader effects and you will find a few out there.

Existing Shader Effects

There are third-party shader effects that you can use if you don't need something completely custom. There are even some effects created by Microsoft that are offered as a standalone download.