WrapPanel Performance

Dec 29, 2014 at 1:40 AM
Good evening.

I love WrapPanel. I use it in a lot of apps and my most important feature (the reason I use it) it's because it can layout items with different sizes sequentially, like we require in "real life", unlike the stock WinRT controls.

However, there are some scenarios where using a lot of WrapPanels can make the app crash (the error message is "Layout cycle detected. Layout could not complete." and "A cycle occurred while laying out the GUI."). Now, I know that these crashes happen in some heavy scenarios (I get it) and maybe the stock controls crash too (or the reason for the crash is not directly related to the WrapPanel), but I am asking for help anyway.

My current example where the WrapPanels fails is: a ListView which has 400+ items and each one of them has a GridView layed out with a WrapPanel in it's ItemsPanelTemplate that may contain from 1 to 6 items (both ItemTemplates are pretty basic otherwise, i.e., they only contain labels and borders). Here's the XAML:
<DataTemplate x:Key="StopDataTemplate">
    <Border BorderThickness="1"
            BorderBrush="Black"
            Background="White"
            Margin="0,0,0,10">
        <StackPanel Orientation="Vertical"
                    Width="470">
            <Border Padding="10,5">
                <TextBlock Text="{Binding stop_name}"
                           FontSize="20"
                           Height="30"
                           Foreground="Black"
                           VerticalAlignment="Center"
                           FontWeight="Light" />
            </Border>
            <Border Padding="10,5">
                <GridView ItemsSource="{Binding _routesDistinct}">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Border Padding="5"
                                    Margin="10,0,0,0"
                                    Background="{Binding route_short_name, Converter={StaticResource RouteCategoryColorConverter}}">
                                <TextBlock Text="{Binding route_short_name, Converter={StaticResource RouteCategoryTextConverter}}"
                                           Foreground="White" />
                            </Border>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <controls:WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </Border>
            <Button Background="{StaticResource CPColor}"
                    BorderThickness="0,1,0,0"
                    BorderBrush="Black"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch"
                    Command="{StaticResource StopClickCommand}"
                    CommandParameter="{Binding}">
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="50" />
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Uid="ViewRoutesAndNextTrips"
                               Margin="10"
                               FontSize="20"
                               TextAlignment="Left"
                               TextWrapping="Wrap"
                               FontWeight="Light" />
                    <Border Grid.Column="1"
                            Width="49"
                            VerticalAlignment="Stretch"
                            HorizontalAlignment="Right"
                            BorderBrush="Black"
                            BorderThickness="1,0,0,0">
                        <Image Source="/Assets/Map-Location.png"
                               Stretch="None" />
                    </Border>
                </Grid>
            </Button>
        </StackPanel>
    </Border>
</DataTemplate>
Can anything be done about it? (please don't suggest using other controls because I really need WrapPanel's ability to display different-sized items)

Thank you.
Coordinator
Jan 16, 2015 at 12:18 PM
Can you provide a sample app to reproduce this? Have you tried to disable recycle elements while virtualizing the list?
Jan 16, 2015 at 9:17 PM
Good evening.

I am sorry but replicating the core functionality in a blank app doesn't make it crash. I've even started removing stuff on my real app and both app pages are now practically the same (just without navigation): the real one still crashes and the sample one doesn't.

Anyway, how can I achieve your suggestion to "disable recycle elements while virtualizing the list"?

Thank you.