《LongListSelector》——— 使用LongListSelector来显示一个歌曲列表
首先、建立一个SingleSong类用于保存歌曲信息
1 using System; 2 3 namespace GT_MusicPlayer.Model 4 { 5 public class SingleSong 6 { 7 public string SongNameKey { get; set; } 8 9 public string SongName { get; set; } 10 public string SingerName { get; set; } 11 } 12 }
然后、就是准备我们用于显示的基础数据
1 private ObservableCollection<SingleSong> _AllLst = null; 2 public ObservableCollection<SingleSong> AllLst 3 { 4 get 5 { 6 if (_AllLst == null) 7 { 8 GetAllLst(); 9 } 10 return _AllLst; 11 } 12 13 protected set { _AllLst = value; RaisePropertyChanged("AllLst"); } 14 } 15 16 private void GetAllLst() 17 { 18 MediaLibrary nMediaLib = new MediaLibrary(); 19 _AllLst = new ObservableCollection<SingleSong>(); 20 foreach (Song item in nMediaLib.Songs) 21 { 22 string nStr = string.Empty; 23 nStr = item.Name.Substring(0, 1); 24 _AllLst.Add(new SingleSong 25 { 26 SongNameKey = FirstLetterHelper.GetCharSpellCode(nStr), //此处使用GB2312进行，得到首字母 27 SongName = item.Name, 28 SingerName = item.Artist.Name 29 }); 30 } 31 nMediaLib.Dispose(); 32 }
接下来、是界面部分
因为LongListSelector是toolkit里的控件，所以要在LongListSelector中加入下面这句
1 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
加入我们的数据模板
1 <phone:PhoneApplicationPage.Resources> 2 <DataTemplate x:Key="GroupHeader"> 3 <Border Width="60" Height="60" Background="#FF235BB9" HorizontalAlignment="Left" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}" BorderBrush="White" BorderThickness="3"> 4 <TextBlock Text="{Binding Title}" FontSize="26" TextAlignment="Center" /> 5 </Border> 6 </DataTemplate> 7 <DataTemplate x:Key="GroupItem"> 8 <Border Width="70" Height="70" Background="#FF235BB9" BorderBrush="White" BorderThickness="3" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}"> 9 <TextBlock Text="{Binding Title}" FontSize="34" TextAlignment="Center" /> 10 </Border> 11 </DataTemplate> 12 <DataTemplate x:Key="ItemTmp"> 13 <StackPanel> 14 <TextBlock Text="{Binding SongName}"></TextBlock> 15 <TextBlock Text="{Binding SingerName}"></TextBlock> 16 </StackPanel> 17 </DataTemplate> 18 </phone:PhoneApplicationPage.Resources>
加入我们的LongListSelector控件
1 <toolkit:LongListSelector Grid.Row="1" Name="_LongList" toolkit:TiltEffect.IsTiltEnabled="True" 2 GroupHeaderTemplate="{StaticResource GroupHeader}" GroupItemTemplate="{StaticResource GroupItem}" 3 ItemTemplate="{StaticResource ItemTmp}" ItemsSource="{Binding AllLst, Converter={StaticResource ItemsToGroups1}}"> 4 <toolkit:LongListSelector.GroupItemsPanel> 5 <ItemsPanelTemplate> 6 <toolkit:WrapPanel/> 7 </ItemsPanelTemplate> 8 </toolkit:LongListSelector.GroupItemsPanel> 9 </toolkit:LongListSelector>
在这里我使用了“只转换器”因为“AllLst”并不是真正我们所要的“数据”所以对其进行转换分组。
转换器的cs代码
1 public class ItemsToGroups : IValueConverter 2 { 3 public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 4 { 5 var nItems = value as ObservableCollection<SingleSong>; 6 if (nItems != null) 7 { 8 var nGroups = from item in nItems group item by item.SongNameKey into c orderby c.Key select new Group<SingleSong>(c.Key, c); 9 10 return nGroups; 11 } 12 return null; 13 } 14 15 public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 16 { 17 return null; 18 } 19 }
在xaml中引用值转换器ItemsToGroups类所在命名空间（假设在空间GT_MusicPlayer.ViewModel中）
1 <phone:PhoneApplicationPage xmlns:my="clr-namespace:GT_MusicPlayer.ViewModel">
页面的字典集中加入“值转换器”
1 <phone:PhoneApplicationPage.Resources> 2 <my:ItemsToGroups x:Key="ItemsToGroups1"/> 3 </phone:PhoneApplicationPage.Resources>
到此那，我们LongListSelector就算完成了，可以运行下，效果如上。
关于GB2312可以查看
