CODEWITHSUNDEEP
c#wpfxaml
Een Amok
Een Amok

Reputation: 117

Mysterious line between colored TextBlocks inside a StackPanel

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

Upvotes: 1

Views: 211

Answers (2)

Simon P Stevens
Simon P Stevens

Reputation: 27509

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>

Image without the incorrect lines between textboxes

Possible theories on what the problem could be:

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

  2. A problem caused by app scaling settings. But I tried it at 125% and 100% and had the same issue with both.

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

Upvotes: 1

Moslem Shahsavan
Moslem Shahsavan

Reputation: 1337

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?

Upvotes: 3

Related Questions