I.Introdution

Listbox chắc hẳn là một control rất quen thuộc với toàn thể chúng ta, thông thường Listbox dùng để hiển thị danh sách dữ liệu.

Trong Windows Phone mặc định Listbox hiển thị dữ liệu theo chiều dọc, nhưng trong một số trưởng hợp chúng ta cần hiển thị theo chiều ngang thì thế nào ???

Trong bài này mình xin chia sẻ cách hiển thị Listbox theo chiều ngang trong Windows Phone

II.Fundamental

Chúng ta để ý rằng các Item trong Listbox bình thường sẽ thể hiện theo chiều dọc và hiển thị từ trên xuống dưới.

Thật ra bản chất ListBox trong WP được Microsoft cài ItemPanelTemplate chứa một Stackpanel theo chiều dọc kết hợp với Scrollviewer nên khi Item quá nhiều thì Listbox sẽ cho phép scroll.

Do vậy để hiển thị Listbox theo chiều ngang chúng ta chỉ cần tùy chỉnh lại Stackpanel trong ItemPanelTemplate và cho thuộc tính Orientation của Stackpanel này là Horizontal, vậy là xong. Listbox sẽ hiển thị dữ liệu theo chiều ngang

   1: <ListBox.ItemsPanel>

   2:     <ItemsPanelTemplate>

   3:         <StackPanel Orientation="Horizontal"></StackPanel>

   4:     </ItemsPanelTemplate>

   5: </ListBox.ItemsPanel>

Khi Listbox đã hiển thị theo chiều nang rồi thì đương nhiên việc scroll cũng phải theo chiều ngang và croll dọc phải được Disabled, chúng ta chỉ cần chỉ định vào Listbox thông qua thuộc tính ScrollViewer.VerticalScrollBarVisibility và ScrollViewer.HorizontalScrollBarVisibility, hai thuộc tính này giúp chúng ta tùy chỉnh dể dàng việc ẩn hay hiện ScrollViewer theo chiều thương ứng. Trong thường hợp Scroll theo chiều ngang chúng ta cần set thuộc tính này như sau :

   1: ScrollViewer.VerticalScrollBarVisibility="Disabled"

   2: ScrollViewer.HorizontalScrollBarVisibility="Auto" 

Quá dể dàng có phải không nào, và bây giờ mình có kết quả :

source code :

   1: <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled"

   2:          ScrollViewer.HorizontalScrollBarVisibility="Auto"                     

   3:          Visibility="Visible" Name="lstArtistic">

   4:     <ListBox.ItemsPanel>

   5:         <ItemsPanelTemplate>

   6:             <StackPanel Orientation="Horizontal"></StackPanel>

   7:         </ItemsPanelTemplate>

   8:     </ListBox.ItemsPanel>

   9: </ListBox>

Hy vọng bài viết này sẽ hữu ích với các bạn.