与众不同 windows phone (34) - 8.0 新的控件: LongListSelector
作者：webabcd
介绍
与众不同 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
[源码下载]