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

我创建了一个用户控件，它将作为菜单内容 - MenuController.xaml

代码如下：

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

我把它放在了主页上：

<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 类似，因为您在具有线性渐变背景的 Grid 中有一个蓝色背景的 UserControl。

还注意到 Rectangle 的右边缘和下边缘的 1px 白色边框渲染伪影吗？

矩形将在以下任何情况下正确呈现：

• Grid 具有非零边距或平移 RenderTransform。
• 矩形的不透明度小于 1。
• LinearGradientBrush 的 SpreadMethod 绝不是重复。
• 可能更多...

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

但这意味着 GPU 现在需要将 Rectangle 与不必要的 alpha 混合进行合成，这并不理想。我的示例将通过将 LinearGradientBrush 的 SpreadMethod 设置为其他值来受益（因为它似乎是导致问题的原因），但您需要将其设置为重复，它看起来像 UWP doesn't support tiled background images out-of-the-box。