Outlined font effect for text in WPF

Question

I was looking for a way to create an outline for some text in WPF to make it more distinguishable from the background. The original look I am trying to mimick is the following

You will notice that the font is really small which makes this problem very difficult. All controls and snippets I have found that outline text are drawing the outline in the letters and not around them which makes those controls a bad choice in my case. Even something simple as drawing shadows to fake a border is not enough

I was curious whether you know of some controls that can outline a text by drawing the outline outside of the letters which allows me to use small font sizes. Alternatively do you think sprite fonts which are used in games very often are a good approach? If so, are there any libraries/controls you can suggest?

For me, the second text style looks more distinguishable than the first one. — Jose, Dec 11 '15 at 13:23
@Kirenenko The second style has white instead of a jade text color (refer to red text on red background in the first style) and it it is slightly larger. Furthermore the picture of the first style has a lower quality. — Christian Ivicevic, Dec 11 '15 at 13:26
Could you add a drop shadow to the text or perhaps draw it twice, once in black & slightly larger and then again in red directly over the top? No idea how that would look though. — ChrisF, Dec 11 '15 at 13:29
Alternatively explicitly set the background of text to black and centre it over the progress bar rather than stretching it. — ChrisF, Dec 11 '15 at 13:29
@ChrisF Drawing it twice right on top of itself (with different font sizes) will probably result in distortions the longer the text gets. I guess one has to draw each letter separately and then merge them to one image programmatically. — Christian Ivicevic, Dec 11 '15 at 13:32
@ChristianIvicevic yeah, that did cross my mind too. Probably not the best idea then ;) — ChrisF, Dec 11 '15 at 13:33
@ChrisF Please refer to my own answer to this question - your adapted suggestion works surprisingly well. — Christian Ivicevic, Dec 11 '15 at 21:02
Does this answer your question? [Apply stroke to a textblock in WPF](https://stackoverflow.com/questions/93650/apply-stroke-to-a-textblock-in-wpf) — Mike Nakis, Aug 04 '20 at 12:55

score 4 · Accepted Answer · edited May 23 '17 at 10:29

For the time being I want to leave a small snippet which helped me create a very decent result so far which looks like this:

I am using multiple TextBlock elements inside a Canvas and overlaying them as ChrisF suggested. Surprisingly this turned out to look better than expected with less distortions because I don't have to use an increased font size.

<Canvas>
    <TextBlock Text="{StaticResource TestString}" FontSize="18"
               FontFamily="BigNoodleTitling" Canvas.Top="2" Canvas.Left="2" />
    <TextBlock Text="{StaticResource TestString}" FontSize="18"
               FontFamily="BigNoodleTitling" Canvas.Top="2" Canvas.Left="4" />
    <TextBlock Text="{StaticResource TestString}" FontSize="18"
               FontFamily="BigNoodleTitling" Canvas.Top="4" Canvas.Left="2" />
    <TextBlock Text="{StaticResource TestString}" FontSize="18"
               FontFamily="BigNoodleTitling" Canvas.Top="4" Canvas.Left="4" />
    <TextBlock Text="{StaticResource TestString}" FontSize="18"
               FontFamily="BigNoodleTitling" Canvas.Top="3" Canvas.Left="3"
               Foreground="#de5f5f" />
</Canvas>

I am still interested in alternative solutions!

You could try it works ok, maybe not as well as your example though. — patrick, Jan 19 '17 at 22:58

Outlined font effect for text in WPF

1 Answers1