Pixellated and Broken Text on WPF Animation

Question

I have a control with an animation applied on the Height property. The control contains a ListBox with TextBlock as ListItem. But the text is blurred, broken, or pixellated during animation. Below please see the images during different points in the animation.

The code of my TextBlock:

<TextBlock x:Name="Description"
Padding="0,2,0,2"
Grid.Column="1" 
TextOptions.TextRenderingMode="ClearType"
HorizontalAlignment="Left" VerticalAlignment="Center"
Text="{Binding Description}"
ToolTip="{Binding Description}"
TextTrimming="CharacterEllipsis"
Foreground="White"
FontSize="11" FontFamily="{DynamicResource StandardFontType}"/>

I tried all different options for TextOptions.TextRenderingMode and DisplayModes from this link, but nothing could solve my problem.

Answer 1

Try switching between:

TextOptions.TextFormattingMode="Ideal"

and

TextOptions.TextFormattingMode="Display"

Also please note that Borders with shadows can cause trouble with Text rendering, see this SO link

As described in that link, you can have the best of both worlds (the shadows + the nicely rendered text) by using a Grid and putting both elements in the same Row/Column: they are therefore superimposed but the text won't suffer from the shadow.