locked
Problem with GridView virtualization in VS for Consumer Preview

    Question

  • I am currently having a problem with data virtualization (and I suspect container virtualization) when using the default templates for Metro style applications in Visual Studio 11 on the Windows 8 consumer preview.

    If you add an "Items Page" template to a Metro style application, it generates the following code

    <!-- Horizontal scrolling grid used in most view states -->
    <ScrollViewer
         x:Name="itemGridScrollViewer"
         AutomationProperties.AutomationId="GridScrollViewer"
         Grid.Row="1"
         Margin="0,-4,0,0"
         Style="{StaticResource HorizontalScrollViewerStyle}">
    
         <GridView
              x:Name="itemGridView"
              AutomationProperties.AutomationId="ItemsGridView"
              AutomationProperties.Name="Items"
              Margin="116,0,116,46"
              ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
              ItemTemplate="{StaticResource Standard250x250ItemTemplate}"/>
    </ScrollViewer>

    Note that there is a ScrollViewer wrapping the GridView (rather than using the ScrollViewer that is part of the GridView template) and the Margin is applied directly to the GridView. This ensures that the first column of items is offset the desired amount for the left-hand margin, but when scrolled will fill the full width of the screen. Unfortunately this breaks the data virtualization of the WrapGrid that is used to display the items (and I suspect any container virtualization also). The WrapGrid always passes through the layout engine will maximum available width so it lays out all item containers.

    Alternatively if you modify the template to,

    <!-- Horizontal scrolling grid used in most view states -->
    
    <GridView Grid.Row="1"
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        Padding="116,0,116,46"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"/>

    Now data virtualization works correctly (since we are using the ScrollViewer built into the GridView template - the WrapGrid is the direct child of this so the ScrollViewer knowns that WrapGrid implements IScrollInfo to handle the virtualization). However, now the items are clipped to the central area of the screen defined by the padding, and do not stretch across the whole width when scrolling.

    Has anyone else had problems with this new behaviour (the templates worked as in the second example with the Developer Preview)? Does anyone know a workaround that would allow both data virtualization and the correct layout to occur?

    Thanks,

        Andrew Wilkinson

    Sunday, March 11, 2012 3:08 PM

Answers

  • Hi Andy and John,

    This is a known limitation with the Consumer Preview and we are actively working on addressing it. Unfortunately in order to achieve the user experience we were looking to achieve, the GridViews and ListViews in the templates will not be virtualized in many cases. You have identified the first case with margins.
    This will also occur on the GroupDetail page as the layout has a section of header content that scrolls with the list of items.  There are no workarounds that will achieve the identical UI as well as enable virtualization for the Consumer Preview.  We should have a fix for this in the next public release.

    Thanks,
    Jeff Ferman
    Program Manager
    Visual Studio XAML Designer




    Monday, March 12, 2012 6:32 PM
  • According to the release notes for the Windows 8 Release Preview, and here,

    "The templates now support virtualization by default.  GridView and ListView now take advantage of a header region allowing the bound items to be virtualized.  In addition, the landing page for the GridApp now supports only showing a subset of items, rather than the entire collection allowing for better performance."

    I've also heard reports from users of my Cocoon framework that virtualization is working correctly with the new templates (NB: You need to use the new templates in VS2012 to take advantage of this)

    Andy


    Tuesday, June 05, 2012 9:31 AM

All replies

  • I do have a semi-working solution, though it seems to be slightly broken in the Consumer Preview.

    I stretched the GridView across the entire horizontal extent of the screen, and then used Blend to edit the GridViews ItemsPanel template - which is a wrappanel - and applied a left-side border too it.

    Now, this solution works perfectly fine with a ListBox for example, but in this particularly case there seems to be a small bug where with GridViews wjere, unless you're using touch interaction, it will not show items over the border, and clips them instead - which is broken behaviour. If that gets fixed, that should be your solution. (It works when your finger is on the screen scrolling, and it shows items going across the full extent of the screen - but take your finger off and it clips them where the border original was :/ )

    Monday, March 12, 2012 1:21 AM
  • Hi Andy and John,

    This is a known limitation with the Consumer Preview and we are actively working on addressing it. Unfortunately in order to achieve the user experience we were looking to achieve, the GridViews and ListViews in the templates will not be virtualized in many cases. You have identified the first case with margins.
    This will also occur on the GroupDetail page as the layout has a section of header content that scrolls with the list of items.  There are no workarounds that will achieve the identical UI as well as enable virtualization for the Consumer Preview.  We should have a fix for this in the next public release.

    Thanks,
    Jeff Ferman
    Program Manager
    Visual Studio XAML Designer




    Monday, March 12, 2012 6:32 PM
  • Hi Jeff,

    Thanks for the information. If this is a known issue then I'll continue with my coding/testing of virtualization with the strange looking margin, and aim to update this to the final UX before release.

    Regards,

        Andrew

    Tuesday, March 13, 2012 10:34 AM
  • Sir, is it Fixed in Release Preview?

    please

    • Proposed as answer by Jhoon_swish Tuesday, June 19, 2012 5:48 AM
    • Unproposed as answer by Jhoon_swish Tuesday, June 19, 2012 5:48 AM
    Tuesday, June 05, 2012 5:21 AM
  • According to the release notes for the Windows 8 Release Preview, and here,

    "The templates now support virtualization by default.  GridView and ListView now take advantage of a header region allowing the bound items to be virtualized.  In addition, the landing page for the GridApp now supports only showing a subset of items, rather than the entire collection allowing for better performance."

    I've also heard reports from users of my Cocoon framework that virtualization is working correctly with the new templates (NB: You need to use the new templates in VS2012 to take advantage of this)

    Andy


    Tuesday, June 05, 2012 9:31 AM