UWP相同的SolidColorBrush在PC和Mobile上有所不同

Question

我有下一个app.xaml资源：

<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"/>

我创建了一个UserControl，它将作为菜单内容 - MenuController.xaml

以下是代码：

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

在这里我将它放在MainPage上：

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

以下是移动与PC的关系：

为什么呢？导致这种差异的原因以及如何解决这个问题？

以下是此行为的更简单方案：

    <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"/>

在MainPage上我有2个网格：

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

内部网格是灰色的，而不是白色！ 在移动设备上一切正常

Answer 1

我正在试验这个，这很奇怪。它似乎是桌面上的一个错误，因此我的答案中的所有内容仅适用于桌面;它在移动设备上正常工作。

TL; DR ：带有SpreadMethod="Repeat"的LinearGradientBrush导致内部UserControl由于某种原因呈现50％更暗。

我将其缩小到以下XAML（简化你的）：

<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>

其中Grid是主页面的内容。这就是它的样子：

矩形应该有白色填充但是灰色？这类似于您的XAML，因为您的UserControl在网格内部具有蓝色背景，并具有线性渐变背景。

还要注意Rectangle右边和底边的1px白色边框渲染工件？

在任何这些情况下，Rectangle都会正确呈现：

• 网格具有非零边距或翻译RenderTransform。
• 矩形的不透明度小于1.
• LinearGradientBrush的SpreadMethod不是重复。
• 可能更多......

我发现纠正问题的最简单方法是将Rectangle（即你的UserControl）的不透明度设置为0.99999：

但这意味着GPU现在需要将Rectangle与不必要的alpha混合合成，这并不理想。我的例子可以通过将LinearGradientBrush的SpreadMethod设置为其他东西而受益（因为它看起来是造成问题的原因），但是你需要将它设置为Repeat，它看起来像UWP doesn't support tiled background images out-of-the-box。