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

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            longListSelector.ItemsSource = new Items();

        }

    }

}

 

運行的效果如下：