Wiki

Chúng ta sẽ thảo luận ba control mới trong bản Silverlight 2 RC0 không có trong bản beta 2  . Và ba control mới đó sẽ lần lượt được trình bày qua từng Tip of the Day bao gồm:

• ProgressBar
• ComboxBox
• PasswordBox

Và bài này chúng ta sẽ khám phá control  ComboBox .

Phần code sau đây trình bày làm thế nào để khai báo và định kích thước cho một combo box bằng mã XAML:

<ComboBox Width="100">
    <ComboBox.Items >
        <ComboBoxItem Content="1st Item"></ComboBoxItem>
        <ComboBoxItem Content="2nd Item"></ComboBoxItem>
        <ComboBoxItem Content="3rd Item"></ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

Nếu bạn chạy những dòng code trên bạn sẽ thấy một combo box mà không có một danh sách chọn nào như sau:

Click chuột vào hình tam giác màu đen bạn sẽ thấy một danh sách thả xuống với 3 tùy chọn được hiển thị như sau:

Nếu bạn muốn gán một lựa chọn mặc định cho combo box của bạn thì chỉ cẩn thêm thuộc tính IsSelected=”true” vào bất cứ item nào của ComboBoxItems của bạn như sau:

<ComboBox Width="100">
    <ComboBox.Items >
        <ComboBoxItem Content="1st Item"></ComboBoxItem>
        <ComboBoxItem Content="2nd Item"></ComboBoxItem>
        <ComboBoxItem IsSelected="True" Content="3rd Item"></ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

Và nếu bạn chạy đoạn mã trên, bạn sẽ thấy item thứ ba được chọn mặc định hiển thị lên combo box như sau:

Công cụ  ComboBox còn hỗ trợ data binding (tải các item từ dữ liệu bên dưới) . Những dòng code sau là một thí dụ minh họa cho điều này:

Một vài lưu ý về đoạn mã này:

• Bằng việc gán giá trị cho thuộc tính  DisplayMemberPath bạn có thể chỉ rõ thuộc tính nào trong dữ liệu mà bạn muốn hiển thị trong ComboBox. Trong trường hợp của chúng ta bên dưới, chúng ta sử dụng thuộc tính Name. Chúng ta cũng có thể gán thuộc tính DisplayMemberPath =”Price” và tất nhiên là nó sẽ hiển thị những giá của xe hơi trong  ComboBox.
• Gán giá trị cho thuộc tính  SelectedIndex cho phép bạn hiển thị item nào được chọn hiển thị trên ComboBox .
• Tôi có kèm theo một sự kiện để phát hiện khi sự lựa chọn trong ComboBox bị thay đổi. Thành phần SelectedItem của  ComboBox của chúng ta sẽ trả về cho chúng ta chiếc xe nào  được chọn tại bất cứ thời điểm nào.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace Password

{

    public partial class Page : UserControl

    {

        ComboBox _cars = new ComboBox();

        public Page()

        {

            InitializeComponent();

            List<Car> carList = new List<Car>();

            carList.Add(new Car() { Name = "Ferrari", Price = 150000 });

            carList.Add(new Car() { Name = "Honda", Price = 12500 });

            carList.Add(new Car() { Name = "Toyota", Price = 11500 });

            ComboBox cb = new ComboBox();

            _cars.DisplayMemberPath = "Name";

            _cars.ItemsSource = carList;

            _cars.SelectedIndex = 2;

            _cars.SelectionChanged += new SelectionChangedEventHandler(cb_SelectionChanged);

            MyCanvas.Children.Add(_cars);

        }

        void cb_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            Car selectedCar = (Car) _cars.SelectedItem;

            int price = selectedCar.Price;

            string carName = selectedCar.Name;

        }

    }

    public class Car

    {

        public string Name { get; set; }

        public int Price { get; set; }

    }

}

Thank you,
--Mike Snow