WPF：下拉列表的簡單實現

最近在一個WPF項目中用到一個下拉列表，隨着用戶輸入字符而進行顯示，使用了綁定等知識，雖然實現比較簡單，可是在性能上也是想了很多辦法終於才勉強可以用，與大家分享下。

用於頁面綁定的模型類：

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;
            }
        }
    }

 后台代碼：

/// <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);
            }
        }
    }

頁面代碼：

 <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