New WPF Features: ClearTypeHint

  • Article

This is part of a series on New WPF Features

WPF enforces grayscale rendering when text is rendered on a transparent area. However, its possible that the background of a control is opaque even though its inside a transparent area. For example, popups have rounded edges and will have the allowstransparency property set. Same is the case with transparent windows.

Now in .NET 4, we provide the developer to decide whether to render with cleartype or not. The way to do this is to set the RenderOptions.ClearTypeHint property.

RenderOptions.ClearTypeHint="Enabled"

This forces the rendering engine to enable Cleartype for the subtree. Intermediate render targets, such as Effect, OpacityMask, VisualBrush, DrawingBrush, Clip, and Opacity, can introduce backgrounds that are not fully opaque. WPF disables ClearType when it detects that the buffer into which text is drawn could have a transparent background. However, you could easily enable it again.

To get a more clear picture, consider the XAML like

 <Window AllowsTransparency="True" WindowStyle="None" RenderOptions.ClearTypeHint="Enabled">

      <StackPanel>

            <TextBlock Name="Block1">This text will be rendered with ClearType.</TextBlock>

            <TextBlock Opacity="0.9" Name="Block2" >

                 This text will be rendered with NO ClearType (note the opacity Prop).

            </TextBlock>

            <Grid Height="100" Background="White" >

                  <Grid.Clip>

                        <EllipseGeometry RadiusX="300" RadiusY="200" Center="150,120"/>

                  </Grid.Clip>

                  <Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions>

                  <TextBlock Name="Block3" > This text will be rendered with NO ClearType.</TextBlock>

                  <TextBlock Name="Block4" Grid.Row="1" RenderOptions.ClearTypeHint="Enabled">

                      This text will be rendered with ClearType

                  </TextBlock>

            </Grid>

            <TextBlock Name="Block5">This text will be rendered with ClearType.</TextBlock>

      </StackPanel>

</Window>

 

Here the values are set as per the hierarchy

Window à hint enabled

                StackPanel à inherits Hint (cleartype)

                                Block1 à inherits Hint (cleartype)

                                Block2 à overrides Hint because of Opacity [intermediate render target]

                                Grid à overrides Hint because of Clip [intermediate render target]

                                                Block3 à Inherits Grid’s hint (No cleartype)

                                                Block4 à overrides Hint to enabled (Cleartype)

 

 

Share this post