与众不同 windows phone (34) - 8.0 新的控件: LongListSelector
与众不同 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); } } }
OK
[源码下载]