RSS

Sử dụng WrapPanel trong Windows Phone 7

21 Jan

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

     Tải về – 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 :
    • 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ả :
      <toolkit:WrapPanel> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Margin="10" Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> </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 :
    • <ScrollViewer VerticalScrollBarVisibility="Auto"> <toolkit:WrapPanel> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Margin="10" Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> <Rectangle Height="100" Width="200" Fill="Red" /> <Rectangle Height="100" Width="200" Fill="Red" Margin="10" /> </toolkit:WrapPanel> </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 :
    public class Student { public string Name { get; set; } } private List<Student> GetDummyData() { List<Student> lstStd = new List<Student> { new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"}, new Student {Name ="a"} }; return lstStd; }

    • 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, các bạn chú ý là đặt những phần mà mình định nghĩa cho Item trong ItemTemplate của ListBox nhé:

    • Full XAML code :
    <ListBox x:Name="lstData"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <toolkit:WrapPanel/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate > <StackPanel> <Button x:Name="btnData" > <StackPanel Orientation="Vertical"> <Image Source="ApplicationIcon.jpg" Width="100" Height="100" /> <TextBlock Text="{Binding Name}" Width="100" /> </StackPanel> </Button> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

    • Cuối cùng là vào MainPage thực hiện đổ dữ liệu :
      public MainPage() { InitializeComponent(); lstData.ItemsSource = GetDummyData(); }

    • 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

    Nguồn: http://phamnguyen.info

     

    3 responses to “Sử dụng WrapPanel trong Windows Phone 7

    1. hung

      02/23/2012 at 9:27 sáng

      sao mình tải về rồi, lúc vô referance thì nó chỉ có bản tháng 10 Oct11 chứ không có Nov11 và không xài được wrap vì nó báo không có bạn ơi ~.~

       
    2. Đinh Nhật Trung

      05/15/2012 at 2:00 chiều

      mình muốn lấy vị trí của từng Item thì phải làm sao ?
      hoặc khi click vào 1 Item thì giá trị gì sẽ trả về ?

      xin vui lòng gửi câu trả lời về : dinh.nhat.trung.89@gmail.com

       
    3. Dương

      09/06/2014 at 6:52 chiều

      Xin hỏi là mình muốn viết sự kiện cho mỗi item khi click vào button thì phải làm sao vậy

       

    Gửi phản hồi

    Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

    WordPress.com Logo

    Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

    Twitter picture

    Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

    Facebook photo

    Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

    Google+ photo

    Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

    Connecting to %s

     
    %d bloggers like this: