Presenting Flat Lists

Presenting a list of nongrouped items is done by setting the LongListSelector’s IsGroupingEnabled property to false, which is the default value. When presenting a flat list, there is little difference between a LongListSelector and a regular ListBox control, apart from the added header and footer of the LongListSelector.

To demonstrate how to display a flat list in a LongListSelector, we populate a LongListSelector with a list of custom City objects.

The FlatListViewModel in the downloadable sample code exposes a list of cities (see Listing 10.1).

LISTING 10.1. FlatListViewModel Class

Click here to view code image

public class FlatListViewModel : ViewModelBase
{
    readonly IEnumerable<City> cities = new List<City>
        {
            new City("Prague", "Capital of the Czech Republic."),
            new City("Geneva", "Swiss city."),
            new City("Canberra", "Capital of Australia."),
            new City("Palma", "Major city of Mallorca."),
            new City("New York", "Most populous city in the USA."),
        };

    public IEnumerable<City> Cities
    {
        get
        {
            return cities;
        }
    }
}

The view XAML uses a LongListSelector to display the list of cities. The LongListSelector.ItemsSource property is bound to the Cities property of the viewmodel. A header and footer are provided, and the ItemTemplate is responsible for presenting each City object. See the following excerpt:

Click here to view code image

<phone:LongListSelector ItemsSource="{Binding Cities}"
                    Background="Transparent">

    <phone:LongListSelector.ListHeader>
        <TextBlock Text="ListHeader"
            Style="{StaticResource PhoneTextTitle1Style}"/>
    </phone:LongListSelector.ListHeader>

    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="{StaticResource PhoneMargin}">
                <TextBlock Text="{Binding Name}"
                    Style="{StaticResource PhoneTextLargeStyle}" />
                <TextBlock Text="{Binding Description}"
                    Style="{StaticResource PhoneTextNormalStyle}" />
            </StackPanel>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>

    <phone:LongListSelector.ListFooter>
        <TextBlock Text="ListFooter"
            Style="{StaticResource PhoneTextTitle1Style}"/>
    </phone:LongListSelector.ListFooter>

</phone:LongListSelector>

In addition to the ListHeader and ListFooter properties, the LongListSelector also includes a ListHeaderTemplate and ListFooterTemplate, which are used to modify the way the header and footer content is presented (see Figure 10.2).

FIGURE 10.2 LongListSelector displaying a flat list of cities.