《LongListSelector》——— 使用LongListSelector来显示一个歌曲列表

   

首先、建立一个SingleSong类用于保存歌曲信息

using System;

namespace GT_MusicPlayer.Model
{
    public class SingleSong
    {
        public string SongNameKey { get; set; }

        public string SongName { get; set; }
        public string SingerName { get; set; }
    }
}

然后、就是准备我们用于显示的基础数据

        private ObservableCollection<SingleSong> _AllLst = null;
        public ObservableCollection<SingleSong> AllLst
        {
            get
            {
                if (_AllLst == null)
                {
                    GetAllLst();
                }
                return _AllLst;
            }

            protected set { _AllLst = value; RaisePropertyChanged("AllLst"); }
        }

        private void GetAllLst()
        {
            MediaLibrary nMediaLib = new MediaLibrary();
            _AllLst = new ObservableCollection<SingleSong>();
            foreach (Song item in nMediaLib.Songs)
            {
                string nStr = string.Empty;
                nStr = item.Name.Substring(0, 1);
                _AllLst.Add(new SingleSong 
                {
                    SongNameKey = FirstLetterHelper.GetCharSpellCode(nStr), //此处使用GB2312进行，得到首字母
                    SongName = item.Name,
                    SingerName = item.Artist.Name 
                });
            }
            nMediaLib.Dispose();
        }

接下来、是界面部分

因为LongListSelector是toolkit里的控件，所以要在LongListSelector中加入下面这句

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

加入我们的数据模板

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="GroupHeader">
            <Border Width="60" Height="60" Background="#FF235BB9" HorizontalAlignment="Left" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}" BorderBrush="White" BorderThickness="3">
                <TextBlock Text="{Binding Title}" FontSize="26" TextAlignment="Center" />
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="GroupItem">
            <Border Width="70" Height="70" Background="#FF235BB9" BorderBrush="White" BorderThickness="3" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}">
                <TextBlock Text="{Binding Title}" FontSize="34" TextAlignment="Center" />
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="ItemTmp">
            <StackPanel>
                <TextBlock Text="{Binding SongName}"></TextBlock>
                <TextBlock Text="{Binding SingerName}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

加入我们的LongListSelector控件

                    <toolkit:LongListSelector Grid.Row="1" Name="_LongList" toolkit:TiltEffect.IsTiltEnabled="True"
                                      GroupHeaderTemplate="{StaticResource GroupHeader}" GroupItemTemplate="{StaticResource GroupItem}"
                                      ItemTemplate="{StaticResource ItemTmp}" ItemsSource="{Binding AllLst, Converter={StaticResource ItemsToGroups1}}">
                        <toolkit:LongListSelector.GroupItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel/>
                            </ItemsPanelTemplate>
                        </toolkit:LongListSelector.GroupItemsPanel>
                    </toolkit:LongListSelector>

在这里我使用了“只转换器”因为“AllLst”并不是真正我们所要的“数据”所以对其进行转换分组。
转换器的cs代码

    public class ItemsToGroups : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var nItems = value as ObservableCollection<SingleSong>;
            if (nItems != null)
            {
                var nGroups = from item in nItems group item by item.SongNameKey into c orderby c.Key select new Group<SingleSong>(c.Key, c);

                return nGroups;
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

在xaml中引用值转换器ItemsToGroups类所在命名空间（假设在空间GT_MusicPlayer.ViewModel中）

<phone:PhoneApplicationPage  xmlns:my="clr-namespace:GT_MusicPlayer.ViewModel">

页面的字典集中加入“值转换器”

    <phone:PhoneApplicationPage.Resources>
        <my:ItemsToGroups x:Key="ItemsToGroups1"/>
    </phone:PhoneApplicationPage.Resources>

到此那，我们LongListSelector就算完成了，可以运行下，效果如上。

关于GB2312可以查看

Windows Phone Mango开发实践——GB2312编码转换