Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Tag Archives: LongListSelector

ListBox to LongListSelector in Windows Phone 8

If you’re moving a project from Windows Phone 7 to Windows Phone 8 and you use ListBoxes in your app, you can keep them in there with no real problems. However, it’s not recommended to keep using them, instead use the LongListSelector instead. If you’re familiar with the LongListSelector from the Windows Phone Toolkit, then you’ll find the new native LongListSelector a very different beast and you probably wouldn’t think to use it because you know what it was previously only really used for. Previously you would only really use the LongListSelector if you were after a people hub or application list style grouping, but the new native version has been tweaked and improved upon and had massive performance enhancements. You can also just use it as a straight, flat ListBox, complete with all the performance enhancements it brings.

Making the change from ListBox to LongListSelector is actually very simple, just change your xaml to use the LongListSelector instead of the ListBox. It’s as simple as that. When you then run your app, it will already be a flat ListBox as you were before, but with those mentioned performance enhancements.

Before:

            <ListBox x:Name="LLS">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"
                                   Style="{StaticResource PhoneTextLargeStyle}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

After:

            <phone:LongListSelector x:Name="LLS">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"
                                   Style="{StaticResource PhoneTextLargeStyle}" />
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>

It’s as simple as that.

Stay tuned for more on the new LongListSelector.

SL

Advertisements