LongListSelector 项目之间的间距

Question

我有一个 LongListSelector，其中填充了一些项目。每个项目都有一个子菜单，可以使用滑动动画显示或折叠。问题是项目之间的间距，应该是0。但是当我使用滑动动画几次时，间距有时是几个像素。当您向下滚动并向后滚动时，列表将重新呈现，并且间距消失了。

这里有一些截图，不要介意难看的颜色，我用它们来区分不同的元素。如果 longlistselector，紫色是背景颜色。每个项目都有一个红色的 1px 边框。

应该是这样的：

当我点击了几次显示/隐藏按钮时：

这是我的代码：

长列表选择器：

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

编辑： 我怀疑这个问题与性能问题有关。我为此发布了一个新问题，您可以在这里找到它：

Slow storyboard animation inside LongListSelector

Answer 1

LongListSelector 喜欢在没有任何实际原因的情况下将任意填充/边距/重叠放在东西上。我发现使用 ListBox 通常是一种更稳定且不那么令人头疼的解决方案。

除了尝试使用 StackPanel 而不是具有自动高度的网格之外，我看不到明显的解决方案。