Click here to Skip to main content
13,551,173 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

8.6K views
322 downloads
6 bookmarked
Posted 14 Jun 2016
Licenced CPOL

WPF Text Outline Font

, 14 Jun 2016
Rate this:
Please Sign up or sign in to vote.
This presents as control inherited from the Shape control for displaying an outline font.

Introduction

I needed an outline font for an application I was working on. I found a number of solutions, but the all seemed to have issues. I managed to take one solution (Outlined Text in WPF - julmar.com[^]) and heavily modify it to do a better job with sizing so that could use the HorizontalAlignment without issues. This solution still has issues with VerticalAlignment, and had to do some tweaks on the display to ensure that numbers were properly aligned with words in different controls because the words had descenders, and changed the spacing.

The Design

There are a number different controls to inherit from to create a Control for outline text. I ended up inheriting from the Shape class for no particular reason. However, FormattedText can be used directly with the Geometry method of the Shape class. Have also seen the Canvas used as the inherited class. The class has a number of DependencyProperty definitions, including Origin, FontSize, FontWeight, FontFamily, Text, FontStretch. The rest of the class is as follows:

protected override Geometry DefiningGeometry => _textGeometry ?? Geometry.Empty;

private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
      => ((TextPath)d).CreateTextGeometry();

private void CreateTextGeometry()
{
 var formattedText = new FormattedText(Text, Thread.CurrentThread.CurrentUICulture,
  FlowDirection.LeftToRight, new Typeface(FontFamily, FontStyle, FontWeight, FontStretch),
  FontSize, Brushes.Black);
 _textGeometry = formattedText.BuildGeometry(Origin);
}

protected override Size MeasureOverride(Size availableSize)
{
 if (_textGeometry == null) CreateTextGeometry();
 if (_textGeometry.Bounds == Rect.Empty)
  return new Size(0, 0);
 // return the desired size
 return new Size(Math.Min(availableSize.Width, _textGeometry.Bounds.Width),
  Math.Min(availableSize.Height, _textGeometry.Bounds.Height));
}

The major addition I did for this class from the one I found was added the MeasureOverride. This is what allows the automatic sizing of WPF to work, and ensures that the alignment properties work. The XAML to use this class is as follows:

<local:TextPath Margin="10"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Fill="Yellow"
                Stroke="Black"
                StrokeThickness="1.5"
                FontFamily="Ariel"
                FontSize="32"
                FontWeight="Bold"
                Text="This is a Test of Outline Text" />

Conclusion

I am sure that this class could use some improvement, and would love input. As I stated above, there are still issues with the Vertical alignment. Since I have found so many questions and answers about creating and outline font, providing a capability of providing an outline font is one of many oversights of Microsoft in delivering the WPF framework, which is the more recent of two frameworks to use to create desktop applications for Windows, both of which are really no longer supported.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Clifford Nelson
Software Developer (Senior) Clifford Nelson Consulting
United States United States
Has been working as a C# developer on contract for the last several years, including 3 years at Microsoft. Previously worked with Visual Basic and Microsoft Access VBA, and have developed code for Word, Excel and Outlook. Started working with WPF in 2007 when part of the Microsoft WPF team. For the last eight years has been working primarily as a senior WPF/C# and Silverlight/C# developer. Currently working as WPF developer with BioNano Genomics in San Diego, CA redesigning their UI for their camera system. he can be reached at qck1@hotmail.com.

You may also be interested in...

Comments and Discussions

 
SuggestionCredit the original source Pin
Richard Deeming30-Jun-16 7:53
mvpRichard Deeming30-Jun-16 7:53 
AnswerRe: Credit the original source Pin
Clifford Nelson30-Jun-16 8:18
memberClifford Nelson30-Jun-16 8:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01-2016 | 2.8.180515.1 | Last Updated 14 Jun 2016
Article Copyright 2016 by Clifford Nelson
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid