locked
Rendering issue with LinearGradientBrush with SpreadMethod = Repeat

    Question

  • Hi,

    I found a weird behavior when using a LinearGradientBrush... So if a Xaml expert has an rational explanation about it, I would be really grateful.

    Here is my situation :

    One simple grid with 2 columns. A rectangle in each column. The first one filled with a LinearGradientBrush with SpreadMode="Repeat", the second one filled in white. 

    <Page.Resources>
            <Color x:Key="DarkStripedBackgroundColor">#FF4B4031</Color>
    
            <Color x:Key="DarkStripedBackgroundLineColor">#FF524633</Color>
            
            <LinearGradientBrush x:Key="DarkStrippedBrush" EndPoint="10,10" StartPoint="0,10" SpreadMethod="Repeat" MappingMode="Absolute">
                <GradientStop Color="{StaticResource DarkStripedBackgroundColor}" Offset="0"/>
                <GradientStop Color="{StaticResource DarkStripedBackgroundColor}" Offset="0.7"/>
                <GradientStop Color="{StaticResource DarkStripedBackgroundLineColor}" Offset="0.7"/>
                <GradientStop Color="{StaticResource DarkStripedBackgroundLineColor}" Offset="1"/>
            </LinearGradientBrush>
        </Page.Resources>
        
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <Rectangle Fill="{StaticResource DarkStrippedBrush}"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"/>
    
            <Rectangle Fill="White"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       Grid.Column="1"/>
        </Grid>

    And at the rendering... The second column is Grey !?

     

    Now, if I switch the order of the rectangles in the xaml like this : 

    <Page.Resources>
            <Color x:Key="DarkStripedBackgroundColor">#FF4B4031</Color>
    
            <Color x:Key="DarkStripedBackgroundLineColor">#FF524633</Color>
            
            <LinearGradientBrush x:Key="DarkStrippedBrush" EndPoint="10,10" StartPoint="0,10" SpreadMethod="Repeat" MappingMode="Absolute">
                <GradientStop Color="{StaticResource DarkStripedBackgroundColor}" Offset="0"/>
                <GradientStop Color="{StaticResource DarkStripedBackgroundColor}" Offset="0.7"/>
                <GradientStop Color="{StaticResource DarkStripedBackgroundLineColor}" Offset="0.7"/>
                <GradientStop Color="{StaticResource DarkStripedBackgroundLineColor}" Offset="1"/>
            </LinearGradientBrush>
        </Page.Resources>
        
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            
            <Rectangle Fill="White"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       Grid.Column="1"/>
    
            <Rectangle Fill="{StaticResource DarkStrippedBrush}"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"/>
        </Grid>

    The rendering is now correct :

     

    If you remove the Repeat spreadmode, the rendering is correct.

    You can reproduce all the step in a Blank Application windows store app, XAML/C#.

    Thanks in advance,


    Tuesday, April 29, 2014 8:00 PM

Answers

  • Hi Guillaume,

    Thanks for the report. It looks like there's an edge case here where the Repeat is leaving the surface in an incorrect state which causes items drawn after it to render darker than expected.

    --Rob

    Tuesday, April 29, 2014 10:09 PM
    Owner