UWP垂直渐变分隔线问题：不同宽度显示异常求助

嘿，我来帮你搞定这个LinearGradientBrush绘制垂直分隔线的问题！你提到只有5px宽度的分隔线显示正常，其他宽度都异常，这大概率是WPF渐变渲染的坐标系和像素对齐逻辑在搞鬼。

问题根源 #

默认情况下，LinearGradientBrush的MappingMode是RelativeToBoundingBox——也就是说渐变的起始/结束位置是元素边界框的百分比。当分隔线宽度太小（比如1px）或者宽度值和渐变步长不匹配时，WPF的抗锯齿、子像素渲染就会让渐变显示得乱七八糟；而5px刚好是个临界值，让渐变的步长刚好和像素网格对齐，所以显示正常。

修复方案 #

下面给你几种靠谱的解决办法，按需选择：

1. 用绝对像素定义渐变（最推荐） #

把MappingMode设为Absolute，这样渐变的位置就固定为像素值，不管分隔线宽度怎么变，渐变效果都能保持一致。完美适配你“顶部带固定高度渐变的1px垂直分隔线”的需求：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10"/> <!-- 任意宽度都能正常显示 -->
    </Grid.ColumnDefinitions>
    <!-- 用Border做分隔线容器 -->
    <Border SnapsToDevicePixels="True">
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" MappingMode="Absolute">
                <GradientStop Color="#FF000000" Offset="0"/> <!-- 顶部起始颜色 -->
                <GradientStop Color="#00000000" Offset="5"/> <!-- 渐变到5px高度完全透明 -->
                <GradientStop Color="#00000000" Offset="1"/> <!-- 剩余区域保持透明 -->
            </LinearGradientBrush>
        </Border.Background>
    </Border>
</Grid>

这里加了SnapsToDevicePixels="True"，能强制元素对齐像素网格，避免模糊。

2. 用Border的BorderBrush实现分隔线（更贴合场景） #

如果你要的就是垂直分隔线，直接用Border的BorderThickness来定义1px的线，再把BorderBrush设为渐变，逻辑更清晰：

<Border BorderThickness="0,0,1,0" SnapsToDevicePixels="True">
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" MappingMode="Absolute">
            <GradientStop Color="#FF000000" Offset="0"/>
            <GradientStop Color="#00000000" Offset="5"/>
            <GradientStop Color="#00000000" Offset="1"/>
        </LinearGradientBrush>
    </Border.BorderBrush>
</Border>

这种方式下，不管Border的宽度是10px还是20px，右边的1px分隔线都会保持顶部5px的渐变效果，精准又省心。

3. 相对坐标系下对齐像素（动态高度场景用） #

如果你的分隔线高度是动态变化的，想要渐变高度占总高度的固定比例，可以调整Offset为百分比值，确保和像素对齐：

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="#FF000000" Offset="0"/>
    <GradientStop Color="#00000000" Offset="0.25"/> <!-- 假设渐变占总高度的25% -->
    <GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>

但这种方式只适合渐变高度随元素高度变化的场景，如果你要固定高度的渐变，还是前两种方法更靠谱。

小提示 #

可以打开WPF的调试工具（比如Visual Studio的Live Visual Tree），实时查看渐变的渲染情况，帮助你快速定位问题。

内容的提问来源于stack exchange，提问作者François BOURLIEUX