StackPanel 内彩色文本块之间的神秘线

Question

这是我的问题：

当我创建一个 StackPanel 并在其中添加两个或多个具有不同背景颜色的 TextBlock 时，有时会有一条奇怪的细线将它们分开。我想知道可能是什么原因以及如何解决它？

请看下面的代码示例。

<Grid x:Name="Grid" d:LayoutOverrides="LeftPosition, RightPosition" Margin="4">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <StackPanel x:Name="StackPanel1" Grid.Column="0" Margin="0,0,0.5,0">
        <TextBlock x:Name="textBlock1" Background="#FF3C2C30" Foreground="{x:Null}" Height="60"/>
        <TextBlock x:Name="textBlock2" Background="#FF303646" Foreground="{x:Null}" Height="60"/>
        <TextBlock x:Name="textBlock3" Background="#FF3C2C30" Foreground="{x:Null}" Height="60"/>
        <TextBlock x:Name="textBlock4" Background="#FF303646" Foreground="{x:Null}" Height="60"/>
        <TextBlock x:Name="textBlock5" Background="#FF3C2C30" Foreground="{x:Null}" Height="60"/>
    </StackPanel>
    <StackPanel x:Name="StackPanel2" Grid.Column="1" Margin="0.5,0,0,0">
        <TextBlock x:Name="textBlock6" Background="#FF303646"  Foreground="{x:Null}" Height="42.9"/>
        <TextBlock x:Name="textBlock7" Background="#FF3C2C30" Foreground="{x:Null}" Height="42.9"/>
        <TextBlock x:Name="textBlock8" Background="#FF303646" Foreground="{x:Null}" Height="42.9"/>
        <TextBlock x:Name="textBlock9" Background="#FF3C2C30" Foreground="{x:Null}" Height="42.9" />
        <TextBlock x:Name="textBlock10" Background="#FF303646" Foreground="{x:Null}" Height="42.9"/>
        <TextBlock x:Name="textBlock11" Background="#FF3C2C30" Foreground="{x:Null}" Height="42.9"/>
        <TextBlock x:Name="textBlock12" Background="#FF303646" Foreground="{x:Null}" Height="42.9"/>
    </StackPanel>
</Grid>

下图显示了输出。我希望右侧的 TextBlocks 像左侧的一样链接。

output : unknwown separator spaces

Answer 1

在您的根元素上将 UIElement.SnapsToDevicePixels 属性设置为 true，以在整个 UI 中启用像素捕捉渲染。

<StackPanel x:Name="StackPanel2" Grid.Column="1" Margin="0.5,0,0,0" SnapsToDevicePixels="True">

更多 What does SnapsToDevicePixels in WPF mean in layman terms?

Answer 2

编辑：我更喜欢MK7's answer。如果它适合你，我建议你改用他的建议。

---

这很有趣。我不确定是什么原因造成的，但一个似乎可行的简单修复方法是对每个文本框应用一个小的负上边距或下边距，以便它们非常轻微地重叠。

    <StackPanel x:Name="StackPanel2" Grid.Column="1" Margin="0">
        <TextBlock Background="#FF303646" Height="42" Margin="0,0,0,-1" />
        <TextBlock Background="#FF3C2C30" Height="42" Margin="0,0,0,-1" />
        <TextBlock Background="#FF303646" Height="42" Margin="0,0,0,-1" />
        <TextBlock Background="#FF3C2C30" Height="42" Margin="0,0,0,-1" />
        <TextBlock Background="#FF303646" Height="42" Margin="0,0,0,-1" />
        <TextBlock Background="#FF3C2C30" Height="42" Margin="0,0,0,-1" />
        <TextBlock Background="#FF303646" Height="42" Margin="0,0,0,-1" />
    </StackPanel>

关于问题可能是什么的可能理论：

1. 我确实想知道子像素渲染是否会由于使用两种颜色而导致问题，这可能会导致连接处的单个子像素被相反地照亮。但我怀疑是不是这样，因为如果它是子像素，如果你在屏幕周围移动窗口，因为与物理屏幕像素的对齐发生了变化，它很可能会闪烁，这对我来说似乎不是。

2. 应用缩放设置导致的问题。但我在 125% 和 100% 下都试过了，两者都有同样的问题。

3. 渲染管道中某处的错误。 WPF，或者直接 x 可能。

不过，我真的不觉得这些想法中的任何一个令人信服，所以我仍然有兴趣看看其他人是否提出了真正的理由。