Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF: AutoComplete TextBox, ...again

This other SO question asks about an autocomplete textbox in WPF. Several people have built these, and one of the answers given there suggests this codeproject article.

But I've not found any WPF Autocomplete Textbox that compares with the WinForms autocomplete textbox. The codeproject sample works, sort of, ...

alt text

...but

  • it isn't structured as a re-usable control or DLL. It's code I need to embed in every app.
  • It works only with directories. it doesn't have properties for setting whether the autocomplete source is filesystem directories only, or filesystem files, or ....etc. I could write code to do this, of course, but...I'd rather use someone else's code already written.
  • it doesn't have properties to set the popup size, etc.
  • there's a popup listbox that presents the posible completions. When navigating through that list, the textbox doesn't change. Typing a character while focused in the listbox doesn't cause the textbox to get updated.
  • navigating focus away from the listbox doesn't make the popup listbox disappear. This is confusing.

So, my question:

*Does anyone have a FREE WPF AutoComplete textbox that works, and provides a quality UI experience?*


ANSWER

Here's how I did it:

.0. get the WPF Toolkit

.1. run the MSI for the WPF Toolkit

.2. Within Visual Studio, Drag/drop from the toolbox - specifically the Data Visualization group - into the UI Designer. It looks like this in the VS toolbox:

alt text

If you don't want to use the designer, hand-craft the xaml. It looks like this:


<toolkit:AutoCompleteBox    ToolTip="Enter the path of an assembly."    x:Name="tbAssembly" Height="27" Width="102"    Populating="tbAssembly_Populating" /> 

...where the toolkit namespace is mapped this way:

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" 

.3. Provide the code for the Populating event. Here's what I used:


private void tbAssembly_Populating(object sender, System.Windows.Controls.PopulatingEventArgs e) {     string text = tbAssembly.Text;     string dirname = Path.GetDirectoryName(text);      if (Directory.Exists(Path.GetDirectoryName(dirname)))     {         string[] files = Directory.GetFiles(dirname, "*.*", SearchOption.TopDirectoryOnly);         string[] dirs = Directory.GetDirectories(dirname, "*.*", SearchOption.TopDirectoryOnly);         var candidates = new List<string>();          Array.ForEach(new String[][] { files, dirs }, (x) =>             Array.ForEach(x, (y) =>                       {                           if (y.StartsWith(dirname, StringComparison.CurrentCultureIgnoreCase))                               candidates.Add(y);                       }));          tbAssembly.ItemsSource = candidates;         tbAssembly.PopulateComplete();     } } 

It works, just the way you'd expect. It feels professional. There are none of the anomalies that the codeproject control exhibits. This is what it looks like:

alt text


Thanks to Matt for the pointer to the WPF toolkit.

like image 282
Cheeso Avatar asked Feb 26 '10 00:02

Cheeso


2 Answers

The newest drop of the WPF Toolkit includes an AutoCompleteBox. It's a free set of controls from Microsoft, some of which will be included in .NET 4.

Jeff Wilcox - Introducing the AutoCompleteBox

like image 124
Matt Hamilton Avatar answered Oct 07 '22 21:10

Matt Hamilton


Here's how I did it:

.1. run the MSI for the WPF Toolkit

.2. Within Visual Studio, Drag/drop from the toolbox - specifically the Data Visualization group - into the UI Designer. It looks like this in the VS toolbox:

alt text

Or, hand-craft the xaml. It looks like this:


<toolkit:AutoCompleteBox    ToolTip="Enter the path of an assembly."    x:Name="tbAssembly" Height="27" Width="102"    Populating="tbAssembly_Populating" /> 

...where the toolkit namespace is mapped this way:

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" 

.3. Provide the code for the Populating event. Here's what I used:


private void tbAssembly_Populating(object sender, System.Windows.Controls.PopulatingEventArgs e) {     string text = tbAssembly.Text;     string dirname = Path.GetDirectoryName(text);      if (Directory.Exists(Path.GetDirectoryName(dirname)))     {         string[] files = Directory.GetFiles(dirname, "*.*", SearchOption.TopDirectoryOnly);         string[] dirs = Directory.GetDirectories(dirname, "*.*", SearchOption.TopDirectoryOnly);         var candidates = new List<string>();          Array.ForEach(new String[][] { files, dirs }, (x) =>             Array.ForEach(x, (y) =>                       {                           if (y.StartsWith(dirname, StringComparison.CurrentCultureIgnoreCase))                               candidates.Add(y);                       }));          tbAssembly.ItemsSource = candidates;         tbAssembly.PopulateComplete();     } } 

Thanks to Matt for the pointer to the WPF toolkit.

like image 31
Cheeso Avatar answered Oct 07 '22 22:10

Cheeso