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, ...

...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:

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:

Thanks to Matt for the pointer to the WPF toolkit.

Solution 1:

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

Solution 2:

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:

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.

Solution 3:

Mindscape also provides a 3 free controls including a WPF Autocomplete Textbox

http://intellibox.codeplex.com/ does seem to updated as recently as Oct 1, 2013 and contains the single control. I would have added as comment on Troy's answer, but don't have enough rep. I nearly ignored it because of that comment.

Example usage from documentation:

    <auto:Intellibox ResultsHeight="80"
                     ExplicitlyIncludeColumns="True"
                     Name="lightspeedBox"
                     DisplayedValueBinding="{Binding Product_Name}"
                     SelectedValueBinding="{Binding Product_Id}"
                     DataProvider="{Binding RelativeSource={RelativeSource FindAncestor, 
                     AncestorType={x:Type Window}}, Path=LinqToEntitiesProvider}"
                     Height="26"
                     Margin="12,26,12,0"
                     VerticalAlignment="Top">
        <auto:Intellibox.Columns>
            <auto:IntelliboxColumn DisplayMemberBinding="{Binding Product_Name}"
                                   Width="150"
                                   Header="Product Name" />
            <auto:IntelliboxColumn DisplayMemberBinding="{Binding Unit_Price}"
                                   Width="75"
                                   Header="Unit Price" />
            <auto:IntelliboxColumn DisplayMemberBinding="{Binding Suppliers.Company_Name}"
                                   Width="125"
                                   Header="Supplier" />
        </auto:Intellibox.Columns>
    </auto:Intellibox>

Solution 4:

I use the Intellibox in my in-house project. http://intellibox.codeplex.com/

I find it's use of the Provider pattern for searching very intuitive.

Rake's answer provides an example of how to use it, and as he points out, it has seen some development late last year (although this is well after I last used it).

Solution 5:

You can try WPF Auto Complete TextBox at CodePlex here: https://wpfautocomplete.codeplex.com/