UWP same SolidColorBrush is different on PC and Mobile

Question

I have next app.xaml resource:

<LinearGradientBrush x:Key="ApplicationBackground" EndPoint="0,0" StartPoint="3,3" MappingMode="Absolute" SpreadMethod="Repeat">
      <GradientStop Color="#F1F1F1" Offset="0"/>
      <GradientStop Color="#F1F1F1" Offset="0.2"/>
      <GradientStop Color="White" Offset="0.2"/>
      <GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="MenuBackground" Color="#FF01579B"/>

I have created a UserControl, that will be as menu content - MenuController.xaml

Here is the code:

<UserControl
    <ScrollViewer Background="{StaticResource MenuBackground}">
    </ScrollViewer>
</UserControl>

And here i placed it on MainPage:

<Page
    <Grid Background="{StaticResource ApplicationBackground}">
        <controllers:MenuController/>
    </Grid>
</Page>

And here how it looks on mobile vs PC:

Why? What causes this difference and how to fix this?

Here is more easy scenario of this behavior:

    <LinearGradientBrush x:Key="ParentBackground" EndPoint="0,0" StartPoint="3,3" MappingMode="Absolute" SpreadMethod="Repeat">
        <GradientStop Color="#F1F1F1" Offset="0"/>
        <GradientStop Color="#F1F1F1" Offset="0.2"/>
        <GradientStop Color="White" Offset="0.2"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="ChildBackground" Color="White"/>

And on MainPage i have 2 grids:

<Grid Opacity="1" Background="{StaticResource ParentBackground}">
    <Grid Opacity="1" Canvas.ZIndex="10" Background="{StaticResource ChildBackground}">
    </Grid>
</Grid>

And the inner grid is gray, not white! On mobile all is OK

Answer 1

I was experimenting with this, and it's quite bizarre. It appears to be a bug on desktop, so everything in my answer here applies to desktop only; it works correctly on mobile.

TL;DR: The LinearGradientBrush with SpreadMethod="Repeat" is causing the inner UserControl to render 50% darker for some reason.

I narrowed it down to the following XAML (a simplification of yours):

<Grid>
    <Grid.Background>
        <LinearGradientBrush SpreadMethod="Repeat">
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Red" Offset="1"/>
        </LinearGradientBrush>
    </Grid.Background>
    <Rectangle Fill="White" Margin="50"/>
</Grid>

where the Grid is the Content of the main Page. This is what it looks like:

The Rectangle should have a white fill but it is gray? This is similar to your XAML because you have a UserControl with a blue background inside a Grid with a linear gradient background.

Notice also the 1px white border rendering artifact on the right and bottom edges of the Rectangle?

The Rectangle will render correctly in any of these situations:

• The Grid has a nonzero margin or a translate RenderTransform.
• The Rectangle has Opacity less than 1.
• The LinearGradientBrush's SpreadMethod is anything but Repeat.
• Probably more...

I've found that the easiest way to correct the problem is to set the opacity of the Rectangle (i.e. your UserControl) to 0.99999:

but this means the GPU now needs to composite the Rectangle with unnecessary alpha blending, which isn't ideal. My example would benefit by setting the SpreadMethod of the LinearGradientBrush to something else instead (since it appears that's what's causing the problem), but you need it set to Repeat, and it looks like UWP doesn't support tiled background images out-of-the-box.