Windows Phone 8 XAML LongListSelector

This blog post was authored by Rohan Thakkar, a Program Manager on the Windows Phone team.

- Adam

Last year we evangelized the use of the LongListSelector control to provide smooth infinite scrolling scenarios. The LongListSelector control is so useful that we decided to enhance it and move it to the SDK for Windows Phone 8. In this post we discuss the improvements we’ve made to the control, and provide a mapping guide for Windows Phone developers who are already using the Windows Phone Toolkit 7.1 version of the LongListSelector.

If you prefer to read XAML instead of plain text, you can go straight to the samples and explore them:

• TwitterSearch - Windows Phone 8 LongListSelector Infinite Scrolling Sample
• PhotoHub - Windows Phone 8 XAML LongListSelector Grid Layout sample
• PeopleHub - Windows Phone 8 XAML LongListSelector sample

For more info about how to use the LongListSelector, see How to display data in a grouped list in LongListSelector for Windows Phone 8.

Let’s dig a little deeper into various enhancements we’ve made to the control. Skip to the sections that interest you.

1. LongListSelector moved to Windows Phone 8 SDK and to ROM
2. Sticky headers
3. Grouped grid layout
4. Improvements to infinite scrolling scenario
5. Globalization – SortedLocaleGrouping
6. LongListSelector mapping guide – Differences between Windows Phone OS 7.1 Toolkit and Windows Phone 8.0 SDK
7. FAQs

LongListSelector moved to Windows Phone 8 SDK and to ROM

The LongListSelector control is now a part of Microsoft.Phone.Controls namespace in Microsoft.Phone.Controls.dll assembly. This means it’s now a fully supported, high-quality control shipped by the Windows Phone Development team. We also moved the assembly to ROM to take advantage of the internal off-thread input and the render thread architecture. This means the control is optimized for the full potential of Windows Phone.

The Microsoft.Phone.Controls.dll assembly also contains other phone-specific controls, such as Panorama and Pivot. These controls also get the performance benefits of being in ROM, including reduced memory consumption (~50% reduced memory for a basic app) and improved touch performance, especially when you have data being loaded in the panorama view.

Sticky headers

The native Windows Phone grouped list has the headers stick to the top as you scroll. The LongListSelector control in Windows Phone 8 has the same smooth effect.

Note the headers in the following screenshots.

Figure 1 - Notice group header "a"

Figure 2 - Scrolling up, notice how "a" sticks to top

Figure 3 - Notice how the group header "b" pushes "a"

Figure 4 - Now "b" is sticky, same as "a"

Grouped grid layout

In Windows Phone 8, LongListSelector supports grid layout, which is more than just the WrapPanel that’s available in the Windows Phone Toolkit. The LongListSelector grid layout is virtualized, which provides better performance. The following screenshots are from the PhotoHub sample.

Figure 5 - LongListSelector's Grid layout

Figure 6 - Jumplist's List layout.

The following code is an excerpt of the XAML for the LongListSelector from the PhotoHub sample.

Let’s look at some examples of interesting properties found in this code.

LayoutMode– Indicates whether the collection in the context should be displayed as a list or as a grid. In the preceding XAML example, LayoutMode is set to Grid as a property on the LongListSelector, and set to List as a property on JumpListStyle.

JumpListStyle– Provides the style for the jump list items.

GridCellSize– Indicates the size of each cell in the grid. This property has to be set on the LongListSelector or the JumpListStyle wherever the grid layout is to be rendered.

Converters - Note that the JumpListItemBackgroundConverter and JumpListItemForegroundConverter are needed to convert the foreground and background colors of the jump list item (group header of a group) whether or not it has items in the group. These converters also are part of the SDK and are in the same Microsoft.Phone.Controls namespace.

Figure 7 - Value converters shading empty group jump list items

The default foreground and background colors match the first-party app. You can customize it to align with your design needs using the Enabled and Disabled properties as shown here:

Improvements to infinite scrolling scenarios

Earlier we spoke about infinite scrolling for the Windows Phone Toolkit 7.1 LongListSelector. As you approach the end of the visible list when scrolling, the LongListSelector automatically fetches more items and adds them to the list, which gives you a sense of infinite scrolling. We made this scenario simple to implement in Windows Phone 8. The following code from the Twitter Search sample demonstrates how easy it is to implement:

The ItemRealized event is raised every time a LongListSelector item acquires a UI container to be displayed on the screen. In other words, every time an item enters the UI buffers above or below the current viewport, the ItemRealized event is raised. The event argument property ItemKind indicates whether the UI container is an Item, ListHeader, GroupHeader, or ListFooter. Using the property Container.Content you can get the actual object associated with the UI container that was realized. This way you can monitor the objects within the UI container buffer.

Note how the app code in this example contains a private variable _offsetKnob. This helps fine-tune the LongListSelector scrolling experience by helping to determine when to load more items depending on how heavy your item template is, or on how slow the response is from the service sending the data.

Globalization – SortedLocaleGrouping

When you group contacts in alphabetical order, you want to do this in all languages. You could provide your own globalized, sorted alphabet characters for group headers. However, using your own alphabet strings will not guarantee 100% matching with the phone first-party contacts list. So we introduced a class called SortedLocaleGrouping that provides a set of alphabets that are the same as those used by the first party. In the PeopleHub sample, SortedLocaleGrouping (from Microsoft.Phone.Globalization namespace) is used in one of the helper types, AlphaKeyGroup (which also is very highly recommended).

You get the group display names by using the SortedLocaleGrouping.GetGroupDisplayNames property to populate your groups. Then use the GetGroupIndex method to classify your contacts list.

SupportsPhonetics property

This is a unique property and we have included it in SortedLocaleGrouping. In some cultures, such as ja-JP, last names are written in a different script and are pronounced differently depending on the region or background.

Here’s an example:

This is a common phenomenon catching on in different cultures, and the first-party contacts list will be grouped based on the Yomi that is passed in. If no Yomi is passed in, it will return the default, same group (equivalent to other or globe).

You usually would use the SupportsPhonetics property when classifying the contacts into groups and if you have the Yomi (pronunciation) database that you can access via a service or other means for the specific culture. The code between the //EXAMPLE comments in the following example is from one of the helper methods that shows how you would use it if you have a database of the pronunciations (Yomi) for various names.

LongListSelector mapping guide – Differences between Windows Phone Toolkit 7.1 and Windows Phone 8.0 SDK

We modified and enhanced the Windows Phone Toolkit LongListSelector. In this section we briefly outline what has changed.

Properties modified from the Windows Phone Toolkit 7.1

Deleted

• BufferSize
• IsBouncy
• IsScrolling
• MaximumFlickVelocity
• ShowListFooter/ShowListHeader

Modified

New concepts

• GridCellSize
• LayoutMode LongListSelectorLayoutMode { List, Grid };
• ManipulationState
  
  C#

  1. publicenumManipulationState
  2. {
  3.     Idle, // nothing is manipulating or animating
  4.     Manipulating, // Gesture is being recognized, finger is down and any delta is received, drag/pan or flick
  5.     Animating //No Gesture is currently happening, but there is some animation happening, like scroll animation or compression animation
  6. }

Methods modified from the Windows Phone Toolkit 7.1

Deleted

• AnimateTo(object item)
• CloseGroupView()
• DisplayGroupView()
• GetItemsInView()
• GetItemsWithContainers(bool onlyItemsInView, bool getContainers)
• ScrollToGroup(object group)

Events modified from the Windows Phone Toolkit 7.1

Deleted

• StretchingBottom
• StretchingCompleted
• StretchingTop

Modified

FAQ

Why use IList instead of IEnumerable for ItemsSource?

You have to know how many elements there are and there is no Count property on IEnumerable. You also have to be able to access the items by index, not just in the forward-only, one-at-a-time way that enumerators do. If ItemsSource accepted IEnumerables or an IEnumerable of IEnumerables, you’d have to convert them to lists internally using the default method of iterating over every single item. This conversion would rule out data virtualization, which could cause poor performance without the app author knowing why. Worse yet, the author might think that it is the status quo and simply accept a longer start time. This was one of the complaints about the original toolkit LongListSelector. Now, if an app author has only an IEnumerable set of data, the developer can simply call ToList() for the default conversion to an IList but the developer also has the flexibility provide their own IList implementation.

Is LongListSelector recommended instead of ListBox?

Yes! We have designed the LongListSelector specifically for phone scenarios and we encourage people to use the LongListSelector instead of ListBox for phone apps.