Silverlight 5 introduces several noteworthy features, and a new fonts rendering system is among them. This post will explain how to employ it to beautify your application typografy and how to apply them using Silverlight Toolkit themes.
1. Migrate your project to Silverlight
If you have an existing Silverlight 4 project migrate it to Silverlight 5. This article refers to the JetPack theme, but it will work regardless of the theme.
2. Set it up
If you are using theming, in your Assets directory you should have a Fonts.xaml. If not, open your App.xaml and see if you have put it in another directory.
In the Fonts.xaml, we are going to add a few lines which will control the fonts settings for the entire application. Before the ResourceDictionary closing, add this:<TextFormattingMode x:Key="NormalTextFormattingMode">Display</TextFormattingMode> <TextHintingMode x:Key="NormalTextHintingMode">Fixed</TextHintingMode> <TextRenderingMode x:Key="NormalTextRenderingMode">ClearType</TextRenderingMode>What are those? Let's see:
- TextFormattingMode: this option controls the way glyphs are generated. You have two possible settings: Ideal or Display. Ideal will generate nicer text then fonts size is large enough. Display will generate full-pixel glyphs which are not so nice when font is large, but are better for small text.
- TextHintingMode: this option controls the text hinting, and its main purpose is to allow the developer to disable text optimization when animating a text, to vastly improve performance at the expense of readability. Always set to Fixed to improve readability, set to Animated only when animating text.
- TextRenderingMode: this option controls font antialiasing settings. You have several options here: Aliased means to turn off antialiasing altogether. ClearType will enable the ClearType technology, which will employ full color antialiasing to the fonts. Grayscale will antialias fonts using grayscale only. Auto will try to guess the best setting for you.
4. Activate settings
Now you have created three local resources, but they are never applied, so are unused.
To apply them, open CoreStyles.xaml, and look for this:<Style TargetType="TextBlock">This is the opening block of the default TextBlock element. In it, you can have setters for any property, which will be automatically set for all the TextBlocks in your app (unless locally overridden). To apply your setters, do like this:
<Style TargetType="TextBlock">
<Setter Property="FontSize"
Value="{StaticResource DefaultFontSize}" />
<Setter Property="Foreground"
Value="{StaticResource NormalFontBrush}" />
<Setter Property="TextOptions.TextFormattingMode"
Value="{StaticResource NormalTextFormattingMode}" />
<Setter Property="TextOptions.TextHintingMode"
Value="{StaticResource NormalTextHintingMode}" />
<Setter Property="TextOptions.TextRenderingMode"
Value="{StaticResource NormalTextRenderingMode}" />
</Style>
Run it
Run your app: typography should be better. If on the other side you see no difference, and are unsure whether your settings have been applied or not, just add a setter similar to this to the previous setters:
<Setter Property="Foregroung" Value="Red" />to help you. This setting will make all the text red, so you will know that your setting has been applied. Happy tweaking!
