Windows Phone 7 LongListSelector控件实现分类列表和字母索引
? 在wp7手機里面的聯系人列表和程序里面里面我們可以看到一個根據字母索引來定位聯系人或者應用程序的控件，那么這個控件就是LongListSelector控件了。
LongListSelector是一種比ListBox更加強大的列表控件，你可以根據你列表的信息來分類排列，根據類別快速定位到你選中的類別的列表下，在數據量很大的情況下這種分類的優勢很明顯。LongListSelector可以自定義列表頭，列表尾、類表頭、列別尾等的樣式和數據，可以實現各種個性化的列表樣式和不同的數據的展現方式。Windows Phone 7手機的聯系人列表就是基于LongListSelector控件設計的。LongListSelector控件的常用屬性和常用事件分別如表12.6和表12.7所示。
?????????????????????? 表12.6 LongListSelector控件常用屬性
| 名稱 | 說明 |
| DisplayAllGroups | bool類型的屬性，當值為true時，它顯示所有的分組無論該組中是否有選項或者數據，默認值為false。 |
| GroupFooterTemplate | DataTemplate類型的屬性，它是負責綁定每個組的底部的數據和樣式的模板。 |
| GroupHeaderTemplate | DataTemplate類型的屬性，它是負責綁定每個組的頂部的數據和樣式的模板。 |
| GroupItemsPanel | ItemsPanelTemplate類型的屬性，設置組的內部的Panel面板的內容。 |
| GroupItemTemplate | DataTemplate類型的屬性，它是負責綁定每個組里面的元素的數據和樣式的模板。 |
| ItemTemplate | DataTemplate類型的屬性，它是負責綁定所有選項或者元素的數據和樣式的模板。 |
| ListFooterTemplate | DataTemplate類型的屬性，它是負責綁定整個List底部的數據和樣式的模板。 |
| ListHeaderTemplate | DataTemplate類型的屬性，它是負責綁定整個List頂部的數據和樣式的模板。 |
| SelectedItem | 獲取或者設置選中的選項 |
| ShowListFooter | bool類型的屬性，是否顯示列腳，默認值為true。 |
| ShowListHeader | bool類型的屬性，是否顯示列頭，默認值為true。 |
?
表12.7 LongListSelector控件常用事件
| 名稱 | 說明 |
| Link | 當查找的內容被找到時，觸發的事件。 用法示例： selector.Link += new?? EventHandler<LinkUnlinkEventArgs>(selector_Link); void selector_Link(object sender,?? LinkUnlinkEventArgs e) {...} |
| Unlink | 查找的內容沒有被找到時，觸發的事件。 用法示例: selector.Unlink += new EventHandler<LinkUnlinkEventArgs>(selector_Unlink);? void selector_Unlink(object sender,?? LinkUnlinkEventArgs e) {... } |
| SelectionChanged? | 選擇的選項改變時觸發的事件。 用法示例: selector.SelectionChanged += new SelectionChangedEventHandler(selector_SelectionChanged); void selector_SelectionChanged(object sender,?? SelectionChangedEventArgs e)? {... } |
| ScrollingCompleted | 當列表滾動結束的時候觸發的事件。 用法示例: selector.ScrollingCompleted += new EventHandler(selector_ScrollingCompleted); void selector_ScrollingCompleted(object?? sender, EventArgs e) {...} |
| ScrollingStarted | 當列表滾動開始的時候觸發的事件。 用法示例: selector.ScrollingStarted += new?? EventHandler(selector_ScrollingStarted); void selector_ScrollingStarted(object?? sender, EventArgs e){...} |
下面給出列表選擇框的示例：演示如何使用LongListSelector控件進行列表信息分類。
代碼清單12-6：列表選擇框（源代碼：第12章\Examples_12_6）
MainPage.xaml文件主要代碼
?
<phone:PhoneApplicationPage.Resources><!—定義組頭綁定模板--><DataTemplate x:Key="GroupHeader"><Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}"><TextBlock Text="{Binding Key}"/></Border></DataTemplate><!—定義組選項綁定模板--><DataTemplate x:Key="GroupItem"><Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}"><TextBlock Text="{Binding Key}" Style="{StaticResource PhoneTextLargeStyle}"/></Border></DataTemplate><!—定義列頭綁定模板--><DataTemplate x:Key="ListHeader"><TextBlock Text="Header" Style="{StaticResource PhoneTextTitle1Style}"/></DataTemplate><!—定義列表選項綁定模板--><DataTemplate x:Key="ItemTmpl"><Grid><TextBlock Text="{Binding Title}"></TextBlock></Grid></DataTemplate></phone:PhoneApplicationPage.Resources>……<!--添加LongListSelector控件--><Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><toolkit:LongListSelector x:Name="LongList" Background="Transparent" ItemTemplate="{StaticResource ItemTmpl}"ListHeaderTemplate="{StaticResource ListHeader}" GroupHeaderTemplate="{StaticResource GroupHeader}"GroupItemTemplate="{StaticResource GroupItem}" ></toolkit:LongListSelector></Grid></Grid></phone:PhoneApplicationPage>MainPage.xaml.cs文件代碼
using System;using System.Collections.Generic;using System.Linq;using System.Windows;using System.Windows.Controls;using Microsoft.Phone.Controls;namespace LongListSelectorDemo{public partial class MainPage : PhoneApplicationPage{public MainPage(){InitializeComponent();//使用List<T>來初始化數據 List<Item> mainItem = new List<Item>();for (int i = 0; i < 10; i++){mainItem.Add(new Item() { Content = "A類別", Title = "測試A " + i.ToString() });mainItem.Add(new Item() { Content = "B類別", Title = "測試B" + i.ToString() });mainItem.Add(new Item() { Content = "C類別", Title = "測試C" + i.ToString() });}//使用Linq來查詢List<Item>數據 按照Content來進行分組var selected = from c in mainItem group c by c.Content into n select new GroupingLayer<string, Item>(n);this.LongList.ItemsSource = selected;}//繼承Linq的IGrouping接口 來存儲分組的數據public class GroupingLayer<TKey, TElement> : IGrouping<TKey, TElement>{//分組數據private readonly IGrouping<TKey, TElement> grouping;//初始化public GroupingLayer(IGrouping<TKey, TElement> unit){grouping = unit;}//唯一的鍵值public TKey Key{get { return grouping.Key; }}//重載判斷相等方法public override bool Equals(object obj){GroupingLayer<TKey, TElement> that = obj as GroupingLayer<TKey, TElement>;return (that != null) && (this.Key.Equals(that.Key));}public IEnumerator<TElement> GetEnumerator(){return grouping.GetEnumerator();}System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator(){return grouping.GetEnumerator();}}//List選項的類 Content表示類別 Title表示選項的標題public class Item{public string Title { get; set; }public string Content { get; set; }}}}
?
面再來看看第二例子，實現LongListSelector控件的字母索引。
?
Item.cs
namespace LongListSelectorDemo{/// <summary>/// 選項實體類/// </summary>public class Item{public string Name { get; set; }public string Content { get; set; }//獲取名字的首個字符用來作為分組的依據public static string GetFirstNameKey(Item item){char key;key = char.ToLower(item.Name[0]);if (key < 'a' || key > 'z'){key = '#';}return key.ToString();}}}?
ItemInGroup.cs
?
using System.Collections.Generic;namespace LongListSelectorDemo{/// <summary>/// 組集合/// </summary>public class ItemInGroup: List<Item>{public ItemInGroup(string category){Key = category;}//組的鍵public string Key { get; set; }//組是否有選項public bool HasItems { get { return Count > 0; } }}}Items.cs
?
using System.Collections.Generic;namespace LongListSelectorDemo{/// <summary>/// 總數據集合/// </summary>public class Items: List<ItemInGroup>{//索引private static readonly string Groups = "#|a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z";public Items(){//獲取要綁定的數據源 List<Item> items = new List<Item>();items.Add(new Item { Name = "a測試", Content = "a內容" });items.Add(new Item { Name = "b測試", Content = "b內容" });items.Add(new Item { Name = "c測試", Content = "c內容" });items.Add(new Item { Name = "d測試", Content = "d內容" });items.Add(new Item { Name = "e測試", Content = "e內容" });items.Add(new Item { Name = "f測試", Content = "f內容" });items.Add(new Item { Name = "g測試", Content = "g內容" });//組的字典列表 Dictionary<string, ItemInGroup> groups = new Dictionary<string, ItemInGroup>();//初始化組列表，即用字母列表來分組foreach (string c in Groups.Split('|')){ItemInGroup group = new ItemInGroup(c.ToString());//添加組數據到集合this.Add(group);groups[c.ToString()] = group;}//初始化選項列表，即按照選項所屬的組來放進它屬于的組里面foreach (Item item in items){//添加選項數據到集合 groups[Item.GetFirstNameKey(item)].Add(item);}}}}MainPage.xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><toolkit:LongListSelector x:Name="longListSelector" Background="Transparent"Margin="0,-8,0,0"><toolkit:LongListSelector.GroupItemsPanel><ItemsPanelTemplate><toolkit:WrapPanel Orientation="Horizontal"/></ItemsPanelTemplate></toolkit:LongListSelector.GroupItemsPanel><toolkit:LongListSelector.GroupItemTemplate><DataTemplate><Border Background="Red" Width="99" Height="99" Margin="6" IsHitTestVisible="{Binding HasItems}"><TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"FontSize="48"Margin="8,0,0,0"Foreground="White" VerticalAlignment="Bottom"/></Border></DataTemplate></toolkit:LongListSelector.GroupItemTemplate><toolkit:LongListSelector.GroupHeaderTemplate><DataTemplate><Border Background="Transparent" Margin="12,8,0,8"><Border Background="{StaticResource PhoneAccentBrush}" Padding="8,0,0,0" Width="62" Height="62" HorizontalAlignment="Left"><TextBlock Text="{Binding Key}" Foreground="#FFFFFF" FontSize="48"FontFamily="{StaticResource PhoneFontFamilySemiLight}"HorizontalAlignment="Left"VerticalAlignment="Bottom"/></Border></Border></DataTemplate></toolkit:LongListSelector.GroupHeaderTemplate><toolkit:LongListSelector.ItemTemplate><DataTemplate><Grid Margin="12,8,0,8"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><StackPanel Grid.Column="1" VerticalAlignment="Top"><TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/><TextBlock Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/></StackPanel></Grid></DataTemplate></toolkit:LongListSelector.ItemTemplate></toolkit:LongListSelector></Grid>MainPage.xaml.cs
using Microsoft.Phone.Controls;namespace LongListSelectorDemo{public partial class MainPage : PhoneApplicationPage{// Constructorpublic MainPage(){InitializeComponent();longListSelector.ItemsSource = new Items();}}}運行的效果如下：
轉自：http://www.cnblogs.com/linzheng/archive/2012/03/24/2415958.html
?
?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的Windows Phone 7 LongListSelector控件实现分类列表和字母索引的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 魔兽争霸3地图（WarIII Maps）
- 下一篇： Using JSON for data