Question

这是我的问题：

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

请查看下面的代码示例。

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

关于问题的可能理论：

我确实想知道子像素渲染是否会因为使用两种颜色而导致问题，这两种颜色可能导致连接处的各个子像素点亮相反。但我怀疑这是因为如果它是亚像素，如果你在屏幕周围移动窗口，因为与物理屏幕像素的对齐方式发生了变化，它很可能会闪烁，这对我来说似乎并没有。
应用扩展设置导致的问题。但我尝试了125％和100％并且两者都有同样的问题。
渲染管道中的某个错误。 WPF，或直接x可能。

我真的没有找到任何令人信服的想法，所以我仍然有兴趣看看是否有其他人想出了一个真正的理由。

StackPanel内的彩色TextBlocks之间的神秘线

2 个答案: