none
GridView and Virtualizing Stackpanel to display a grid of items for non grouped data

    Question

  • I am trying to create a grid containing elements such as

    | 1 | 4 | 7 | 
    | 2 | 5 | 8 | ===> extend
    | 3 | 6 | 9 |
    

    Since the data is very large, I need to use UI virtualization and what I see in most example is the VirtualizingStackPanel

    Here is how I have setup my Gridview in XAML . The problem is that the following code creates a horizontal row of single element (which makes sense given it is just a stack panel).

    | 1 | 2 | 3 | 4 | .....
    

            

        <Page.Resources>

            <!-- Collection of items displayed by this page -->
            <CollectionViewSource
                x:Name="itemsViewSource"
                Source="{Binding Records}"
                />
        </Page.Resources>

    <GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemsGridView" AutomationProperties.Name="Items" TabIndex="1" Grid.RowSpan="3" Padding="116,136,116,46" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ItemTemplate="{{StaticResource EntriesTemplate}}" ItemClick="ItemView_ItemClick" IsItemClickEnabled="True" SelectionMode="Extended" SelectionChanged="ItemView_SelectionChanged" IsSwipeEnabled="true"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> </GridView>


    The entriesTemplate is 

       <DataTemplate x:Key="EntriesTemplate">
            <Grid HorizontalAlignment="Left" Width="400" Height="80" Background="#FFE6E6E6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ThumbImage}" Stretch="UniformToFill" HorizontalAlignment="Center"
                       VerticalAlignment="Center" Grid.Column="0" Margin="5,5,0,5" AutomationProperties.Name="{Binding Title}"/>
    
                <StackPanel Orientation="Vertical" Grid.Column="1" Background="Transparent">
                    <TextBlock Text="{Binding Title}" Foreground="Black" Style="{StaticResource LargeTitleTextStyle}" Margin="20,20,10,0"/>
                    <TextBlock Text="{Binding Subtitle}" Foreground="DarkGray" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="20,10,0,30"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

    How would one go about making it display a grid that extends horizontally using virtualizingstackpanel? I have no groups in my data so all the examples that show virtualizingstackpanel show this ? I am completely new at Windows Store app dev (mostly have been on iOS and Android ) so would appreciate any code sample or resources.

    ==

    I have already looked at creating a dummy group but I notice that the virtualzingstackpanel does not virtualize in the case of grouped data (all data is getting retrieved). 




    • Edited by Rydgaze Wednesday, July 24, 2013 3:45 PM
    Wednesday, July 24, 2013 3:38 PM

Answers

  • By default GridView supports UI Virtualization, so we do not need to do anything until unless you would like to disable it. 

    See this article for details about UI and Data Virtualization. From same link 

    By default, ItemsControl, and the standard controls derived from it, support UI virtualization


    Thanks,
    Sachin
    My Samples

    • Marked as answer by Rydgaze Wednesday, July 24, 2013 9:10 PM
    Wednesday, July 24, 2013 6:54 PM

All replies

  • By default GridView supports UI Virtualization, so we do not need to do anything until unless you would like to disable it. 

    See this article for details about UI and Data Virtualization. From same link 

    By default, ItemsControl, and the standard controls derived from it, support UI virtualization


    Thanks,
    Sachin
    My Samples

    • Marked as answer by Rydgaze Wednesday, July 24, 2013 9:10 PM
    Wednesday, July 24, 2013 6:54 PM
  • Thanks. But when I dont have the virtualizingStackPanel, I see that all collection elements are being accessed so it looks like the GridView is not virtualizing (or I am not setting something up correctly?). If I use the VirtualizingStackPanel, I can see that the collection is getting accessed as I scroll (except that it is in single horizontal row). 

    From the article (which I did read earlier), it only says Virtualization is supported (which I assume I can use virtualizingStackPanel) and it is not clear to me that it is done by default (which I can confirm using instrumetation that it is not virtualizing )

    • Edited by Rydgaze Wednesday, July 24, 2013 7:07 PM Updated reoponse
    Wednesday, July 24, 2013 7:02 PM
  • Well, article also says and I have also observed by default GridView is virtualized. Yes we will see all the elements if they are visible, that is the whole concept of UI virtualization. Something which is not there in screen or visible (depending how viewport is defined), system do not generate the containers for data item. 

    Oh, article clearly mention by default GridView supports UI virtualization. Well my last line in previous reply also says that by default it supports virtualization by default

    However, if you are saying it is not virtualized and you can confirm, can you please let us know how you are confirming it is not virtualized?

    Thanks,
    Sachin
    My Samples



    Wednesday, July 24, 2013 8:06 PM

  • In the collection getter, I have traces when calls come to construct a GridItem.

    If I use VirtualizingStackPanel, I can see calls for only the items on page + few more come in. i.e, the virtualization behavior

    If I don't use VirtualzingStackPanel, I can see calls fro all the items in the collection. 

    I am aware of what UI Virtualization is. The article just mentions it is supported by default, but not enabled by default (which was my earlier point as well). 

    Edit: You are right. It looks like from http://msdn.microsoft.com/en-us/library/windows/apps/hh780650.aspx link, GridView uses WrapGrid as its ItemsPanel and WrapGrid is Virtualizing control. 

    -Marking your answer as the accepted answer. Thanks again for your response



    • Edited by Rydgaze Wednesday, July 24, 2013 9:11 PM update
    Wednesday, July 24, 2013 8:25 PM