LongListSelector spacing between items - silverlight

Question

I have a LongListSelector which is populated with some items. Each item has a submenu which can be visible or collapsed using a sliding animation. The problem is the spacing between the items, which should be 0. But when I use the sliding animation a couple of times, the spacing is sometimes a few pixels. When you scroll way down and back up the list will rerender and the spacing is gone.
Here are some screenshots, don't mind the ugly colours, I used them to keep the different elements apart from eachother. Purple is background color if the longlistselector. Each item has a red 1px border.
This is how it should be:
And when I clicked the show/hide button a few times:
And here is my code:
LongListSelector:
<phone:LongListSelector x:Name="LongList" Margin="0" Padding="0" ItemsSource="{Binding Items}"
HorizontalAlignment="Stretch" Background="DarkOrchid">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- 1st ROW -->
<Border BorderBrush="Red" Background="DarkKhaki" BorderThickness="1" HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Test Item" FontSize="42" />
<Button Content="v" Grid.Column="1" Tap="Button_Tap" Tag="{Binding}">
<i:Interaction.Triggers>
<ec:DataTrigger Binding="{Binding SubMenuIsVisible}" Value="True">
<eim:ControlStoryboardAction ControlStoryboardOption="Play">
<eim:ControlStoryboardAction.Storyboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Grid.Height)"
Storyboard.TargetName="Submenu"
From="0" To="60" Duration="0:0:0.25" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Submenu"
Storyboard.TargetProperty="(Grid.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</eim:ControlStoryboardAction.Storyboard>
</eim:ControlStoryboardAction>
</ec:DataTrigger>
<ec:DataTrigger Binding="{Binding SubMenuIsVisible}" Value="False">
<eim:ControlStoryboardAction ControlStoryboardOption="Play">
<eim:ControlStoryboardAction.Storyboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Grid.Height)"
Storyboard.TargetName="Submenu"
From="60" To="0" Duration="0:0:0.25" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Submenu"
Storyboard.TargetProperty="(Grid.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.25">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</eim:ControlStoryboardAction.Storyboard>
</eim:ControlStoryboardAction>
</ec:DataTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</Border>
<!-- SUB Menu -->
<Border x:Name="Submenu" Grid.Row="1" Background="Green" HorizontalAlignment="Stretch" Height="0">
<TextBlock Text="SubMenu" FontSize="42" />
</Border>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
EDIT:
I suspect this problem has something to do with performance issues. I posted a new question for this, you can find it here:
Slow storyboard animation inside LongListSelector

Answer 1

The LongListSelector likes putting arbitrary padding/margins/overlap on stuff without any actual reason. I've found that using a ListBox is typically a more stable and less headachey-prone solution.
I can't see an obvious solution except maybe trying a StackPanel instead of a Grid with an Auto height.