Question

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

这里有一些截图，不介意丑陋的颜色，我用它们来保持不同元素彼此分开。如果是longlistselector，紫色是背景颜色。每个项目都有一个红色的1px边框。

应该是这样的：

good

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

bad2

这是我的代码：

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>

修改我怀疑这个问题与性能问题有关。我发布了一个新问题，你可以在这里找到它：

Slow storyboard animation inside LongListSelector

Answer 1

LongListSelector喜欢在没有任何实际原因的情况下在任何内容上添加任意填充/边距/重叠。我发现使用ListBox通常是一个更稳定，更少头痛的解决方案。

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

项之间的LongListSelector间距

1 个答案: