UWP中LinearGradientBrush设Repeat致前景UI元素半透明问题求助

你遇到的这个现象确实是Windows 10 16299版本（秋季创意者更新）里UWP渲染引擎的一个已知Bug，不是你代码逻辑的问题。

问题原因 #

当LinearGradientBrush设置SpreadMethod="Repeat"，同时存在Offset值大于1的GradientStop时，渲染引擎在计算重复渐变的像素透明度时会出现偏差，错误地将这种透明度混合应用到了同一容器内的上层UI元素（比如你代码里的Polyline），导致元素看起来半透明。而当给Polyline设置填充色时，渲染引擎的混合逻辑被部分纠正，所以描边恢复成纯黑色，这也是这个Bug的衍生表现。

修复方法 #

这里有几种可行的修复方案，你可以根据需求选择：

1. 修正GradientStop的Offset值到有效范围 #

GradientStop的Offset属性有效范围是0到1，超过这个范围的设置本身就不符合设计预期，你可以通过调整渐变的起止点和Offset值来实现相同的重复效果。比如把Offset调整到0-1之间，同时适配StartPoint和EndPoint让渐变周期更短，这样重复后效果一致：

<StackPanel Orientation="Vertical">
    <Canvas Width="100" Height="100">
        <Border Width="100" Height="100">
            <Border.Background>
                <LinearGradientBrush MappingMode="Absolute" StartPoint="-10,10" EndPoint="10,0" SpreadMethod="Repeat">
                    <!-- 将Offset调整到0-1范围，模拟原Offset 4的相对比例 -->
                    <GradientStop Color="Blue" Offset="0"/>
                    <GradientStop Color="Red" Offset="0.25"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Polyline Points="0,0 10,10 50,10 90,60" Stroke="Black" StrokeThickness="4"/>
    </Canvas>
    <Canvas Width="100" Height="100">
        <Border Width="100" Height="100">
            <Border.Background>
                <LinearGradientBrush MappingMode="Absolute" StartPoint="-10,10" EndPoint="10,0" SpreadMethod="Pad">
                    <GradientStop Color="Blue" Offset="4"/>
                    <GradientStop Color="Red"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Polyline Points="0,0 10,10 50,10 90,60" Stroke="Black" StrokeThickness="4"/>
    </Canvas>
</StackPanel>

2. 分离背景与上层元素的渲染层级 #

用Grid代替Canvas作为容器，因为Grid会更清晰地处理元素的渲染层级，避免背景渐变的异常计算影响到上层元素：

<StackPanel Orientation="Vertical">
    <Grid Width="100" Height="100">
        <Border Width="100" Height="100">
            <Border.Background>
                <LinearGradientBrush MappingMode="Absolute" StartPoint="-10,10" EndPoint="10,0" SpreadMethod="Repeat">
                    <GradientStop Color="Blue" Offset="4"/>
                    <GradientStop Color="Red"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Polyline Points="0,0 10,10 50,10 90,60" Stroke="Black" StrokeThickness="4"/>
    </Grid>
    <Canvas Width="100" Height="100">
        <Border Width="100" Height="100">
            <Border.Background>
                <LinearGradientBrush MappingMode="Absolute" StartPoint="-10,10" EndPoint="10,0" SpreadMethod="Pad">
                    <GradientStop Color="Blue" Offset="4"/>
                    <GradientStop Color="Red"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Polyline Points="0,0 10,10 50,10 90,60" Stroke="Black" StrokeThickness="4"/>
    </Canvas>
</StackPanel>

3. 升级项目目标版本 #

这个Bug在Windows 10 1809（十月更新）及以后的版本中已经被微软修复，如果你的项目可以兼容更高版本的Windows 10，升级目标版本到17763或更高，就能直接解决这个问题。

内容的提问来源于stack exchange，提问作者Leandro Alsina