LinearGradientBrush Repeat SpreadMethod turns foreground UIElements transparent

Question

LinearGradientBrush Repeat SpreadMethod turns foreground UIElements transparent

Paul Hansen 1

Using a LinearGradientBrush with a SpreadMethod of Repeat causes foreground elements to become transparent:

   <StackPanel Margin="10">  
       <Grid Width="100" Height="100">  
           <Grid.Background>  
               <LinearGradientBrush MappingMode="Absolute" SpreadMethod="Repeat" EndPoint="20,10">  
                   <GradientStop Offset="4" Color="Blue" />  
                   <GradientStop Color="Red" />  
               </LinearGradientBrush>  
           </Grid.Background>  
           <Rectangle Margin="10" Fill="White" />  
       </Grid>  
     
       <Grid Width="100" Height="100">  
           <Grid.Background>  
               <LinearGradientBrush MappingMode="Absolute" SpreadMethod="Pad" EndPoint="20,10">  
                   <GradientStop Offset="4" Color="Blue" />  
                   <GradientStop Color="Red" />  
               </LinearGradientBrush>  
           </Grid.Background>  
           <Rectangle Margin="10" Fill="White" />  
       </Grid>  
   </StackPanel>

I found this StackOverflow question with the same issue (simplified it for my example), but no workarounds listed.

(Running Win 10 20H2, OS Build 19042.685)

Yan Gu - MSFT 2,681 Reputation points

2020-12-23T05:28:18.847+00:00

@Paul Hansen I really appreciate you taking the time to share your question. We are reporting the problem to the team and searching a workaround or a solution.

Erik Vriezen 1

I just ran into the same kind of problem.
When debugging the UWP app with VS2022 or running the app from the start menu the Solid Colors are much darker than the expected colors.

Also when debugging, dragging the mouse over the red SolidColor rectangle changes the color to the expected color.
Even the In-app toolbar background changes color when dragging it from left to right.

Running Win 11 Pro 21H2, OS Build 22000.348

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Grid.Column="0" Margin="8"/>
    <Rectangle Grid.Column="1" Margin="8">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,0.5" SpreadMethod="Repeat">
                <GradientStop Color="Yellow" Offset="0.5"/>
                <GradientStop Color="Red" Offset="0.5"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>