GridView and Virtualizing Stackpanel to display a grid of items

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 | .....


        <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}}"
        ItemTemplateSelector="{StaticResource CellStyleSelector}"
        ItemClick="ItemView_ItemClick"            
        IsItemClickEnabled="True"
        SelectionMode="Extended"
        SelectionChanged="ItemView_SelectionChanged"
        IsSwipeEnabled="true">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>

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.

Thank you

It looks like the default ItemsPanel of GridView itself is virtualizing. So this question itself is invalid. It looks like Virtualization can get broken due to other conditions (such as grouping etc) — rydgaze, Jul 24 '13 at 21:15

score 1 · Answer 1 · answered Jul 24 '13 at 05:22

1

I think you are doing UI virtualization by implementing your data source to interface ISupportIncrementalLoading. Try WrapGrid, and set MaximumRowsOrColumns.

<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}}"
    ItemTemplateSelector="{StaticResource CellStyleSelector}"
    ItemClick="ItemView_ItemClick"            
    IsItemClickEnabled="True"
    SelectionMode="Extended"
    SelectionChanged="ItemView_SelectionChanged"
    IsSwipeEnabled="true">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

answered Jul 24 '13 at 05:22

Farhan Ghumra

15,180
6
50
115

Thank you Xyroid. My datasource is actually retrieved in one shot (the actual XML data is not very large to be retrieved but the number of elements could be 1000 and the elements will do lazy load when they are displayed (like retrieve thumb image asynchronously). So my understanding was to use virtualizingStackPanel to display the grid. – rydgaze Jul 24 '13 at 05:35
1

`VirtualizingStackPanel` will not provide UI virtualization. see this for it.[ISupportIncrementalLoading : Loading a subsets of Data](http://blogs.msdn.com/b/devosaure/archive/2012/10/15/isupportincrementalloading-loading-a-subsets-of-data.aspx) & [Metro: Incrementally load GridView and ListView with ISupportIncrementalLoading](http://www.silverlightplayground.org/post/2012/06/10/Metro-Incrementally-load-GridView-and-ListView-with-ISupportIncrementalLoading.aspx) – Farhan Ghumra Jul 24 '13 at 06:35
Thank you. Let me check those links! – rydgaze Jul 24 '13 at 13:43

GridView and Virtualizing Stackpanel to display a grid of items

1 Answers1