CODEWITHSUNDEEP
c#wpftextfontsoutlining
Christian Ivicevic
Christian Ivicevic

Reputation: 10885

Outlined font effect for text in WPF

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

enter image description here

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

enter image description here

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?

Upvotes: 0

Views: 3734

Answers (1)

Christian Ivicevic
Christian Ivicevic

Reputation: 10885

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:

enter image description here

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!

Upvotes: 4

Related Questions