Pure XAML Font Chooser

Hi,

My name is Norris, and I’m the test lead on the WPF Text team. Our team is responsible for testing the latest and greatest of the core text technologies in WPF, including text layout, text rendering, and fonts.

The best thing about being a tester is that I get to play with the product a lot. Aside from text, I also take time to learn about other WPF features such as data binding, since we need to make sure text integrates well with the rest of the platform. =)

For my first post, I’d like to show you how to build a simple font chooser. You may say, “What? Another font chooser?” I know there are quite a few samples out there already, but my sample is *cool* because it doesn’t require any code! It’s xaml only and demonstrates the power of xaml and data binding.

Here’s a screenshot of the font chooser:

The xaml is attached to this post. You can just click on the attachment link below and it should load up in your browser if you have WPF Feb CTP or later installed.

The key part of the xaml is:

<CollectionViewSource Source="{Binding Source={x:Static Fonts.SystemFontFamilies}}" x:Key="familyCollection"/>

This defines a CollectionViewSource, which data binds to the system font family collection returned by System.Windows.Media.Fonts.SystemFontFamilies (The namespace System.Windows.Media is implied here). The CollectionViewSource could then be data bound to any ItemsControl. In this case I chose to use a ListBox. When you select a font family, the available typefaces will populate the adjacent “Family Typefaces” ListBox. The resulting typeface could be previewed in the “Sample Text” textbox on the right. You can also adjust the font size using the slider control on the bottom right. Pretty cool huh?

This is it for now, hope you enjoyed this. Check back later for more samples. =)

-Norris Cheng

SimpleFontChooser.xaml

Comments

• Anonymous
  October 19, 2006
  Very nice font chooser. I found the xaml that you wrote educational. Since you are the test lead on the WPF Text team, I wonder if you can help me with a problem that I am having. I have some hebrew fonts that do not display in WPF controls. The regular hebrew fonts that come with WinXP work fine. However some specialized TrueType fonts just display square boxes instead of characters. These specialized fonts work fine in Notepad or with Dot Net 2.0 windows controls but not in WPF controls. I observe this when I try applying these fonts using the FontPlayer demo sample that comes with the WinFX SDK and also when using your Font Chooser I am using WinFX RC1 on WinXP SP2 and experience the same problem whether I have ClearType fonts switched on or off. If you want me to send you an example font I will gladly do so.

• Anonymous
  October 23, 2006
  Hi Eli, I think I was able to catch you in the MSDN forum and answer your question there, but for other readers this was my reply:  There is indeed an incompatibility issue with WPF and certain types of legacy fonts. It's likely that these custom hebrew fonts do not display correctly because they are TrueType fonts that use the Private Use Area (PUA) for storing diacritic marks and other glyphs. The reason WPF does not support this is because PUA based fonts (most common for Hebrew and Thai) conflict with the system's End User Defined Characters. Microsoft has been working with the font community to move towards the OpenType font format, a format Adobe and Microsoft are jointly partnered on, which addresses this issue. Perhaps the font vendor you purchased the TT PUA font from has an updated OpenType version? Hope this explanation helps, Chris Han