Cách Tùy Chỉnh Combobox và sử dụng SelectedValuePath trong Silverlight
I.Introdoction:
- Combobox là một control rất quen thuộc với tất cả chúng ta, Combobox đã sớm xuất hiện ở tất cả các ứng dụng từ Windows cho đến Web.
- Với Combobox thuần tí chúng ta chỉ có thể Show một dòng dữ liệu trên một Item, vậy nếu như chúng ta muốn đưa nhiều Dữ liệu của một đối tượng vào một Item của Combobox thì sao ??? Và với nhiều thông tin dữ liệu như thế nếu chúng ta muốn Select một Item thì Values vừa Select là gì ?????
- Trong bài này mình xin chia sẻ cách Tùy chỉnh Combobox và Sử dụng SelectValuesPath trong Silverlight.
II.Creating Project And Coding
- Mở Visual Studio 2010 lên vào tạo Silveright Application Project :
- Tiếp theo chúng ta tạo giao diện cho ứng dụng gồm một Combobox và một TextBlock :
- Để Customize Combobox chúng ta chỉ cần thêm Control ở giữa đoạn Code Combobox sau :
<ComboBox>
<ComboBox.ItemTemplate>
<DataTemplate>
<!-- Thêm Control Vào Đây-->
<StackPanel>
<!-- Dùng StackPanel hay
Layout Control Khác để chứa nhiều Control-->
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
- Trong trường hợp dữ liệu chúng ta có nhiều Field và khi Show trong Combobox là Họ tên chẳng hạn, và chúng ta muốn lấy là Mã Số, thì chúng ta chỉ cần thêm đoạn code SelectedValuePath="Ten_Field"
- Trong trường hợp này thuộc thính mình muốn lấy là MSSV nên Code XAML của Combobox sẽ là :
<ComboBox Grid.Row="2" Name="cbx_Student"
SelectedValuePath="MSSV" />
- Chúng ta có đoạn code XAML của ứng dụng :
1: <UserControl x:Class="SeclectionValuesAndVaLuesPath.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: mc:Ignorable="d"
7: d:DesignHeight="300" d:DesignWidth="400">
8:
9: <Grid x:Name="LayoutRoot">
10: <Grid.RowDefinitions>
11: <RowDefinition Height="36*" />
12: <RowDefinition Height="25*" />
13: <RowDefinition Height="26*" />
14: <RowDefinition Height="27*" />
15: <RowDefinition Height="186*" />
16: </Grid.RowDefinitions>
17: <StackPanel Grid.Row="1">
18: <StackPanel.Background>
19: <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
20: <GradientStop Color="Black" Offset="0" />
21: <GradientStop Color="White" Offset="1" />
22: </LinearGradientBrush>
23: </StackPanel.Background>
24: </StackPanel>
25: <ComboBox Grid.Row="2" Name="cbx_Student" SelectedValuePath="MSSV">
26: <ComboBox.ItemTemplate>
27: <DataTemplate>
28: <StackPanel>
29: <TextBlock Text="{Binding HoTen}" Foreground="BurlyWood" FontStyle="Italic" FontSize="18"/>
30: <TextBlock Text="{Binding Phone}" FontSize="12"/>
31: </StackPanel>
32: </DataTemplate>
33: </ComboBox.ItemTemplate>
34: </ComboBox>
35: <TextBlock Grid.Row="3" Height="23" HorizontalAlignment="Left" FontSize="14" Margin="0,4,0,0" Name="lbl_Result" Text="" VerticalAlignment="Top" Width="400" />
36: <Grid.Background>
37: <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
38: <GradientStop Color="#FF7C7CEB" Offset="0" />
39: <GradientStop Color="White" Offset="1" />
40: </LinearGradientBrush>
41: </Grid.Background>
42: </Grid>
43: </UserControl>
– Bây giờ chúng ta làm đột Cơ Sở Dữ Liệu đơn giản :
1: public class Student
2: {
3: public string MSSV { get; set; }
4: public string HoTen { get; set; }
5: public string Phone { get; set; }
6: }
– Tiếp theo chúng ta vào xử lý sự kiện SelectionChanged và Load dữ liệu vào Combobox :
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:
13: namespace SeclectionValuesAndVaLuesPath
14: {
15: public partial class MainPage : UserControl
16: {
17: public MainPage()
18: {
19: InitializeComponent();
20: cbx_Student.ItemsSource = getData();
21: this.cbx_Student.SelectionChanged += new SelectionChangedEventHandler(cbx_Student_SelectionChanged);
22: cbx_Student.SelectedIndex = 0;
23: }
24:
25: void cbx_Student_SelectionChanged(object sender, SelectionChangedEventArgs e)
26: {
27: lbl_Result.Text = "MSSV: " + cbx_Student.SelectedValue;
28: }
29: public List<Student> getData()
30: {
31: List<Student> myList = new List<Student>
32: {
33: new Student {MSSV = "0851010169",HoTen = "Phạm Phương Nguyên", Phone = "016 9994 2228"},
34: new Student { MSSV = "0851010121",HoTen = "Tran Chi Khang",Phone = "12344657688"},
35: new Student {MSSV = "0757393729",HoTen = "Nguyen Thi Phi Diep",Phone = "032958299235"},
36: new Student {MSSV = "0148238424",HoTen = "Nguyen Ngoc Hien",Phone = "032523582389"},
37: new Student {MSSV = "032952385523",HoTen = "Nhac Linh Sang",Phone = "32523523524"},
38: new Student {MSSV = "098767987333",HoTen = "Lenh Ho Sung", Phone = "352572387522"}
39: };
40: return myList;
41: }
42: }
43: }
- Cuối cùng là chạy ứng dụng và xem kết quả :
/*Web is beautiful*/
Pham Nguyen 