WPF：下拉列表的简单实现

最近在一个WPF项目中用到一个下拉列表，随着用户输入字符而进行显示，使用了绑定等知识，虽然实现比较简单，可是在性能上也是想了很多办法终于才勉强可以用，与大家分享下。

用于页面绑定的模型类：

[csharp] view plain copy print ?

1. public class MainWindowModel : INotifyPropertyChanged  
2.     {  
3.         public event PropertyChangedEventHandler PropertyChanged;  
4.   
5.         private ObservableCollection<Content> names = new ObservableCollection<Content>();  
6.   
7.         private bool popupIsOpen = false;  
8.   
9.         public bool PopupIsOpen  
10.         {  
11.             get   
12.             {   
13.                 return popupIsOpen;  
14.             }  
15.   
16.             set   
17.             {   
18.                 popupIsOpen = value;  
19.   
20.                 this.PropertyChanged(this, new PropertyChangedEventArgs("PopupIsOpen"));  
21.             }  
22.         }  
23.   
24.         public ObservableCollection<Content> Names  
25.         {  
26.             get  
27.             {  
28.                 return this.names;  
29.             }  
30.   
31.             set  
32.             {  
33.                 this.names = value;  
34.   
35.                 this.PropertyChanged(this, new PropertyChangedEventArgs("Names"));  
36.             }  
37.         }  
38.     }  
39.   
40.     public class Content  
41.     {  
42.         private string name=string.Empty;  
43.   
44.         public string Name  
45.         {  
46.             get  
47.             {  
48.                 return this.name;  
49.             }  
50.   
51.             set  
52.             {  
53.                 name = value;  
54.             }  
55.         }  
56.     }  

public class MainWindowModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<Content> names = new ObservableCollection<Content>();

        private bool popupIsOpen = false;

        public bool PopupIsOpen
        {
            get 
            { 
                return popupIsOpen;
            }

            set 
            { 
                popupIsOpen = value;

                this.PropertyChanged(this, new PropertyChangedEventArgs("PopupIsOpen"));
            }
        }

        public ObservableCollection<Content> Names
        {
            get
            {
                return this.names;
            }

            set
            {
                this.names = value;

                this.PropertyChanged(this, new PropertyChangedEventArgs("Names"));
            }
        }
    }

    public class Content
    {
        private string name=string.Empty;

        public string Name
        {
            get
            {
                return this.name;
            }

            set
            {
                name = value;
            }
        }
    }

后台代码：

[csharp] view plain copy print ?

1. /// <summary>   
2.    /// MainWindow.xaml 的交互逻辑   
3.    /// </summary>   
4.    public partial class MainWindow : Window  
5.    {  
6.        private MainWindowModel model = new MainWindowModel();  
7.   
8.        private List<BackgroundWorker> threadPool = new List<BackgroundWorker>();  
9.   
10.        public MainWindow()  
11.        {  
12.            InitializeComponent();  
13.   
14.            this.DataContext = model;  
15.        }  
16.   
17.        /// <summary>   
18.        /// 在此增加内容   
19.        /// </summary>   
20.        private void InitialSetValue()  
21.        {  
22.            this.Dispatcher.BeginInvoke(new Action(() =>  
23.                {  
24.                    this.model.Names.Clear();  
25.   
26.                    for (int i = 0; i < 100; i++)  
27.                    {  
28.                        Content content = new Content();  
29.   
30.                        content.Name = i.ToString() + i.ToString() +   
31.                            i.ToString() + i.ToString() + i.ToString();  
32.   
33.                        this.model.Names.Add(content);  
34.                    }  
35.                }));  
36.        }  
37.   
38.        /// <summary>   
39.        /// 下拉菜单消失要清空内容   
40.        /// </summary>   
41.        /// <param name="sender"></param>   
42.        /// <param name="e"></param>   
43.        private void popupContent_Closed(object sender, EventArgs e)  
44.        {  
45.            this.model.Names.Clear();  
46.        }  
47.   
48.        /// <summary>   
49.        /// 文本框失去焦点，下拉列表隐藏   
50.        /// </summary>   
51.        /// <param name="sender"></param>   
52.        /// <param name="e"></param>   
53.        private void textBox1_LostFocus(object sender, RoutedEventArgs e)  
54.        {  
55.            this.model.PopupIsOpen = false;  
56.        }  
57.   
58.        /// <summary>   
59.        /// 文字内容改变，下拉类表出现   
60.        /// </summary>   
61.        /// <param name="sender"></param>   
62.        /// <param name="e"></param>   
63.        private void textBox1_TextChanged(object sender, TextChangedEventArgs e)  
64.        {  
65.            this.model.PopupIsOpen = true;  
66.   
67.            if (threadPool.Count > 0)  
68.            {  
69.                threadPool[0].CancelAsync();  
70.            }  
71.   
72.            threadPool.Clear();  
73.   
74.            string key = this.textBox1.Text.Trim();  
75.   
76.            if (string.IsNullOrEmpty(key))  
77.            {  
78.                this.model.PopupIsOpen = false;  
79.   
80.                return;  
81.            }  
82.   
83.            BackgroundWorker worker = new BackgroundWorker();  
84.   
85.            worker.WorkerReportsProgress = true;  
86.   
87.            worker.WorkerSupportsCancellation = true;  
88.   
89.            worker.DoWork += (o, p) =>  
90.            {  
91.                InitialSetValue();  
92.   
93.                p.Result = this.model.Names;  
94.            };  
95.   
96.            worker.RunWorkerCompleted += (o, p) =>  
97.            {  
98.                this.model.Names = p.Result as ObservableCollection<Content>;  
99.   
100.                if (this.model.Names.Count <= 0)  
101.                {  
102.                    this.model.PopupIsOpen = false;  
103.                }  
104.            };  
105.   
106.            threadPool.Add(worker);  
107.   
108.            Thread.Sleep(100);  
109.   
110.            if (threadPool.Count > 0)  
111.            {  
112.                threadPool[0].RunWorkerAsync();  
113.            }  
114.        }  
115.   
116.        /// <summary>   
117.        /// 子项被选中，下拉列表消失   
118.        /// </summary>   
119.        /// <param name="sender"></param>   
120.        /// <param name="e"></param>   
121.        private void item_SelectionChanged(object sender, SelectionChangedEventArgs e)  
122.        {  
123.            var data = (sender as ListBox).SelectedItem as Content;  
124.   
125.            if (data == null)  
126.            {  
127.                this.model.PopupIsOpen = false;  
128.   
129.                return;  
130.            }  
131.   
132.            try  
133.            {  
134.                this.textBox1.TextChanged -= new TextChangedEventHandler(textBox1_TextChanged);  
135.   
136.                var searchtext = data.Name;  
137.   
138.                this.model.PopupIsOpen = false;  
139.            }  
140.            catch  
141.            {  
142.            }  
143.            finally  
144.            {  
145.                this.textBox1.TextChanged += new TextChangedEventHandler(textBox1_TextChanged);  
146.            }  
147.        }  
148.    }  

 /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        private MainWindowModel model = new MainWindowModel();

        private List<BackgroundWorker> threadPool = new List<BackgroundWorker>();

        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = model;
        }

        /// <summary>
        /// 在此增加内容
        /// </summary>
        private void InitialSetValue()
        {
            this.Dispatcher.BeginInvoke(new Action(() =>
                {
                    this.model.Names.Clear();

                    for (int i = 0; i < 100; i++)
                    {
                        Content content = new Content();

                        content.Name = i.ToString() + i.ToString() + 
                            i.ToString() + i.ToString() + i.ToString();

                        this.model.Names.Add(content);
                    }
                }));
        }

        /// <summary>
        /// 下拉菜单消失要清空内容
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void popupContent_Closed(object sender, EventArgs e)
        {
            this.model.Names.Clear();
        }

        /// <summary>
        /// 文本框失去焦点，下拉列表隐藏
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void textBox1_LostFocus(object sender, RoutedEventArgs e)
        {
            this.model.PopupIsOpen = false;
        }

        /// <summary>
        /// 文字内容改变，下拉类表出现
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
        {
            this.model.PopupIsOpen = true;

            if (threadPool.Count > 0)
            {
                threadPool[0].CancelAsync();
            }

            threadPool.Clear();

            string key = this.textBox1.Text.Trim();

            if (string.IsNullOrEmpty(key))
            {
                this.model.PopupIsOpen = false;

                return;
            }

            BackgroundWorker worker = new BackgroundWorker();

            worker.WorkerReportsProgress = true;

            worker.WorkerSupportsCancellation = true;

            worker.DoWork += (o, p) =>
            {
                InitialSetValue();

                p.Result = this.model.Names;
            };

            worker.RunWorkerCompleted += (o, p) =>
            {
                this.model.Names = p.Result as ObservableCollection<Content>;

                if (this.model.Names.Count <= 0)
                {
                    this.model.PopupIsOpen = false;
                }
            };

            threadPool.Add(worker);

            Thread.Sleep(100);

            if (threadPool.Count > 0)
            {
                threadPool[0].RunWorkerAsync();
            }
        }

        /// <summary>
        /// 子项被选中，下拉列表消失
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void item_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var data = (sender as ListBox).SelectedItem as Content;

            if (data == null)
            {
                this.model.PopupIsOpen = false;

                return;
            }

            try
            {
                this.textBox1.TextChanged -= new TextChangedEventHandler(textBox1_TextChanged);

                var searchtext = data.Name;

                this.model.PopupIsOpen = false;
            }
            catch
            {
            }
            finally
            {
                this.textBox1.TextChanged += new TextChangedEventHandler(textBox1_TextChanged);
            }
        }
    }

页面代码：

[csharp] view plain copy print ?

1. <Window x:Class="TestPopup.MainWindow"  
2.        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.        Title="MainWindow" Height="350" Width="525">  
5.    <Grid>  
6.        <TextBox Height="38" HorizontalAlignment="Left" Margin="71,89,0,0" LostFocus="textBox1_LostFocus" TextChanged="textBox1_TextChanged"  
7.                 Name="textBox1" VerticalAlignment="Top" Width="236" />  
8.          
9.        <Popup Name="popupContent" StaysOpen="False" IsOpen="{Binding PopupIsOpen}" Closed="popupContent_Closed"  
10.               Placement="Bottom"  PlacementTarget="{Binding ElementName=textBox1}"  >  
11.              
12.            <ListBox Name="contentItems" SelectionChanged="item_SelectionChanged"   ItemsSource="{Binding Names}"  
13.                                 MinWidth="{Binding ElementName=textBox1, Path=ActualWidth}">  
14.                <ListBox.ItemTemplate>  
15.                    <DataTemplate>  
16.                        <TextBlock Margin="5,5" FontSize="15" Text="{Binding Name}" Foreground="Gray"/>  
17.                    </DataTemplate>  
18.                </ListBox.ItemTemplate>  
19.            </ListBox>  
20.        </Popup>  
21.    </Grid>  
22. lt;/Window>  

 <Window x:Class="TestPopup.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox Height="38" HorizontalAlignment="Left" Margin="71,89,0,0" LostFocus="textBox1_LostFocus" TextChanged="textBox1_TextChanged"
                 Name="textBox1" VerticalAlignment="Top" Width="236" />
        
        <Popup Name="popupContent" StaysOpen="False" IsOpen="{Binding PopupIsOpen}" Closed="popupContent_Closed"
               Placement="Bottom"  PlacementTarget="{Binding ElementName=textBox1}"  >
            
            <ListBox Name="contentItems" SelectionChanged="item_SelectionChanged"   ItemsSource="{Binding Names}"
                                 MinWidth="{Binding ElementName=textBox1, Path=ActualWidth}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="5,5" FontSize="15" Text="{Binding Name}" Foreground="Gray"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Popup>
    </Grid>
</Window>

效果：

主要注意的有一点，下拉列表消失时一定要清除数据，不然下次显示的时候会很慢。在用的时候找了好久才发现这个问题。
详细工程：http://download.csdn.net/detail/yysyangyangyangshan/4762184