CODEWITHSUNDEEP
silverlightxamlwindows-phonewindows-phone-8
Seva Alekseyev
Seva Alekseyev

Reputation: 61396

XAML: rogue gap between two Lines in a StackPanel

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.

Upvotes: 1

Views: 507

Answers (1)

Chris W.
Chris W.

Reputation: 23290

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

Upvotes: 3

Related Questions