WP7 LongListSelector in depth | Part2: Data binding scenarios
This is Part2 of the "WP7 LongListSelector in depth" series of two posts in which I talk about the key properties, methods, events and the basic structure of the LongListSelector in details. In the first "Part1: Visual structure and API " I explained the visual structure of the control and all abut the available public API. Now In "Part2: Data binding scenarios" I will talk about using the API and populating LongListSelector in different ways.
Note: Take a look at the previous "LongListSelector in depth - Part1: Visual structure and API" post for reference. For more information about all new controls in the updated version of the toolkit please visit the "Silverlight Toolkit November 2010 Update - What's New"post.
Generally when talking about the LongListSelector and populating it with data you have two chaises:
- to use it as a standard ListBox with flat lists.
- to use it as an advanced ListBox with grouped lists.
Note: LongListSelector supports full data and UI virtualization.It is usually used to scroll through long lists of data.
To begin with lets first mention that in this article I will use the following simple data source (presenting the Country/Language/City relation):
Sample data source:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
public class City { public string Name { get; set; } public string Country { get; set; } public string Language { get; set; } }List<City> source = new List<City>();source.Add(new City() { Name = "Madrid", Country = "ES", Language = "Spanish" });source.Add(new City() { Name = "Barcelona", Country = "ES", Language = "Spanish" });source.Add(new City() { Name = "Mallorca", Country = "ES", Language = "Spanish" });source.Add(new City() { Name = "Las Vegas", Country = "US", Language = "English" });source.Add(new City() { Name = "Dalas", Country = "US", Language = "English" });source.Add(new City() { Name = "New York", Country = "US", Language = "English" });source.Add(new City() { Name = "London", Country = "UK", Language = "English" });source.Add(new City() { Name = "Mexico", Country = "MX", Language = "Spanish" });source.Add(new City() { Name = "Milan", Country = "IT", Language = "Italian" });source.Add(new City() { Name = "Roma", Country = "IT", Language = "Italian" });source.Add(new City() { Name = "Paris", Country = "FR", Language = "French" }); |
1.FlatList implementstion.
The first thing to do when using flat lists is to set IsFlatList="True".
Simple Flat List
Lets say we want to show a standard list structure with minimum efforts in our LongListSelector. The source code for accomplishing this is as follows:
XAML:
|
1
|
<toolkit:LongListSelector x:Name="citiesList" Background="Transparent" IsFlatList="True"/> |
C#:
|
1
|
this.citiesList.ItemsSource = new List<string> { "Madrid", "Barcelona", "Mallorca", "Las Vegas" }; |
The result is :
Composite Flat List
In more composite flat scenarios you can use more complex data, define your own ItemTemplates and customize the appearance of the items. For instance in this example I will show the names of the countries, cities and the specified languages in different colors. Lets add some elements to the ItemTemplate, ListHeaderTemplate and ListFooterTemplate. The source cod is:
Note: The sample data source is given at the beginning of the article. Take a look at it for reference. For more information about ItemTemplate, ListHeaderTemplate and ListFooterTemplate visit the previous "WP7 LongListSelector in depth | Part1: Visual structure and API" post.
XAML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<DataTemplate x:Key="citiesListHeader"> <Border Background="Purple"> <TextBlock Text="Cities Header" /> </Border> </DataTemplate> <DataTemplate x:Key="citiesListFooter"> <Border Background="Green"> <TextBlock Text="Cities Footer" /> </Border> </DataTemplate> <DataTemplate x:Key="citiesItemTemplate"> <StackPanel Grid.Column="1" VerticalAlignment="Top"> <TextBlock Text="{Binding Name}" FontSize="26" Margin="12,-12,12,6"/> <TextBlock Text="{Binding Country}" Foreground="GreenYellow"/> <TextBlock Text="{Binding Language}" Foreground="Orange" /> </StackPanel> </DataTemplate><toolkit:LongListSelector x:Name="citiesList" Background="Transparent" IsFlatList="True" ItemTemplate="{StaticResource citiesItemTemplate}"ListHeaderTemplate="{StaticResource citiesListHeader}" ListFooterTemplate="{StaticResource citiesListFooter}" > |
C#:
The result is:
|
1
|
this.citiesList.ItemsSource = source; |
Generally when used in Flat mode the LongListSelector is nothing more than a List with Header and Footer.
2.Grouped Lists implementation
This is the more complex scenario. In order to have a hierarchy with groups IsFlatList must be set to False which is actually its default value.
Lets focus on implementing the group hierarchy. In order to fit in the ItemsSource requirements the group class should implement IEnumerable. In our case it looks like the following:
C#:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
public class Group<T> : IEnumerable<T>{ public Group(string name, IEnumerable<T> items) { this.Title = name; this.Items = new List<T>(items); } public override bool Equals(object obj) { Group<T> that = obj as Group<T>; return (that != null) && (this.Title.Equals(that.Title)); } public string Title { get; set; } public IList<T> Items { get; set; } #region IEnumerable<T> Members public IEnumerator<T> GetEnumerator() { return this.Items.GetEnumerator(); } #endregion #region IEnumerable Members System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator() { return this.Items.GetEnumerator(); } #endregion} |
Note: I have overridden the Equals(object obj) method.
Basically we have a Title property of type string that will be used as a text in the group items/headers. After we have defined the group class its time to add it to our data source and finally set the ItemsSource of our LongListSelector. To do this we use a Linq expression so that we are able to add each group in the right place:
C#:
|
1
2
3
4
5
6
|
var cityByCountry = from city in source group city by city.Country into c orderby c.Key select new Group<City>(c.Key, c);this.citiesListGropus.ItemsSource = cityByCountry; |
Note: The sample data source is given at the beginning of this article. Take a look at it for reference.
In the given example all cities are grouped by country name so as a result the group headers/items contain the name of the country and below each group appear all the information connected with this country. The XAML structure is as follows:
XAML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<DataTemplate x:Key="groupHeaderTemplate"> <Border Background="YellowGreen" Margin="6"> <TextBlock Text="{Binding Title}" FontSize="40" Foreground="Black"/> </Border> </DataTemplate><DataTemplate x:Key="groupItemTemplate" > <Border Background="YellowGreen" Width="99" Height="99" Margin="6"> <TextBlock Text="{Binding Title}" FontSize="40" Foreground="Black"/> </Border> </DataTemplate> <toolkit:LongListSelector x:Name="citiesListGropus" Background="Transparent" ItemTemplate="{StaticResource citiesItemTemplate}" ListHeaderTemplate="{StaticResource citiesListHeader}" ListFooterTemplate="{StaticResource citiesListFooter}" GroupHeaderTemplate="{StaticResource groupHeaderTemplate}" GroupItemTemplate="{StaticResource groupItemTemplate}" ></toolkit:LongListSelector> |
The corresponding ItemTemplate, ListHeaderTemplate and ListFooterTemplate are the same as those given in the above Composite Flat List section. And here are some screen shots to see the result:
The next step is to customize the group popup. We will change the default ItemsPanel with a WrapPanel:
XAML:
|
1
2
3
4
5
|
<toolkit:LongListSelector.GroupItemsPanel> <ItemsPanelTemplate> <toolkit:WrapPanel/> </ItemsPanelTemplate></toolkit:LongListSelector.GroupItemsPanel> |
After that the LongListSelector popup looks like:
In this post I demonstrated how to bind a Windows Phone 7 LongListSelector to different data in Flat and Grouped mode.
Hope you enjoy this article. The full source code is available here.
You can also follow us on Twitter @winphonegeek
