Blurry Rotated Text In WPF

Just a short little post today, as I’m going to forget this if I don’t write it down somewhere.

Sometimes when you transform text in WPF it ends up rendering blurred at runtime. Annoyingly, it will quite often appear fine in Visual Studio’s designer. Take, for example, the following expander header.

<Expander.Header>
    <TextBlock Text="Running Dates">
        <TextBlock.LayoutTransform>
            <RotateTransform Angle="-90"/>
        </TextBlock.LayoutTransform>
    </TextBlock>
</Expander.Header>

It looks fine in the designer

but at runtime it goes blurry

Adding TextOptions.TextFormattingMode="Display" to the TextBlock fixes this by using GDI-compatible font metrics.

<Expander.Header>
    <TextBlock Text="Running Dates" TextOptions.TextFormattingMode="Display">
        <TextBlock.LayoutTransform>
            <RotateTransform Angle="-90"/>
        </TextBlock.LayoutTransform>
    </TextBlock>
</Expander.Header>

Now it looks much better at runtime.

It’s also worth looking at SnapsToDevicePixels and UseLayoutRounding for similar issues that don’t involve text.