Pure XAML Font Chooser


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