Mysterious line between colored TextBlocks inside a StackPanel

Question

Here is my issue :

When I create a StackPanel and add two or more TextBlocks inside with different background colors, sometimes there's a curious fine line which separates them. I wonder what might be the cause and how to fix it ?

Look at the code below for an example.

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

The image below shows the output. I would like the TextBlocks on the right side to be linked like those on the left.

output : unknwown separator spaces

score 3 · Accepted Answer · edited May 23 '17 at 11:54

3

Set UIElement.SnapsToDevicePixels Property to true on your root element to enable pixel snap rendering throughout the UI.

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

for more What does SnapsToDevicePixels in WPF mean in layman terms?

edited May 23 '17 at 11:54

Community

1
1

answered Apr 09 '17 at 05:52

Moslem Shahsavan

1,211
17
19

Thank you too for your help. I don't know how, but this property works perfectly. I will look at the link you added. – Een Amok Apr 09 '17 at 19:53
Nice. I much prefer your answer to mine. – Simon P Stevens Apr 13 '17 at 19:34
I just noticed that this property may also be directly added to a control via the property window. SnapsToDevicePixels is located in the drop-down area just below Appearance. – Een Amok Apr 14 '17 at 14:14

score 1 · Answer 2 · edited May 23 '17 at 12:02

Edit: I much prefer MK7's answer to mine. If it works for you I recommend you go with his suggestion instead.

That's pretty interesting. I'm not sure what causes it, but a simple fix that seems to work is to apply a small negative top or bottom margin to each text box so they overlap very slightly.

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

Possible theories on what the problem could be:

I did wonder if sub pixel rendering causing a problem due to using two colours that may result in individual sub pixels at the join being lit opposite. But I doubt this is it because if it was sub pixels it would most likely flicker if you moved the window around the screen as the alignment with the physical screen pixels changed, and this didn't seem to for me.
A problem caused by app scaling settings. But I tried it at 125% and 100% and had the same issue with both.
A bug in the rendering pipeline somewhere. WPF, or direct x maybe.

I don't really find any of these ideas that compelling though, so I'd still be interested to see if anyone else comes up with an actual reason.

This method works very well in my case, only concerns that the total height of the TextBlocks is reduced. But this is not too annoying. As you mentioned, I also noticed that the change of scale is affecting the problem and I did think about a bug too. Sometimes I managed to solve it by changing the double values of the heights to int. — Een Amok, Apr 09 '17 at 00:32
@EenAmok If you need the total height of the stack panel to be the same, just add one to the height of each text box to counterbalance the offset margin. — Simon P Stevens, Apr 13 '17 at 19:30
I just tried it and it works very well. The initial height of the TextBlocks appears to be retained and the overall height remains the same. About the zoom of the working environment, I noticed that the compilation only takes into account the scale at 100%. So when I work at 100% and I have no problem, I think I can ignore the small spaces that may appear when I change scale. — Een Amok, Apr 14 '17 at 14:12

Mysterious line between colored TextBlocks inside a StackPanel

2 Answers2

Linked