Enabling virtualization in Win 8.1 Gridview with Grouping

Question

I have been trying to reduce the load time of a page that contains this gridview, As per MS documentation http://msdn.microsoft.com/en-US/library/windows/apps/xaml/hh780657.aspx ,you will not get virualization if you use Grouping. Does anyone knows how to do this?

<CollectionViewSource x:Name="serviceViewSource" Source="{Binding PageData}" IsSourceGrouped="True" ItemsPath="Contents" />


<GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        ScrollViewer.IsHorizontalScrollChainingEnabled="False"
        TabIndex="1"
        Padding="120,0,0,50"
        ItemsSource="{Binding Source={StaticResource serviceViewSource}}"
        SelectionMode="Multiple"
        IsSwipeEnabled="True"
        IsItemClickEnabled="True"
        IsEnabled="{Binding IsGridViewEnabled}"
        CanReorderItems="False" CanDragItems="False" Grid.Row="1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ShowsScrollingPlaceholders="True"
        common:GridViewItemClickedCommand.Command="{Binding ItemClickedCommand}" ItemTemplateSelector="{StaticResource gridViewTemplateSelector}"
        >

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"  HorizontalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.GroupStyle>
                <GroupStyle HidesIfEmpty="True">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid x:Name="headerGrid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="90*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Button x:Name="headerButton" Content='{Binding Name}' Background="Transparent" Foreground="AliceBlue" BorderThickness="0" Command="{Binding DataContext.HeaderCommand, ElementName=pageRoot}"

                                       IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" CommandParameter="{Binding HeaderIdentifier}" FontFamily="Global User Interface" />
                                <ProgressRing Grid.Column="1" IsActive="{Binding LoadingData}" />
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>

                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">

                            <Setter Property="BorderBrush" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="1"/>

                            <Setter Property="HorizontalAlignment" Value="Stretch"/>
                            <Setter Property="VerticalAlignment" Value="Stretch"/>
                        </Style>
                    </GroupStyle.ContainerStyle>

                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>

                            <VariableSizedWrapGrid Margin="0,0,80,0">

                            </VariableSizedWrapGrid>

                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

Answer 1

In Windows 8.1 using the GridView with defaults will use the ItemsWrapGrid as the panel and this does group virtualization for you. Using a StackPanel as you have your code will not get UI virtualized.