Scrolling issue in LongListSelector with items of variable height

Question

I have a LongListSelector where each item can contain variable number of images and hence can be of different height. Here's my XAML:

<phone:LongListSelector x:Name="Views" ItemsSource="{Binding}">
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Imgs}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Background="#44AAAAAA" Margin="10,0,10,10">
                                <Image Source="{Binding photo.Source}" Stretch="UniformToFill"
                                    Height="{Binding Converter={StaticResource ScaleHeight}, Path=photo}" />
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

The problem is while scrolling such LongListSelector when I come across a long item, the scroll position suddenly jumps a few items forward/backward (depending of scroll direction).

I suspect this has something to do with virtualization but I don't know how this can be fixed. Any suggestions?

Answer 1

You should use the Grouped version of the LongListSelector with an empty header, like this you will not have items with such different Height.