Windows store app Customise Template inside a ScrollViewer without breaking the UI virtualzation

Question

I am working on a windows store metro style app and I have implemented an endless scrolling GridView on a listing page.

It works until user navigate "BACK" to a listing page with large amount of records. e.g. They have previously scroll to page 100.

I currently have code like this

    <ScrollViewer>
      <StackPanel>
        <Rectangle Width="100"/> //could be anything
        <ItemsPresenter/>
      </StackPanel>
    </ScrollViewer>

and according to this article, above code will disable the UI virtualzation

if I change it to the following, it works but I lost the padding at start of the list.

    <ScrollViewer>
      <ItemsPresenter/>
    </ScrollViewer>

Basically I want to display something before the list starts and it needs to be part of the scrollable viewport, so it can be scrolled away.

Answer 1

Try adding a Margin to the ItemsPresenter:

<ItemsPresenter Margin="100,0,0,0"/> for a left space (though it looks like you're doing a top space...)

<ItemsPresenter Margin="0,100,0,0"/>