Question

Windows Phone 8, XAML. I have two stretched Line objects in a horizontal StackPanel next to one another. There’s no left or right margin in either of those. Yet there’s a clearly visible gap between them. The XAML goes:

<StackPanel x:Name="Root" Orientation="Horizontal">

    <Line
        x:Name="LHLine11"
        Margin="0,50,0,0"
        Stretch="Fill"
        Width="10"
        X1="0" X2="1" Y1="0" Y2="0"
        StrokeThickness="1"
        VerticalAlignment="Top"
        Stroke="{StaticResource PhoneButtonBasePressedForegroundBrush}"
        />

    <Line
        x:Name="LHLine1"
        Margin="0,50,0,0"
        Stretch="Fill"
        Width="10"
        X1="0" X2="1" Y1="0" Y2="0"
        StrokeThickness="1"
        VerticalAlignment="Top"
        Stroke="{StaticResource PhoneButtonBasePressedForegroundBrush}"
        />
   </StackPanel>

How come?

In case you’re wondering why don’t I make a single, longer line: this is a minimal example that demonstrates the behavior.

Answer 1

I can’t explain as to WHY there’s apparently a 1 pixel gap when you use the Line element, it seems to be distinct to just that, perhaps an inane bug in the measuring method? A couple quick little workarounds though would be to add a -1 margin to the connecting side of one of the lines. Or you could just replace them with Rectangles instead and accomplish the same thing without the 1 pixel gap.

<StackPanel Orientation="Horizontal">
    <Rectangle Height="1" Fill="Blue" Width="50"/>
    <Rectangle Height="1" Fill="Red" Width="50"/>
</StackPanel>

Hopefully this is at least somewhat helpful. Cheers