WP7 LongListSelector in depth | Part2: Data binding scenarios

逃离我推掉我的手 2021-11-19 12:12 181阅读 0赞

by WindowsPhoneGeek

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][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][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"][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:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>public</code> 
      <code>class</code> 
      <code>City</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>string</code> 
      <code>Name</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>get</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>set</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>string</code> 
      <code>Country</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>get</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>set</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>string</code> 
      <code>Language</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>get</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>set</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>List&lt;City&gt; source = </code> 
      <code>new</code> 
      <code>List&lt;City&gt;();</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Madrid"</code> 
      <code>, Country = </code> 
      <code>"ES"</code> 
      <code>, Language = </code> 
      <code>"Spanish"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Barcelona"</code> 
      <code>, Country = </code> 
      <code>"ES"</code> 
      <code>, Language = </code> 
      <code>"Spanish"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Mallorca"</code> 
      <code>, Country = </code> 
      <code>"ES"</code> 
      <code>, Language = </code> 
      <code>"Spanish"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Las Vegas"</code> 
      <code>, Country = </code> 
      <code>"US"</code> 
      <code>, Language = </code> 
      <code>"English"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Dalas"</code> 
      <code>, Country = </code> 
      <code>"US"</code> 
      <code>, Language = </code> 
      <code>"English"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"New York"</code> 
      <code>, Country = </code> 
      <code>"US"</code> 
      <code>, Language = </code> 
      <code>"English"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"London"</code> 
      <code>, Country = </code> 
      <code>"UK"</code> 
      <code>, Language = </code> 
      <code>"English"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Mexico"</code> 
      <code>, Country = </code> 
      <code>"MX"</code> 
      <code>, Language = </code> 
      <code>"Spanish"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Milan"</code> 
      <code>, Country = </code> 
      <code>"IT"</code> 
      <code>, Language = </code> 
      <code>"Italian"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Roma"</code> 
      <code>, Country = </code> 
      <code>"IT"</code> 
      <code>, Language = </code> 
      <code>"Italian"</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>source.Add(</code> 
      <code>new</code> 
      <code>City() { Name = </code> 
      <code>"Paris"</code> 
      <code>, Country = </code> 
      <code>"FR"</code> 
      <code>, Language = </code> 
      <code>"French"</code> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>toolkit:LongListSelector</code> 
      <code>x:Name</code> 
      <code>=</code> 
      <code>"citiesList"</code> 
      <code>Background</code> 
      <code>=</code> 
      <code>"Transparent"</code> 
      <code>IsFlatList</code> 
      <code>=</code> 
      <code>"True"</code> 
      <code>/&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

C#:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>this</code> 
      <code>.citiesList.ItemsSource = </code> 
      <code>new</code> 
      <code>List&lt;</code> 
      <code>string</code> 
      <code>&gt; { </code> 
      <code>"Madrid"</code> 
      <code>, </code> 
      <code>"Barcelona"</code> 
      <code>, </code> 
      <code>"Mallorca"</code> 
      <code>, </code> 
      <code>"Las Vegas"</code> 
      <code>};</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

The result is :

![lls21.jpg][]

**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][Part1_ Visual structure and API]" post.

XAML:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>DataTemplate</code> 
      <code>x:Key</code> 
      <code>=</code> 
      <code>"citiesListHeader"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>Border</code> 
      <code>Background</code> 
      <code>=</code> 
      <code>"Purple"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>TextBlock</code> 
      <code>Text</code> 
      <code>=</code> 
      <code>"Cities Header"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>Border</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>DataTemplate</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>DataTemplate</code> 
      <code>x:Key</code> 
      <code>=</code> 
      <code>"citiesListFooter"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>Border</code> 
      <code>Background</code> 
      <code>=</code> 
      <code>"Green"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>TextBlock</code> 
      <code>Text</code> 
      <code>=</code> 
      <code>"Cities Footer"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>Border</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>DataTemplate</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>DataTemplate</code> 
      <code>x:Key</code> 
      <code>=</code> 
      <code>"citiesItemTemplate"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>StackPanel</code> 
      <code>Grid.Column</code> 
      <code>=</code> 
      <code>"1"</code>&nbsp; 
      <code>VerticalAlignment</code> 
      <code>=</code> 
      <code>"Top"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>TextBlock</code> 
      <code>Text</code> 
      <code>=</code> 
      <code>"{Binding Name}"</code> 
      <code>FontSize</code> 
      <code>=</code> 
      <code>"26"</code>&nbsp; 
      <code>Margin</code> 
      <code>=</code> 
      <code>"12,-12,12,6"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>TextBlock</code> 
      <code>Text</code> 
      <code>=</code> 
      <code>"{Binding Country}"</code>&nbsp; 
      <code>Foreground</code> 
      <code>=</code> 
      <code>"GreenYellow"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>TextBlock</code> 
      <code>Text</code> 
      <code>=</code> 
      <code>"{Binding Language}"</code> 
      <code>Foreground</code> 
      <code>=</code> 
      <code>"Orange"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>StackPanel</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>DataTemplate</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>toolkit:LongListSelector</code>&nbsp; 
      <code>x:Name</code> 
      <code>=</code> 
      <code>"citiesList"</code>&nbsp; 
      <code>Background</code> 
      <code>=</code> 
      <code>"Transparent"</code> 
      <code>IsFlatList</code> 
      <code>=</code> 
      <code>"True"</code>&nbsp;&nbsp; 
      <code>ItemTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource citiesItemTemplate}"</code> 
     </div> 
     <div> 
      <code>ListHeaderTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource citiesListHeader}"</code> 
      <code>ListFooterTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource citiesListFooter}"</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

C#:

The result is:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>this</code> 
      <code>.citiesList.ItemsSource = source;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

![lls23.jpg][]       ![lls22.jpg][]

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#:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>public</code> 
      <code>class</code> 
      <code>Group&lt;T&gt; : IEnumerable&lt;T&gt;</code> 
     </div> 
     <div> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>Group(</code> 
      <code>string</code> 
      <code>name, IEnumerable&lt;T&gt; items)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.Title = name;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.Items = </code> 
      <code>new</code> 
      <code>List&lt;T&gt;(items);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>override</code> 
      <code>bool</code> 
      <code>Equals(</code> 
      <code>object</code> 
      <code>obj)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Group&lt;T&gt; that = obj </code> 
      <code>as</code> 
      <code>Group&lt;T&gt;;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>(that != </code> 
      <code>null</code> 
      <code>) &amp;&amp; (</code> 
      <code>this</code> 
      <code>.Title.Equals(that.Title));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>string</code> 
      <code>Title</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>get</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>set</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>IList&lt;T&gt; Items</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>get</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>set</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>#region IEnumerable&lt;T&gt; Members</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public</code> 
      <code>IEnumerator&lt;T&gt; GetEnumerator()</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>.Items.GetEnumerator();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>#endregion</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>#region IEnumerable Members</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>.Items.GetEnumerator();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>#endregion</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

*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\#:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var cityByCountry = from city </code> 
      <code>in</code> 
      <code>source</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>group city by city.Country into c</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>orderby c.Key</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>select </code> 
      <code>new</code> 
      <code>Group&lt;City&gt;(c.Key, c);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>this</code> 
      <code>.citiesListGropus.ItemsSource = cityByCountry;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

*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:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>DataTemplate</code> 
      <code>x:Key</code> 
      <code>=</code> 
      <code>"groupHeaderTemplate"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>Border</code> 
      <code>Background</code> 
      <code>=</code> 
      <code>"YellowGreen"</code> 
      <code>Margin</code> 
      <code>=</code> 
      <code>"6"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>TextBlock</code> 
      <code>Text</code> 
      <code>=</code> 
      <code>"{Binding Title}"</code> 
      <code>FontSize</code> 
      <code>=</code> 
      <code>"40"</code> 
      <code>Foreground</code> 
      <code>=</code> 
      <code>"Black"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>Border</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>DataTemplate</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>DataTemplate</code> 
      <code>x:Key</code> 
      <code>=</code> 
      <code>"groupItemTemplate"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>Border</code> 
      <code>Background</code> 
      <code>=</code> 
      <code>"YellowGreen"</code> 
      <code>Width</code> 
      <code>=</code> 
      <code>"99"</code> 
      <code>Height</code> 
      <code>=</code> 
      <code>"99"</code> 
      <code>Margin</code> 
      <code>=</code> 
      <code>"6"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>TextBlock</code> 
      <code>Text</code> 
      <code>=</code> 
      <code>"{Binding Title}"</code> 
      <code>FontSize</code> 
      <code>=</code> 
      <code>"40"</code> 
      <code>Foreground</code> 
      <code>=</code> 
      <code>"Black"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>Border</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>DataTemplate</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>toolkit:LongListSelector</code> 
      <code>x:Name</code> 
      <code>=</code> 
      <code>"citiesListGropus"</code> 
      <code>Background</code> 
      <code>=</code> 
      <code>"Transparent"</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ItemTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource citiesItemTemplate}"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ListHeaderTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource citiesListHeader}"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>ListFooterTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource citiesListFooter}"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>GroupHeaderTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource groupHeaderTemplate}"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>GroupItemTemplate</code> 
      <code>=</code> 
      <code>"{StaticResource groupItemTemplate}"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>toolkit:LongListSelector</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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:

![llsg1.jpg][] ![llsg0.jpg][] ![llsg3.jpg][]   
  
The next step is to customize the group popup. We will change the default ItemsPanel with a WrapPanel:

XAML:

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>toolkit:LongListSelector.GroupItemsPanel</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>ItemsPanelTemplate</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>toolkit:WrapPanel</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>ItemsPanelTemplate</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>toolkit:LongListSelector.GroupItemsPanel</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

After that  the LongListSelector popup looks like:

![llsg2.jpg][]

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][winphonegeek]

转载于:https://www.cnblogs.com/winkia/archive/2012/04/09/2438884.html

[Part1_ Visual structure and API]: http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part1-visual-structure-and-api
[Silverlight Toolkit November 2010 Update - What_s New]: http://www.windowsphonegeek.com/articles/silverlight-toolkit-november-2010-update-whats-new
[Link 1]: http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios
[lls21.jpg]: http://www.windowsphonegeek.com/upload/lls21.jpg
[lls23.jpg]: http://www.windowsphonegeek.com/upload/lls23.jpg
[lls22.jpg]: http://www.windowsphonegeek.com/upload/lls22.jpg
[llsg1.jpg]: http://www.windowsphonegeek.com/upload/llsg1.jpg
[llsg0.jpg]: http://www.windowsphonegeek.com/upload/llsg0.jpg
[llsg3.jpg]: http://www.windowsphonegeek.com/upload/llsg3.jpg
[llsg2.jpg]: http://www.windowsphonegeek.com/upload/llsg2.jpg
[here]: http://www.windowsphonegeek.com/upload/LongListSelectorDemo.zip
[winphonegeek]: http://twitter.com/winphonegeek