与众不同 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
[源码下载]

posted @   webabcd  阅读(3418)  评论(16编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示