Charles Petzold



Bizarre Windows 8 Gradient Brush Bug

March 12, 2012
New York, N.Y.

Normally when I'm working with a public beta release like Windows 8, I don't blog about petty bugs. Sure, I'll blog about what I perceive to be serious design flaws but not bugs. One reason why the product is still in beta is that it still has a lot of bugs, and there's no reason to complain about them.

But I've stumbled upon a bug in the Consumer Preview of Windows 8 that is so bizarre, I can't begin to imagine what kind of code might cause such a thing to happen. Here's the LinearGradientBrushBug project. The XAML file looks like this:

<Page x:Class="LinearGradientBrushBug.BlankPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Page.Resources>
        <LinearGradientBrush x:Key="brush" StartPoint="0 0" EndPoint="1 0">
            <GradientStop Offset="0" Color="Blue" />
            <GradientStop Offset="1" Color="Red" />
        </LinearGradientBrush>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
        <StackPanel>
            <TextBlock Text="Hello, Windows 8!" 
                       FontSize="96"
                       Foreground="{StaticResource brush}" />

            <TextBlock Text="Hello, Windows 8!" 
                       FontFamily="Arial"
                       FontSize="96"
                       Foreground="{StaticResource brush}" />

            <TextBlock Text="Helloooooo, Windows 8!" 
                       FontFamily="Arial"
                       FontSize="96"
                       Foreground="{StaticResource brush}" />

            <TextBlock Text="Hiiiiiiiiiiiiiiiiiiii, Windows 8!" 
                       FontFamily="Arial"
                       FontSize="96"
                       Foreground="{StaticResource brush}" />

            <TextBlock Text="Hellooooow, Windows 8!" 
                       FontFamily="Arial"
                       FontSize="96"
                       Foreground="{StaticResource brush}" />
        </StackPanel>
    </Grid>
</Page>

Five TextBlock elements share the same LinearGradientBrush, and in all cases the brush should extend from the beginning of the text to the end. This is the case with the default font, but not when you set the FontFamily to something else:

The first example with the default font works fine. With the Arial font, the gradient seems to start over at the word break. This theory is confirmed by the 3rd example, but the 4th example discredits that theory. Instead, the gradient starts over at the letter "i". The 5th example shows that the gradient also begins anew at the lower-case "w".

I'm sure there's a rational explanation for this behavior, but I'm baffled!