0 Comments

Background

The ListBox control in WP7 is a great and easy way to provide long scrolling lists of items, like images and text. It provides you the ability to format the items in your list anyway you want with the help of datatemplates. But it’s missing one functionality: The option to use different datatemplates for items when the ListBox is scrolling compared to the situation where the ListBox is stopped.

Example

Imagine a situation where every item in your ListBox contains items which need to download an image from the net. For example:

    public class Item
    {
        public int Number { get; set; }

        public Uri ImageUri { get; set; }

        public Item(int number, Uri imageUri)
        {
            Number = number;
            ImageUri = imageUri;
        }
    }

And the datatemplate:

            <ListBox x:Name="Items">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Number}"></TextBlock>
                            <Image Source="{Binding ImageUri}"></Image>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

When you scroll the list up and down, your app is downloading every image. With complex datatemplates this starts to affect the performance really fast. And your app is probably doing unnecessary work because even if you just want to rapidly scroll from item 1 to item 100, every item (and image) between those two is loaded.

LazyListBox

The solution for this is to use  LazyListBox.LazyListBox contains (at least) two different datatemplates for your ListBox items: One for the situation where the ListBox is scrolling and one for the ListBox standing still. Peter Torr has written a great and easy-to-follow article about his LazyListBoxand his control is very easy to use: Just download the zip-package included in his post (LazyListBoxBlogPost.zip), open and compile the included solution and add reference to the LazyListBox.dll into your project.

The default ItemTemplate in LazyListBox is for situations where the ListBox is scrolling. In addition to ItemTemplate, it contains LoadedItemTemplate which is used when the ListBox is still. The idea is to show only some “light” information like text when the ListBox is scrolling, making the scrolling much more smooth. Our previous example could look like this with the help of LazyListBox:

            <lazy:LazyListBox>
                <lazy:LazyListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Number}"></TextBlock>
                    </DataTemplate>
                </lazy:LazyListBox.ItemTemplate>
                <lazy:LazyListBox.LoadedItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Number}"></TextBlock>
                            <Image Source="{Binding ImageUri}"></Image>
                        </StackPanel>
                    </DataTemplate>
                </lazy:LazyListBox.LoadedItemTemplate>
            </lazy:LazyListBox>

When the list is scrolling, only the Number information is shown. And when the list stops, it automatically switches to LoadedItemTemplate. Peter shows in his post how this transition can be made smooth with the help of triggers and animations.

Conclusion

So, LazyListBox brings you two major benefits:

  • Your app needs to work less.
  • Your app provides a smoother and more user-friendly experience.

Resources