[WPF] Toolkit's AutoCompleteBox

Hoy aprenderemos como usar el AutoCompleteBox en WPF con unos cuantos pasos.

WPF Toolkit

Luego de crear nuestro proyecto WPF tenemos que agregar el WPF Toolkit, si tienes los binarios genial sino puedes hacerlo usando Nuget.

C#

Para este ejemplo he tenido que crear un par de clases:

using System;

namespace AutoCompleteBoxWPF.Models
{
    public class Client
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public DateTime AffiliationDate { get; set; }

        public override string ToString()
        {
            return string.Format("{0} - {1}", Name, AffiliationDate);
        }
    }
}

using AutoCompleteBoxWPF.Models;
using System;
using System.Collections.Generic;

namespace AutoCompleteBoxWPF.Services
{
    public class ApplicationService
    {
        public List<Client> ReadAll()
        {
            var random = new Random();
            return new List<Client>
            {
                new Client { Id= 1, Name = "Antonov", AffiliationDate = DateTime.Today.AddDays(random.Next(500) * -1) },
                new Client { Id= 2, Name = "Bhor", AffiliationDate = DateTime.Today.AddDays(random.Next(360) * -1) },
                new Client { Id= 3, Name = "Cicerón", AffiliationDate = DateTime.Today.AddDays(random.Next(480) * -1) },
                new Client { Id= 4, Name = "Demeter", AffiliationDate = DateTime.Today.AddDays(random.Next(700) * -1) },
                new Client { Id= 5, Name = "Hola Mundo", AffiliationDate = DateTime.Today.AddDays(random.Next(120) * -1) },
                new Client { Id= 6, Name = "Mundo Nuevo", AffiliationDate = DateTime.Today.AddDays(random.Next(900) * -1) },
            };
        }
    }
}

AutoCompleteBox

Finalmente tenemos que hacer lo siguiente en el XAML y en el .cs de la ventana que usara el AutoCompleteBox. La propiedad ValueMemberPath nos permite definir que propiedad de nuestra clase queremos que use para filtrar y el enumerado FilterMode nos ofrece una gran variedad de modos de filtrado.

<Window x:Class="AutoCompleteBoxWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
        Title="[WPF] Toolkit's AutocompleteBox" Height="300" Width="300">
    <Grid>
        <!-- Si es que es suficiente haciendo override al metodo .ToString() de la clase en cuestión -->
        <!--<toolkit:AutoCompleteBox x:Name="AutoCompleteBox"
                                 ValueMemberPath="Name"
                                 FilterMode="Contains"
                                 VerticalAlignment="Top"
                                 Margin="24"/>-->

        <toolkit:AutoCompleteBox x:Name="AutoCompleteBox"
                                 ValueMemberPath="Name"
                                 FilterMode="Contains"
                                 VerticalAlignment="Top"
                                 Margin="24">
            <toolkit:AutoCompleteBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" Foreground="Orange"/>
                        <TextBlock Text=" - "/>
                        <TextBlock Text="{Binding AffiliationDate, StringFormat='ddd dd MMM yyyy'}"/>
                    </StackPanel>
                </DataTemplate>
            </toolkit:AutoCompleteBox.ItemTemplate>
        </toolkit:AutoCompleteBox>
    </Grid>
</Window>

using AutoCompleteBoxWPF.Services;
using System.Windows;

namespace AutoCompleteBoxWPF
{
    public partial class MainWindow : Window
    {
        private readonly ApplicationService _applicationService = new ApplicationService();

        public MainWindow()
        {
            Loaded += MainWindow_Loaded;

            InitializeComponent();
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            this.AutoCompleteBox.ItemsSource = this._applicationService.ReadAll();
        }
    }
}

CodePlex

Código fuente disponible en: WPF -> AutoCompleteBoxWPF