Hoang Ha's Blog

Trong bài viết này, tôi sẽ trình bày với các bạn cách tạo một điều khiển ComboBox bằng việc kết hợp giữa ListBox và TextBlock. Thừa nhận rằng bạn đã quen với việc tạo một project và usercontrol trong SilverLight 2. Dưới đầy là hình ảnh thu được sau khi ứng dụng hoàn thành:




Mã nguồn trang Page.xaml

<UserControl x:Class="ComboBox_SL.Page" Loaded="UserControl_Loaded"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid Background="#FFFFFF" x:Name="RootNode">
    <StackPanel x:Name="RootLayout" MouseLeftButtonDown="RootLayout_MouseLeftButtonDown">
        <StackPanel Orientation="Horizontal">
            <TextBox x:Name="MyTextBox" Height="18" FontSize="10" Text="ListBox" MinWidth="100"></TextBox>
            <Image Stretch="Fill" Source="jpg/combo.jpg" Width="10" />
        </StackPanel>
        <ListBox x:Name="MyControl" MaxHeight="100" Visibility="Collapsed" SelectionChanged="MyControl_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock FontSize="10" Text="{Binding}" />   
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <TextBlock x:Name="txtDisplay"></TextBlock>
    </StackPanel>
        </Grid>
</UserControl>

Mã nguồn trang Page.cs

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 ComboBox_SL
{
    public partial class Page : UserControl
    {
        public ListBox TheList { get { return MyControl; } }
        public event SelectionChangedEventHandler SelectedIndexChanged;
        public Page()
        {
            InitializeComponent();
        }

        private void RootLayout_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (MyControl.Visibility == Visibility.Visible)
            {
                MyControl.Visibility = Visibility.Collapsed;
            }
            else
            {
                MyControl.Visibility = Visibility.Visible;
            } 
        }

        private void MyControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            
            MyTextBox.Text = MyControl.SelectedItem.ToString();
            txtDisplay.Text = "Bạn đã chọn " + MyTextBox.Text;
            MyControl.Visibility = Visibility.Collapsed;

            if (SelectedIndexChanged != null)
            {
                SelectedIndexChanged(sender, e);
            }
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 10; i++)
            {
                MyControl.Items.Add(string.Format("Item {0}", i));
            }

            MyControl.SelectedIndex = 0;
        } 
    }
}

Với việc sử dụng điều khiển này như là một trang con thì bạn có thể chỉ cần dùng khai báo sau (bạn nhớ đăng ký namespace trước khi sử dụng control):

<MyControl:ComboBox x:Name="xyz" Canvas.Left="400" Canvas.Top="50"></MyControl:ComboBox>

Hy vọng bài viết trên có thể giúp đỡ các bạn!