The new LongListSelector control in Windows Phone 8 gives app users the ability to jump directly to a spot within a list instead of scrolling through the list to find the item they want. By using this control in your app, you can help users parse large amounts of data more efficiently, and you can more easily work longer lists of data into your app’s design.

LongListSelector

Appearance and action

Like the ListBox control, the LongListSelector control presents a fixed-sized scrolling selector of items in a list. A user can pan or flick vertically to scroll through items in the list. The user taps the control to select an item in the list.

However, when the user pans through a list, the panning stops at the point in the list where the user’s finger stops moving, or when the user lifts their finger from the phone screen. When the user flicks on the list, the list scrolls and then slows to a stop unless the user taps in the list, in which case, the scrolling—the effect of the flick gesture—stops. However, if scrolling slows to a specified speed, the tap gesture instead selects an item in the list instead of only stopping the scrolling action.

While the list is scrolling, the page can’t be pivoted left or right unless the scroll has slowed down to a certain speed.

When the end of the list is reached, it will then scroll up to display the empty section and “rubber band” back to rest in place. Flicking at the end of the list causes it to rubber band back; the list won’t wrap to the beginning. However, panning can wrap the list back to the beginning if you want to design this ability in your app.

Standard use

You use a LongListSelector control to conserve screen real estate when you want to present a long list of words, numbers, or visual elements from which the user is expected to choose. With the LongListSelector control, the user efficiently selects and then “jumps to” the list item they want.

Choosing the right control

Use a LongListSelector control when the user needs to choose from eight or more items in a list. If the list has four or fewer items, use grouped RadioButton controls instead of a LongListSelector control.

A LongListSelector control organizes a list of items vertically. If you want to present list items horizontally, particularly if the items are graphics or photos, consider instead using the ScrollViewer control.

The long list navigation experience

You have two options for setting up long-list navigation in your app:

  • Alphabetical list. Letters with no items listed are grayed out.
  • Group headers. When a user taps on a group header they activate the Quick Jump List. Your app must provide a list of group headers for this function to work. You’ll need to configure your app’s data source to be grouped in the categories you want for the Long List Navigation to display. If you use group headers in your app and a section is empty, that section will appear as grayed out.

LongListSelector_GroupHeader

Group Header Navigation: 1) User taps the group header on the list that has enabled Long List Navigation. 2) User is taken to Quick Jump List. 3) User jumps to the top of the group selected. 4) Long List Navigation based on Group Header will provide a header list.

Design guidelines

Using the  LongListSelector control is a clean and active way to present a long list of options, but note that a list can be too long. Consider using a table view for a list that contains more than a few dozen items.  Also remember to:

  • Use strong sans-serif typefaces; make list item text at least 12 pixels in height; and be sure that the text is legible from all angles and sizes.
  • Reserve illumination, effects, animations, or other ornamentation for scenarios that use touch feedback or selected states. Items in LongListSelector controls should have a strong visual reaction when users touch them.

Sample code


    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="AddrBookItemTemplate">
            <StackPanel VerticalAlignment="Top">
                <TextBlock FontWeight="Bold"  Text="{Binding FirstName}" />
                <TextBlock Text="{Binding LastName}" />
                <TextBlock Text="{Binding Address}" />
                <TextBlock Text="{Binding Phone}" />
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="AddrBookGroupHeaderTemplate">
            <Border Background="Transparent" Padding="5">
                <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62" Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Border>
            </Border>
        </DataTemplate>
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector>
 <Setter Property="GridCellSize" Value="113,113"/>
 <Setter Property="LayoutMode" Value="Grid" />
 <Setter Property="ItemTemplate">
 <Setter.Value>
 <DataTemplate>
 <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
 <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
 </Border>
 </DataTemplate>
 </Setter.Value>
 </Setter>
 </Style>
 </phone:PhoneApplicationPage.Resources>

 <phone:LongListSelector
 x:Name="AddrBook"
 JumpListStyle="{StaticResource AddrBookJumpListStyle}"
 Background="Transparent"
 GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
 ItemTemplate="{StaticResource AddrBookItemTemplate}"
 LayoutMode="List"
 IsGroupingEnabled="true"
HideEmptyGroups ="true"/>

Related Links

Advertisements

Share your thoughts

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s