I have a grid with this template and styles in WPF/XAML:
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="RenderOptions.ClearTypeHint" Value="Enabled" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="CellContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RenderOptions.ClearTypeHint="Enabled" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="CellContent" Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter TargetName="CellContent" Property="RenderOptions.ClearTypeHint" Value="Enabled" />
<Setter TargetName="CellContent" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Color="Black" RenderingBias="Quality" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
The DropShadowEffect
I have when you select a grid row, seems to make the text rendering blurry (gray anti-aliasing):
When I remove the drop shadow effect, it looks clear because it now uses ClearType and not gray sub-pixel anti-aliasing:
I have tried applying RenderOptions.ClearTypeHint="Enabled"
to the ContentPresenter
as seen above, but it does not help.
How do I force WPF to render the text that gets displayed with drop shadow effect to retain Cleartype anti-aliasing, instead of that ugly blurry gray sub-pixel anti-aliasing?
Some believe it's blurry because of the drop shadow -- this is not true. It's blurry only because ClearType is not used. This is how it looks like in Firefox when shadow AND ClearType:
ClearType enabled text is colorful -- but that blurry text is not, because it does not use ClearType -- it uses gray sub-pixel anti-aliasing and that's not how ClearType works: http://en.wikipedia.org/wiki/ClearType
The question is: how do I enable ClearType for this text?
How about setting TextOptions.TextFormattingMode
to Display
as well as RenderOptions.BitmapScalingMode
to NearestNeighbor
? The latter is new in WPF 3.5 SP1 and I normally use it to remove the blur. :)
<TextBlock Text="Hello world" TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="NearestNeighbor"
HorizontalAlignment="Center" TextWrapping="Wrap"
VerticalAlignment="Center" Foreground="White" FontFamily="Microsoft Sans Serif">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Color="Black"
RenderingBias="Quality"/>
</TextBlock.Effect>
</TextBlock>
Below is how it looks like.
And this is how it looks like in FireFox.