Tùy Chỉnh Listbox trong Windows Phone 7
I.Introduction:
-Trong bài này mình xin chia sẻ cách tùy chỉnh Listbox trong Windows Phone 7.
-Sau bài này chúng ta sẽ biết làm thế nào để đưa kiểu dữ liệu mà mình mong muốn và Listbox và làm sao Select một đối tượng trong Listbox(Một đối tượng ở đây có thể là Student chẳng hạn).
-Để bắt đầu bài này chúng ta phải chắc chắn là đã cài Windows Phone 7 Tool cho Visual Studio 2010
II.Creating Project and Coding:
– Mở Visual Studio lên và tạo Windows Phone Application
– Tiếp theo chúng ta tạo 1 Listbox cho giao diện như đoạn code sau:
1: <phone:PhoneApplicationPage
2: x:Class="AutoComplete.MainPage"
3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6: xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9: mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
10: FontFamily="{StaticResource PhoneFontFamilyNormal}"
11: FontSize="{StaticResource PhoneFontSizeNormal}"
12: Foreground="{StaticResource PhoneForegroundBrush}"
13: SupportedOrientations="Portrait" Orientation="Portrait"
14: shell:SystemTray.IsVisible="True">
15:
16: <!--LayoutRoot is the root grid where all page content is placed-->
17: <Grid x:Name="LayoutRoot" Background="Transparent">
18: <Grid.RowDefinitions>
19: <RowDefinition Height="Auto"/>
20: <RowDefinition Height="*"/>
21: </Grid.RowDefinitions>
22:
23: <!--TitlePanel contains the name of the application and page title-->
24: <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
25: <TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
26: <TextBlock x:Name="PageTitle" Text="Custumize ListBox" Margin="9,-7,0,0" FontSize="40"/>
27: </StackPanel>
28:
29: <!--ContentPanel - place additional content here-->
30: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
31: <ListBox Name="lbx_ListBox">
32: <ListBox.ItemTemplate>
33: <DataTemplate>
34: <StackPanel>
35: <TextBlock Text="{Binding Name}" FontSize="26"/>
36: <TextBlock Text="{Binding Age}"/>
37: </StackPanel>
38: </DataTemplate>
39: </ListBox.ItemTemplate>
40: </ListBox>
41: </Grid>
42: </Grid>
43:
44: <!--Sample code showing usage of ApplicationBar-->
45: <!--<phone:PhoneApplicationPage.ApplicationBar>
46: <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
47: <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
48: <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
49: <shell:ApplicationBar.MenuItems>
50: <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
51: <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
52: </shell:ApplicationBar.MenuItems>
53: </shell:ApplicationBar>
54: </phone:PhoneApplicationPage.ApplicationBar>-->
55:
56: </phone:PhoneApplicationPage>
– Bây giờ chúng ta làm một Cơ Sỡ Dữ Liệu đơn giản :
1: public class Student
2: {
3: public string Name { get; set; }
4: public string Age { get; set; }
5: public Student()
6: {
7: }
8: public List<Student> getData()
9: {
10: List<Student> st = new List<Student> {
11: new Student{Name="Pham Nguyen",Age = "22"},
12: new Student{Name="Phi Diep",Age = "22"},
13: new Student{Name="Khang Tran",Age = "28"},
14: new Student{Name="Trong Khoa",Age = "28"},
15: new Student{Name="Quan Huy",Age = "28"},
16: new Student{Name="Huy Chau",Age = "28"},
17: new Student{Name="Hien Nguyen",Age = "28"},
18: new Student{Name="Minh Sang",Age = "28"},
19: };
20: return st;
21: }
22: }
-Bây giờ xử lý sự kiện SelectionChanged:
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Net;
5: using System.Windows;
6: using System.Windows.Controls;
7: using System.Windows.Documents;
8: using System.Windows.Input;
9: using System.Windows.Media;
10: using System.Windows.Media.Animation;
11: using System.Windows.Shapes;
12: using Microsoft.Phone.Controls;
13:
14: namespace AutoComplete
15: {
16: public partial class MainPage : PhoneApplicationPage
17: {
18: // Constructor
19: public MainPage()
20: {
21: InitializeComponent();
22: this.lbx_ListBox.SelectionChanged += new SelectionChangedEventHandler(lbx_ListBox_SelectionChanged);
23: Student t = new Student();
24: this.lbx_ListBox.ItemsSource = t.getData();
25: }
26:
27: void lbx_ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
28: {
29: Student item = lbx_ListBox.SelectedItem as Student;
30: MessageBox.Show("Name: " + item.Name + "\n" + "Age: " + item.Age);
31: }
32: }
33: }
Chạy ứng dụng và xem kết quả :
– Chúng ta cần lưu ý một chút ở đoạn Code tùy Chỉnh cho Listbox:
<ListBox Name="lbx_ListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" FontSize="26"/>
<TextBlock Text="{Binding Age}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
-Chúng ta phải làm như cú pháp trên thì mới tùy chỉnh được Item, cụ thể là thêm Control chúng ta cần vào trong thẻ <DataTemplate></DataTemplate>.
-Trong thẻ <DataTemplate> chỉ có thể chứa một Control, do đó để thêm các Control khác vào thẻ này chúng ta phải chứa các Control trong những Layout Control như StackPanel, Grid ……
/*I love technology*/
Pham Nguyen 