I thought it would be fun to update the UI (and some functionality) for the FontPlayer SDK sample. This app lets you to play with the fonts installed on your the machine. It also shows off the OpenType features of specific fonts.
Some of the interesting features that I added to this app:
- Embedded fonts in XBAP
- ComboBox bound to system fonts, displayed using font
- New CheckBox template
- Text “reflection” effect
FontPlayer works with RC 1. Run it here. Code found here.
Screen Shots - Details
custom font
font ComboBox
new CheckBox template
Embedded fonts in XBAP
Custom fonts are a great way to brand the look & feel for your app. WPF’s embedded font support means I can use a custom font in a web app without affecting/installing system fonts.
In this app, I’m using Robby’s custom font, Ingebretsen Neato. To accomplish this, I included “Ingebretsen Neato.ttf” in the project and then referenced it in this style:
<Style x:Key="Heading" TargetType="{x:Type TextBlock}" >
<!– Custom font from http://notstatic.com –>
<Setter Property=”FontFamily”
Value=”./Resources/#Ingebretsen Neato” />
<Setter Property=”FontSize” Value=”20″ />
<Setter Property=”Foreground” Value=”#FFFFFFFF”/>
<Setter Property=”HorizontalAlignment” Value=”Center”/>
</Style>
The text team’s blog has a lot more info about fonts & typography if you’re interested.
ComboBox bound to system fonts
The XAML to create a ComboBox bound to the system’s font:
<ComboBox Name="FontFamilyComboBox"
ItemsSource=
”{Binding Source={x:Static media:Fonts.SystemFontFamilies}}”
ItemTemplate=”{StaticResource FontFamilyTemplate}”
SelectionChanged=”FontFamilySelectionChanged”
Width=”150″ HorizontalAlignment=”Center”
/>
In order display the font names in the actual font, I used a data template w/ a type converter.
<local:FontFamilyToStringConverter x:Key="FontFamilyToString" />
…
<DataTemplate x:Key=”FontFamilyTemplate” >
<TextBlock
Text=
”{Binding Converter={StaticResource FontFamilyToString}}”
FontFamily=”{Binding}”
/>
</DataTemplate>
The type converter was defined in the code-behind file:
public class FontFamilyToStringConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
FontFamily fontFamily = value as FontFamily;
return fontFamily.ToString();
}
…
}
New CheckBox template
I thought that a new look & feel for the CheckBox would more sense for toggling the options. I based the control template on Robby’s SimpleStyles. I then animated the opacity of the OptionsGrid based on the CheckBox.Checked event.
To see it, look at Resources\CheckBox.xaml.
