CODEWITHSUNDEEP
.netwpftext-rendering
serhio
serhio

Reputation: 28586

WPF small text rendering and scaling

I need to "stabilize" the text rendering in an application when I use canvas scaling.

I have the following code:

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="356" Width="804">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ScrollViewer
        PreviewMouseWheel="ScrollViewer_PreviewMouseWheel" Grid.Row="0">
            <Canvas>
                <Canvas.LayoutTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="scaleTransform"/>
                    </TransformGroup>
                </Canvas.LayoutTransform>
                <TextBlock Canvas.Left="34" Canvas.Top="47" Height="23" Name="textBlock1" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Ideal, Aliased" TextOptions.TextFormattingMode="Ideal" TextOptions.TextRenderingMode="Aliased" FontSize="11" FontFamily="Times New Roman" FontWeight="Bold" />
                <TextBlock Canvas.Left="34" Canvas.Top="81" Height="23" Name="textBlock2" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Ideal, ClearType" TextOptions.TextFormattingMode="Ideal" TextOptions.TextRenderingMode="ClearType" FontSize="11" FontFamily="Times New Roman" FontWeight="Bold" />
                <TextBlock Canvas.Left="35" Canvas.Top="115" Height="23" Name="textBlock3" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Ideal, Grayscale" TextOptions.TextFormattingMode="Ideal" TextOptions.TextRenderingMode="Grayscale" FontSize="11" FontFamily="Times New Roman" FontWeight="Bold" />

                <TextBlock Canvas.Left="310" Canvas.Top="46" Height="23" Name="textBlock4" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Display, Aliased" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="Aliased" FontSize="11" FontFamily="Times New Roman" FontWeight="Bold" />
                <TextBlock Canvas.Left="309" Canvas.Top="79" Height="23" Name="textBlock5" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Display, ClearType" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="ClearType" FontSize="11" FontFamily="Times New Roman" FontWeight="Bold" />
                <TextBlock Canvas.Left="309" Canvas.Top="112" Height="23" Name="textBlock6" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Display, Grayscale" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="Grayscale" FontSize="11" FontFamily="Times New Roman" FontWeight="Bold" />
                <TextBlock Canvas.Left="188" Canvas.Top="157" FontSize="11" Height="23" Name="textBlock11" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Default" FontFamily="Times New Roman" FontWeight="Bold" />
            </Canvas>
        </ScrollViewer>

        <TextBlock Grid.Row="1" Height="23" Name="textBlock8" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Default, static; Times New Roman, 11" FontSize="11" FontFamily="Times New Roman" FontWeight="Bold" />
        <TextBlock Grid.Row="2" FontSize="11" Height="23" Name="textBlock9" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; DISPLAY, static; Times New Roman, 11" TextOptions.TextFormattingMode="Display" FontFamily="Times New Roman" FontWeight="Bold" />
        <TextBlock Grid.Row="3" Height="23" Name="textBlock7" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; Default, static; Arial, 16" FontSize="16" FontWeight="Bold" />
        <TextBlock Grid.Row="4" FontSize="16" Height="23" Name="textBlock10" Text="TK QSDFWPO Aàâéèêëîïôùûüÿçæœ; DISPLAY, static; Arial, 16" TextOptions.TextFormattingMode="Display" FontWeight="Bold" />
    </Grid>
</Window>

When you paste it in the Visual Studio, press Ctrl and Scroll in designer, you will see, that the default under 15 size is blurry.

And the option DISPLAY of the TextFormattingMode does is broken if I zoom the canvas.

How to avoid this small text blurriness problem when using ScaleTransform?

enter image description here

enter image description here

Upvotes: 2

Views: 994

Answers (1)

sourcenouveau
sourcenouveau

Reputation: 30504

Rather than using a scaling transform on the canvas, perhaps you could try scaling the font size. It may be hard to get the text to line up though. Scaling the canvas in the manner that you are will force some interpolation to happen, and you will not be able to avoid the blurry text.

To be honest I don't see any difference in blurriness between the two screenshots.

Upvotes: 1

Related Questions