I.Introduction
– Trong Windows Phone có sẵn một số Container như Grid, StackPanel, Canvas, tuy nhiên WrapPanel thì vẫn chưa có, mãi cho đến bộ Silverlight for Windows Phone toolkit ra đời thì WrapPanel mới được bổ sung
– Trong bài này mình xin chia sẻ về cách dùng WrapPanel trong WP7
II Fundamental
– WrapPanel thường được dùng để đổ dữ liệu theo luồng, vd như nhiều hình vuông sắp xếp từ trái sang phải ….
– Để sử dụng WrapPanel 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"
– Một cách đơn giản để sử dụng WrapPanel là chúng ta khai báo trong Xaml và thêm vào đó một số Control để xem kết quả :
1: <toolkit:WrapPanel>
2: <Rectangle Height="100" Width="200" Fill="Red" />
3: <Rectangle Margin="10" Height="100" Width="200" Fill="Red" />
4: <Rectangle Height="100" Width="200" Fill="Red" />
5: <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
6: <Rectangle Height="100" Width="200" Fill="Red" />
7: <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
8: <Rectangle Height="100" Width="200" Fill="Red" />
9: <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
10: <Rectangle Height="100" Width="200" Fill="Red" />
11: <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
12: <Rectangle Height="100" Width="200" Fill="Red" />
13: <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
14: <Rectangle Height="100" Width="200" Fill="Red" />
15: <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
16: <Rectangle Height="100" Width="200" Fill="Red" />
17: <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
18: </toolkit:WrapPanel>
– Chúng ta có thể tùy chỉnh luồng bên trong theo chiều từ trái sang phải hay ngược lại bằng cách tùy chỉnh thuộc tính FlowDirection :
– Khi Run ứng dụng chúng ta được kết quả sau :
III. Advanced
1.WrapPanel and ScrollViewer
– Chúng ta đã hiểu được cơ bản cách hoạt động của WrapPanel, và có vấn đề khác đặt ra là nếu như có quá nhiều Item trong WrapPanel dẫn đến tràn màn hình thì sao ???? có một cách đơn giản là chúng ta Kết hợp WrapPanel với ScrollViewer :
– Chỉ cần đặt WrapPanel trong ScrollViewer thì chúng ta ko cần phải lo vấn đề có nhiều Item dẫn đến tràn màn hình, các bạn có thể hiểu rõ hơn qua đoạn code sau :
01 <ScrollViewer VerticalScrollBarVisibility="Auto">
02 <toolkit:WrapPanel>
03 <Rectangle Height="100" Width="200" Fill="Red" />
04 <Rectangle Margin="10" Height="100" Width="200" Fill="Red" />
05 <Rectangle Height="100" Width="200" Fill="Red" />
06 <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
07 <Rectangle Height="100" Width="200" Fill="Red" />
08 <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
09 <Rectangle Height="100" Width="200" Fill="Red" />
10 <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
11 <Rectangle Height="100" Width="200" Fill="Red" />
12 <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
13 <Rectangle Height="100" Width="200" Fill="Red" />
14 <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
15 <Rectangle Height="100" Width="200" Fill="Red" />
16 <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
17 <Rectangle Height="100" Width="200" Fill="Red" />
18 <Rectangle Height="100" Width="200" Fill="Red" Margin="10" />
19 </toolkit:WrapPanel>
20 </ScrollViewer>
2.WrapPanel and ListBox
– Ngoài kết hợp với ScrollViewer thì WrapPanel còn kết hợp tốt với ListBox, thường thì để đổ dữ liệu vào ListBox mà theo một Flow như hình phía dưới (hình trong App của mình) :
– Rõ ràng là với nhu cầu Show dữ liệu theo từng ô và theo Flow thì việc kết hợp giữa ListBox và WrapPanel là một lựa chọn tốt nhất.
– Tiếp theo đây chúng ta cùng chuẩn bị 1 Database đơn giản nào :
1 public class Student
2 {
3 public string Name { get; set; }
4 }
01 private List<Student> GetDummyData()
02 {
03 List<Student> lstStd = new List<Student>
04 {
05 new Student {Name ="a"},
06 new Student {Name ="a"},
07 new Student {Name ="a"},
08 new Student {Name ="a"},
09 new Student {Name ="a"},
10 new Student {Name ="a"},
11 new Student {Name ="a"},
12 new Student {Name ="a"},
13 new Student {Name ="a"},
14 new Student {Name ="a"},
15 new Student {Name ="a"},
16 new Student {Name ="a"},
17 new Student {Name ="a"},
18 new Student {Name ="a"},
19 new Student {Name ="a"},
20 new Student {Name ="a"},
21 new Student {Name ="a"},
22 new Student {Name ="a"},
23 new Student {Name ="a"},
24 new Student {Name ="a"},
25 new Student {Name ="a"},
26 new Student {Name ="a"},
27 new Student {Name ="a"},
28 new Student {Name ="a"},
29 new Student {Name ="a"},
30 new Student {Name ="a"}
31
32 };
33 return lstStd;
34 }
– Bây giờ chúng ta vào XAML để khai báo sử dụng ListBox :
– Trong thuộc tùy chỉnh ItemPanel cho ListBox là WrapPanel để khi hiển thị sẽ hiển thị theo WrapPanel theo cú pháp:
– Tiếp theo chúng ta cần định nghĩa ItemTemplate cho từng Item để đổ dữ liệu vào, ở đây mình Binding thuộc tính Name của dữ liệu vào thuộc tính Text của TextBlock:
– Full XAML code :
01 <ListBox x:Name="lstData">
02 <ListBox.ItemsPanel>
03 <ItemsPanelTemplate>
04 <toolkit:WrapPanel/>
05 </ItemsPanelTemplate>
06 </ListBox.ItemsPanel>
07 <ListBox.ItemTemplate>
08 <DataTemplate >
09 <StackPanel>
10 <Button x:Name="btnData" >
11 <StackPanel Orientation="Vertical">
12 <Image Source="ApplicationIcon.jpg"
13 Width="100"
14 Height="100" />
15 <TextBlock Text="{Binding Name}" Width="100" />
16 </StackPanel>
17 </Button>
18 </StackPanel>
19 </DataTemplate>
20 </ListBox.ItemTemplate>
21 </ListBox>
– Cuối cùng là vào MainPage thực hiện đổ dữ liệu :
1 public MainPage()
2 {
3 InitializeComponent();
4 lstData.ItemsSource = GetDummyData();
5 }
– Bây giờ Run ứng dụng chúng ta thu được kết quả sau :
Hy vọng bài viết này sẽ mang đến thông tin hữu ích cho các bạn
/*It’s time for Windows Phone*/
Pham Nguyen 