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

原文:与众不同 windows phone (34) - 8.0 新的控件: LongListSelector[源码下载]

[align=center]与众不同 windows phone (34) - 8.0 新的控件: LongListSelector[/align]

作者：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
[源码下载]