Question

I am trying to make a long ListBox with each ListBoxItem being a tile with a small 100×100 logo inside it. Right now it’s very slow – using more than 5-6 seconds just to become responsive. Since the images are downloaded from the web async (and each one is stored inside each own model instance), I don’t know how to check when they have all downloaded either (i.e. no progress indicator to cover the delay).

Do you have any idea as to how I can do this in the most effective way possible?

XAML:

                 <ListBox>
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>

                    <ListBox.Template>
                        <ControlTemplate>
                            <ItemsPresenter />
                        </ControlTemplate>
                    </ListBox.Template>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <ListBoxItem>
                                    <Grid Name="ChannelTile" Tap="ChannelTile_Tap">
                                        <Rectangle Fill="{StaticResource LightGrayColor}" />
                                        <Image Style="{StaticResource Tiles_Image}" Source="{Binding Image}" />
                                    </Grid>
                                </ListBoxItem>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Answer 1

If you reference the images in binding (Source={Binding Image}) by URL, try using the LowProfileImageLoader from PhonePerformance (http://nuget.org/packages/PhonePerformance)