Windows 8 Xaml Slow VariableSizedWrapGrid

Question

I am using a GridView with a template selector and passing the item source in the code behind. The problem with this is that the VariableSizedWrapGrid is really slow, the collection passed being about 80 items big (collection is composed of a few strings). Removing the variableSizedWrapGrid solves the issue but leaves me with large gaps between the templates having smaller width.

here is the GridView:

    <SemanticZoom x:Name="Zoom" Grid.Row="1" IsZoomedInViewActive="False" ViewChangeStarted="Zoom_ViewChangeStarted_1" IsZoomOutButtonEnabled="False" Margin="0,0,0,29" Grid.RowSpan="2">
        <SemanticZoom.ZoomedInView>
            <!-- Horizontal scrolling grid used in most view states -->
            <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        ItemTemplateSelector="{StaticResource DayTemplateSelector}"
        SelectionMode="None"
        IsSwipeEnabled="True"
        ItemContainerStyle="{StaticResource GridViewItemStyle1}"
        ScrollViewer.HorizontalScrollBarVisibility="Auto"
        IsItemClickEnabled="True"
        ScrollViewer.IsHorizontalScrollChainingEnabled="False"
        ItemClick="ItemView_ItemClick">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid ItemWidth="380" ItemHeight="500"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
        </SemanticZoom.ZoomedInView>

And the Template Selector:

     class DayTemplateSelecter : DataTemplateSelector
{
    public DataTemplate DayOffTemplate { get; set; }

    public DataTemplate DutyTemplate { get; set; }

    public DataTemplate RestTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        var templateItem = item as DutyItem;
        var element = container as FrameworkElement;


        if (templateItem.Trip.Count > 0 || templateItem.OtherTrip.Count > 0)
        {
            container.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 2);
                return DutyTemplate;
        }
        else if (templateItem.Codes.Count > 0)
        {
                container.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
                return DayOffTemplate;

        }
        else
        {
            container.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
            return RestTemplate;
        }

    }

}

I didn't think this would have such a large performance difference..just using variableSized would give the page 3 seconds of delay and this is even larger on some low end tablets.

Am I doing it wrong, is there a better way to do this?

Answer 1

VariableSizedWrapGrid unlike WrapGrid doesn't virtualize its items. I would suggest that if you have to show 80 items use WrapGrid or if you have to use VariableSizedWrapGrid reduce amount of items to a more manageable level.