与众不同 windows phone (34) - 8.0 新的控件: LongListSelector

作者：webabcd

介绍
与众不同 windows phone 8.0 之新的控件

新的控件 - LongListSelector

示例
演示 LongListSelector 控件的应用

1、提供数据
Controls/CityInfo.txt

101330101=澳门=aomen
101080904=阿巴嘎=abagaqi
101271901=阿坝=aba
101050104=阿城=acheng
101081102=阿尔山=aershan
101131504=阿合奇=aheqi
101130801=阿克苏=akesu
101131503=阿克陶=aketao
101130701=阿拉尔=alaer
101131606=阿拉山口=alashankou
101081202=阿右旗=alashanyouqi
101081201=阿左旗=alashanzuoqi
101131401=阿勒泰=aletai
101140701=阿里=ali
101080603=阿鲁旗=aluqi
101081003=阿荣旗=arongqi
101131501=阿图什=atushi
101130809=阿瓦提=awati
101050503=安达=anda
101160208=安定=anding
101140605=安多=anduo
101240612=安福=anfu
101090220=安国=anguo
101250704=安化=anhua
101210203=安吉=anji
101110701=安康=ankang

Controls/CityInfo.cs

namespace Demo.Controls
{
    /// <summary>
    /// city 信息实体类
    /// </summary>
    public class CityInfo
    {
        /// <summary>
        /// city 标识
        /// </summary>
        public string CityId { get; set; }
        /// <summary>
        /// city 名称
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// city 拼音
        /// </summary>
        public string Pinyin { get; set; }

        /// <summary>
        /// 获取城市的拼音首字母
        /// </summary>
        public static string GetFirstPinyinKey(CityInfo cityInfo)
        {
            char indexLetter = char.ToUpper(cityInfo.Pinyin[0]);

            if (indexLetter < 'A' || indexLetter > 'Z')
            {
                indexLetter = '#';
            }

            return indexLetter.ToString();
        }
    }
}

Controls/CityInfoInGroup.cs

using System.Collections.Generic;

namespace Demo.Controls
{
    /// <summary>
    /// 为 LongListSelector 提供数据的实体类
    /// </summary>
    public class CityInfoInGroup : List<CityInfo>
    {
        public CityInfoInGroup(string indexLetter)
        {
            IndexLetter = indexLetter;
        }

        // 某组数据的拼音首字母
        public string IndexLetter { get; set; }

        public bool HasItems { get { return Count > 0; } }
    }
}

Controls/CityData.cs

using System;
using System.Collections.Generic;
using System.Windows.Resources;
using System.IO;
using System.Linq;

namespace Demo.Controls
{
    /// <summary>
    /// 城市数据（为 LongListSelector 提供数据）
    /// </summary>
    public class CityData
    {
        // 按拼音首字母分组城市数据
        private static readonly string _groupLetters = "#abcdefghijklmnopqrstuvwxyz";

        private static List<CityInfoInGroup> _data;
        private static List<CityInfo> _cities;

        /// <summary>
        /// 获取全部城市数据 for LongListSelector
        /// </summary>
        public static List<CityInfoInGroup> GetData()
        {
            if (_data == null)
            {
                _data = new List<CityInfoInGroup>();
                _cities = new List<CityInfo>();

                Dictionary<string, CityInfoInGroup> groups = new Dictionary<string, CityInfoInGroup>();

                foreach (char c in _groupLetters.ToUpper())
                {
                    CityInfoInGroup group = new CityInfoInGroup(c.ToString());
                    _data.Add(group);
                    groups[c.ToString()] = group;
                }

                StreamResourceInfo resource = App.GetResourceStream(new Uri("Controls/CityInfo.txt", UriKind.Relative));
                StreamReader sr = new StreamReader(resource.Stream);
                string line = sr.ReadLine();
                while (line != null)
                {
                    var ary = line.Split('=');
                    var cityInfo = new CityInfo { CityId = ary[0], Name = ary[1], Pinyin = ary[2] };
                    _cities.Add(cityInfo);
                    groups[CityInfo.GetFirstPinyinKey(cityInfo)].Add(cityInfo);

                    line = sr.ReadLine();
                }
            }

            return _data;
        }

        /// <summary>
        /// 获取包含指定关键字的城市数据 for LongListSelector
        /// </summary>
        public static List<CityInfoInGroup> GetData(string searchKey)
        {
            searchKey = searchKey.ToLower();

            List<CityInfoInGroup> result = new List<CityInfoInGroup>();
            List<CityInfoInGroup> data = GetData();

            foreach (CityInfoInGroup ciig in data)
            {
                List<CityInfo> childData = ciig.Where(p => p.Name.Contains(searchKey) || p.Pinyin.Contains(searchKey)).ToList();
                if (childData != null)
                {
                    CityInfoInGroup resultCiig = new CityInfoInGroup(ciig.IndexLetter);
                    resultCiig.AddRange(childData);

                    result.Add(resultCiig);
                }
            }

            return result;
        }
    }
}

2、使用数据
Controls/LongListSelectorDemo.xaml

<phone:PhoneApplicationPage
    x:Class="Demo.Controls.LongListSelectorDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <!--
            LongListSelector 的 GroupHeader 模板
        -->
        <DataTemplate x:Key="GroupHeaderTemplate">
            <Grid Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Transparent">
                <Border Background="{StaticResource PhoneAccentBrush}" Width="75" Height="75" HorizontalAlignment="Left">
                    <TextBlock Text="{Binding IndexLetter}" Foreground="{StaticResource PhoneForegroundBrush}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                </Border>
            </Grid>
        </DataTemplate>

        <!--
            LongListSelector 的 Item 模板
        -->
        <DataTemplate x:Key="ItemTemplate">
            <Grid Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Transparent">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" />
                    <TextBlock Text="{Binding Pinyin}" Style="{StaticResource PhoneTextLargeStyle}" Margin="10 0 0 0" />
                </StackPanel>
            </Grid>
        </DataTemplate>

        <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
        <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>

        <!--
            JumpList（弹出的索引窗口） 的 样式
        -->
        <Style x:Key="JumpListStyle" TargetType="phone:LongListSelector">
            <Setter Property="GridCellSize"  Value="113,113"/>
            <Setter Property="LayoutMode" Value="Grid" />
            <Setter Property="ItemTemplate">
                <Setter.Value >
                    <DataTemplate >
                        <Grid>
                            <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6">
                                <TextBlock Text="{Binding IndexLetter}"  Foreground="{Binding Converter={StaticResource ForegroundConverter}}" 
                                           FontWeight="Bold" FontSize="48" Padding="6" VerticalAlignment="Center" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <phone:LongListSelector Name="longListSelector" ItemsSource="{Binding}"
                                IsGroupingEnabled="True" HideEmptyGroups="True" LayoutMode="List"
                                SelectionChanged="longListSelector_SelectionChanged"
                                JumpListStyle="{StaticResource JumpListStyle}"
                                GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"                                                                           
                                ItemTemplate="{StaticResource ItemTemplate}">
        </phone:LongListSelector>
    </Grid>

</phone:PhoneApplicationPage>

Controls/LongListSelectorDemo.cs

/*
 * 演示 LongListSelector 控件的应用
 */

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using System.Windows.Media;
using System.Diagnostics;
using System.Threading.Tasks;

namespace Demo.Controls
{
    public partial class LongListSelectorDemo : PhoneApplicationPage
    {
        public LongListSelectorDemo()
        {
            InitializeComponent();
        }

        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            await Task.Run(() =>
            {
                this.longListSelector.Dispatcher.BeginInvoke(() =>
                {
                    // 指定 LongListSelector 的数据源
                    longListSelector.ItemsSource = CityData.GetData();
                });
            });

            base.OnNavigatedTo(e);
        }

        private void longListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var selectedItem = longListSelector.SelectedItem;

            // 滚动到指定的 item
            longListSelector.ScrollTo(selectedItem);
        }
    }
}