Duy Nguyen's Blog

Hôm nay sau khi làm “advisor” cho một người bạn đang làm project môn học, quyết định viết bài này để chia sẽ với mọi người.

Như các bạn cũng đã biết, một trong những cái làm nên sự thành công của WPF đó chính là các hỗ trợ về Data binding, DataTemplate

Vấn đề nhỏ mà người bạn của tôi gặp phải như sau:

Có một cửa sổ, ở bên trái cửa sổ là list các item khác nhau, ở bên phải cửa sổ là vùng thể hiện thông tin chi tiết của item được chọn bên tay trái.

Yêu cầu đặt ra ở đây là ở bên trái, sẽ có rất nhiều các loại Item cùng được thể hiện chung với nhau, và tùy theo từng loại Item đó mà ở bên tay phải sẽ có những các thể hiện khác nhau. Thêm một điều nữa là mỗi loại Item có thể có những Properties khác nhau.

Hướng giải quyết tôi nhận thấy ở đây là ứng với mỗi loại Item, tôi sẽ tạo 1 UserControl có nhiệm vụ thể hiện những thông tin chi tiết của loại Item đó.

Nhưng còn một phương pháp nữa là các bạn có thể không cần tạo các UserControl mà chúng ta sẽ sử dụng DataTemplate. Tức là ứng với mỗi loại Item mà tôi chọn ở bên tay trái, tôi sẽ load DataTemplate tương ứng của nó lên.

Hãy xem một demo nhỏ về phương pháp ở trên:

Như mẫu ở trên, tôi tạo một cửa sổ được chia ra làm 2 phần. Các bạn đừng chú ý tới các System.Object, ở đây chúng chỉ tượng trưng cho các thông tin chi tiết của các Item.

Tiếp theo, tôi sẽ tạo những DataTemplate trong Resources của cửa sổ này:

  1: <Window.Resources>
  2:     <DataTemplate x:Key="template1">
  3:         <Button Content="You are using Button DataTemplate"/>
  4:     </DataTemplate>
  5:     <DataTemplate x:Key="template2">
  6:         <CheckBox Content="You are using CheckBox DataTemplate"/>
  7:     </DataTemplate>
  8: </Window.Resources>

Ứng với DataTemplate template1, tôi sẽ thể hiện thông tin bằng những button
Ứng với DataTemplate template2, tôi sẽ thể hiện thông tin bằng những checkbox

Tiếp theo, tôi cần xử lý việc load những DataTemplate tương ứng lên

  1: private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
  2: {
  3:     if (((ListBoxItem)listBox1.SelectedItem).Content.ToString() == "Button")
  4:     {
  5:         DataTemplate dt = this.FindResource("template1") as DataTemplate;
  6:         listBox2.ItemTemplate = dt;
  7:     }
  8: 
  9:     if (((ListBoxItem)listBox1.SelectedItem).Content.ToString() == "CheckBox")
 10:     {
 11:         DataTemplate dt = this.FindResource("template2") as DataTemplate;
 12:         listBox2.ItemTemplate = dt;
 13:     }            
 14:  }

Và đây là kết quả đạt được:

Các bạn có thể download source code của demo tại đây.