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

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

新的控件 - LongListSelector

示例
演示 LongListSelector 控件的应用

1、提供数据
Controls/CityInfo.txt

=澳门=aomen

=阿巴嘎=abagaqi

=阿坝=aba

=阿城=acheng

=阿尔山=aershan

=阿合奇=aheqi

=阿克苏=akesu

=阿克陶=aketao

=阿拉尔=alaer

=阿拉山口=alashankou

=阿右旗=alashanyouqi

=阿左旗=alashanzuoqi

=阿勒泰=aletai

=阿里=ali

=阿鲁旗=aluqi

=阿荣旗=arongqi

=阿图什=atushi

=阿瓦提=awati

=安达=anda

=安定=anding

=安多=anduo

=安福=anfu

=安国=anguo

=安化=anhua

=安吉=anji

=安康=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[]);

            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 > ; } }

    }

}

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[], Name = ary[], Pinyin = ary[] };

                    _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);

        }

    }

}

OK
[源码下载]

秒客网

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

相关文章