I.Introduction
– LongListSelector là một Control khá hay trong bộ Windows Phone Tool kit, giúp cho người dùng có trải nghiệm mới lạ khi sử dụng, thông thường LongListSelector dùng để hiển thị dữ liệu và gom nhóm dữ liệu.
– Trong bài này mình xin chia sẻ về cách sử dụng LongListSelector.
II.Fundamental
– Để sử dụng LongListSelector chúng ta phải cài đặt bộ Silverlight for Windows Phone Toolkit
– Sau khi cài xong các bạn tạo mới một Windows Phone Project, kế tiếp là right-click vào Refercences->Add thư viện Microsoft.Phone.Controls.Toolkit.dll vào . (theo đường dẩn C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Nov11\Bin)
– Kế tiếp là khai báo thư viện để sử dụng trong Mainpage.xaml :
1: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
– LongListSelector cho phép 2 các thể hiện dữ liệu :
- Flat List : Cách thể hiện dữ liệu này giống như là Listbox bình thường
- Group List : Đây là cách thể hiện dữ liệu đặc trưng cho LongListSelector
Hình LongListSelector ở dạng Group List
– Sau đây là một ví dụ đầy để về LongListSelector :
1: <toolkit:LongListSelector
2: ItemsSource="{StaticResource movies}"
3: ListHeaderTemplate="{StaticResource movieListHeader}"
4: GroupHeaderTemplate="{StaticResource movieGroupHeader}"
5: GroupFooterTemplate="{StaticResource movieGroupFooter}"
6: GroupItemTemplate="{StaticResource groupItemHeader}"
7: ItemTemplate="{StaticResource movieItemTemplate}">
8: </toolkit:LongListSelector>
– Trong LongListSelector chúng ta cần chú ý 1 số thuộc tính sau đây :
- ListHeaderTemplate
- GroupHeaderTamplate
- GroupFooterTamplate
- GroupItemTemplate
- ItemTemplate.
– Về Tính năng của từng Tamplate phía trên chúng ta có thể dể dàng hiểu rõ ở các hình sau :
– Đối với từng Tamplate phía trên chúng ta phải định nghĩa để Binding dữ liệu cho chính xác.
– Ngoài ra còn 1 số thuộc tính khác cũng rất quan trọng như 
- IsFlatList : thuộc tính này kiểu bool nếu là true thì nó sẽ thể hiện LongListSelector ở đạng FlatList
- SelectedItem : trả về Item đã Select
- ShowListFooter : hiển thị hay ko hiển thị ListFooter
- ShowListHeader: hển thị hay ko hiển thị ListHeader
- GroupItemPanel: Chỉ định cách thể hiện GroupItem
III. Advanced
- – Tiếp theo đây mình sẽ chia sẻ cách làm 1 ứng dụng demo đơn giản sử dụng LongListSelector.
- – Chúng ta tạo project như bình thường và làm đủ các bước mình đã chia sẻ ở phần II.
- – Để sử dụng LongListSelector ở dạng GruopList chúng ta phải làm 1 lớp để gop nhóm dữ liêu :
1: public class Group<T>: IEnumerable<T>
2: {
3: public Group(String Name, IEnumerable<T> item)
4: {
5: this.Title = Name;
6: this.Items = item;
7: }
8:
9: public override string ToString()
10: {
11: return this.Title;
12: }
13:
14: public override bool Equals(object obj)
15: {
16: Group<T> input = obj as Group<T>;
17: return (input != null) && this.Title.Equals(input.Title);
18: }
19:
20: public IEnumerator<T> GetEnumerator()
21: {
22: return Items.GetEnumerator();
23: }
24:
25: System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
26: {
27: return this.Items.GetEnumerator();
28: }
29:
30: public IEnumerable<T> Items { get; set; }
31:
32: public string Title { get; set; }
33: }
– Ở lớp trên dữ liệu sẽ được lưu ở IList Items và Tên Group sẽ là Title.
– Tiếp theo chúng ta làm 1 cơ sở dữ liệu đơn giản :
1: public class City
2: {
3: public String Name { get; set; }
4: public String Country { get; set; }
5: public String Language { get; set; }
6: }
– Bây giờ chúng ta quay lại định nghĩa cho ListListSelector, mình sẽ định nghĩa trực tiếp ItemTemplate, GroupHeaderTemplate, GroupItemTemplate, GroupItemPanel .
1: <toolkit:LongListSelector x:Name="llstCity">
2: <toolkit:LongListSelector.ItemTemplate>
3: <DataTemplate>
4: <StackPanel>
5: <TextBlock Text="{Binding Name}" FontSize="35" />
6: <TextBlock Text="{Binding Language}" FontSize="35" />
7: </StackPanel>
8: </DataTemplate>
9: </toolkit:LongListSelector.ItemTemplate>
10: <toolkit:LongListSelector.GroupItemsPanel>
11: <ItemsPanelTemplate>
12: <toolkit:WrapPanel />
13: </ItemsPanelTemplate>
14: </toolkit:LongListSelector.GroupItemsPanel>
15: <toolkit:LongListSelector.GroupHeaderTemplate>
16: <DataTemplate>
17: <StackPanel Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Left" Width="50" Height="50">
18: <TextBlock Text="{Binding Title}" FontSize="35" Foreground="Black"/>
19: </StackPanel>
20: </DataTemplate>
21: </toolkit:LongListSelector.GroupHeaderTemplate>
22: <toolkit:LongListSelector.GroupItemTemplate>
23: <DataTemplate>
24: <Border Background="YellowGreen" Width="99" Height="99" Margin="6">
25: <TextBlock Text="{Binding Title}" FontSize="40" Foreground="Black"/>
26: </Border>
27: </DataTemplate>
28: </toolkit:LongListSelector.GroupItemTemplate>
29: </toolkit:LongListSelector>
– Cuối cùng là xử lý trong code behide :
1: public partial class MainPage : PhoneApplicationPage
2: {
3: // Constructor
4: public MainPage()
5: {
6: InitializeComponent();
7: List<City> source = new List<City>();
8: source.Add(new City() { Name = "Madrid", Country = "ES", Language = "Spanish" });
9: source.Add(new City() { Name = "Barcelona", Country = "ES", Language = "Spanish" });
10: source.Add(new City() { Name = "Mallorca", Country = "ES", Language = "Spanish" });
11: source.Add(new City() { Name = "Las Vegas", Country = "US", Language = "English" });
12: source.Add(new City() { Name = "Dalas", Country = "US", Language = "English" });
13: source.Add(new City() { Name = "New York", Country = "US", Language = "English" });
14: source.Add(new City() { Name = "London", Country = "UK", Language = "English" });
15: source.Add(new City() { Name = "Mexico", Country = "MX", Language = "Spanish" });
16: source.Add(new City() { Name = "Milan", Country = "IT", Language = "Italian" });
17: source.Add(new City() { Name = "Roma", Country = "IT", Language = "Italian" });
18: source.Add(new City() { Name = "Paris", Country = "FR", Language = "French" });
19:
20: // Gom nhóm danh sách dữ liệu theo Country
21: var CityGroupData = source.GroupBy(p => p.Country).Select(p => new Group<City>(p.Key, p));
22:
23: this.llstCity.ItemsSource = CityGroupData;
24: }
25: }
– Bây giờ chỉ còn Run ứng dụng và xem kết quả :
Hy vọng bài viết này sẽ hữu ích với các bạn !
Pham Nguyen 