UWP垂直分离器，带梯度

Question

我尝试在我的xaml代码中使用LinearGradientBrush在顶部绘制一个带有渐变的 1px 垂直分隔符。但是在我的样本中，根据线条的宽度，我会得到不同的结果。我不明白为什么...... 有人能帮助我吗？

最终结果

以下是我的示例代码。 对于每一行，它是相同的梯度定义。只有宽度改变了。 5px线似乎没问题，另外两个看起来不对。

<Grid>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="10"/>
    <!-- first separator -->
    <ColumnDefinition Width="1"/>
    <ColumnDefinition Width="10" />
    <!-- second -->
    <ColumnDefinition Width="2"/>
    <ColumnDefinition Width="10" />
    <!-- tird-->
    <ColumnDefinition Width="5"/>
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <Grid Grid.Column="0" Background="White"/>

  <Grid Grid.Column="1">
    <Grid.RowDefinitions>
      <RowDefinition Height="100"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
      <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="#FFFFFF" Offset="0.25"/>
          <GradientStop Color="#FF0000" Offset="1"/>
        </LinearGradientBrush>
      </Grid.Background>
    </Grid>
    <StackPanel Grid.Row="1" Background="#FF0000"/>
  </Grid>

  <Grid Grid.Column="2" Background="White"/>

  <Grid Grid.Column="3">
    <Grid.RowDefinitions>
      <RowDefinition Height="100"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
      <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="#FFFFFF" Offset="0.25"/>
          <GradientStop Color="#FF0000" Offset="1"/>
        </LinearGradientBrush>
      </Grid.Background>
    </Grid>
    <StackPanel Grid.Row="1" Background="#FF0000"/>
  </Grid>

  <Grid Grid.Column="4" Background="White"/>

  <Grid Grid.Column="5">
    <Grid.RowDefinitions>
      <RowDefinition Height="100"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
      <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="#FFFFFF" Offset="0.25"/>
          <GradientStop Color="#FF0000" Offset="1"/>
        </LinearGradientBrush>
      </Grid.Background>
    </Grid>
    <StackPanel Grid.Row="1" Background="#FF0000"/>
  </Grid>

  <Grid Grid.Column="6" Background="White"/>


</Grid>

也许还有其他方法可以做到这一点？