Out of the ordinary Windows Phone (34) - 8 new control: LongListSelector

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

[Download]


Out of the ordinary Windows Phone (34) - 8 new control: LongListSelector



Author: webabcd


Introduction
Out of the ordinary Windows Phone NEW 8 controls



Example
Application of demo LongListSelector control

1, Provide data
Controls/CityInfo.txt

101330101=Macao=aomen
101080904=Abaga=abagaqi
101271901=ABA=aba
101050104=A Cheng=acheng
101081102=Arxan=aershan
101131504=Akeqi=aheqi
101130801=Akesu=akesu
101131503=A Ketao=aketao
101130701=Alar=alaer
101131606=Alashankou=alashankou
101081202=Alxa Right Banner=alashanyouqi
101081201=Alxa Left Banner=alashanzuoqi
101131401=Aletai=aletai
101140701=Ali=ali
101080603=Aru flag=aluqi
101081003=Arong Qi=arongqi
101131501=Atushi=atushi
101130809=Awati=awati
101050503=An Da=anda
101160208=Stable=anding
101140605=Amdo=anduo
101240612=An Fu=anfu
101090220=Anguo=anguo
101250704=Anhua=anhua
101210203=Anji=anji
101110701=Ankang =ankang

Controls/CityInfo.cs

namespace Demo.Controls
{
    /// <summary>
    /// City the information entity
    /// </summary>
    public class CityInfo
    {
        /// <summary>
        /// City logo
        /// </summary>
        public string CityId { get; set; }
        /// <summary>
        /// The city name
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// City Pinyin
        /// </summary>
        public string Pinyin { get; set; }

        /// <summary>
        /// Access to the city the first letter of the alphabet
        /// </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>
    /// Provides data for the LongListSelector entity classes
    /// </summary>
    public class CityInfoInGroup : List<CityInfo>
    {
        public CityInfoInGroup(string indexLetter)
        {
            IndexLetter = indexLetter;
        }

        // A set of data the first letter of the alphabet
        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>
    /// City data (to provide data for LongListSelector)
    /// </summary>
    public class CityData
    {
        // According to the first letter of the alphabet city data packet
        private static readonly string _groupLetters = "#abcdefghijklmnopqrstuvwxyz";

        private static List<CityInfoInGroup> _data;
        private static List<CityInfo> _cities;

        /// <summary>
        /// Get all the city data 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>
        /// Gets the city data contains the specified keyword 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, The use of data
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 templates
        -->
        <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 templates
        -->
        <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 (index pop-up window) style
        -->
        <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

/*
 * Application of demo LongListSelector control
 */

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(() =>
                {
                    // The specified LongListSelector data source
                    longListSelector.ItemsSource = CityData.GetData();
                });
            });

            base.OnNavigatedTo(e);
        }

        private void longListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var selectedItem = longListSelector.SelectedItem;

            // Scroll to the specified item
            longListSelector.ScrollTo(selectedItem);
        }
    }
}



OK
[Download]

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Marcus at December 04, 2013 - 5:16 PM