Start a new project in Expression Blend.

Save the project, select the solution inside the Project panel, and right-click to select Edit in Visual Studio from the Project menu.

In Visual Studio, open the Solution Explorer panel if it is not already visible by selecting Solution Explorer from the View menu.

Right-click on the Solution icon at the top of the Solution Explorer panel, and then select Add and then New Project from the subsequent menu.

In the resulting Add New Project dialog that appears, you need to navigate to the Visual C# - Windows project types and then select WPF Custom Control Library from the templates as shown in Figure 18.2.

Figure 18.2. The new project type.

Figure 18.2 also shows how you can choose the target Framework from the combo box at the top of the dialog. You can choose either Framework 3.0 or 3.5 for this project because we are not using any Framework 3.5–specific coding.

Name the project MyCustomControl.

Ensure that the project is going to be located where you want it to be, and then click OK to complete the actions.

Visual Studio will now go through the creation of your new project and add a default control called UserControl1.xaml to your project. Sometimes Visual Studio automatically opens the new control as well, which can be painfully slow in Visual Studio 2005 because of the rendering surface initialization. In Visual Studio 2008, you can press the Esc key to stop this from occurring.

From the Window menu item at the top of Visual Studio, select Close All Documents.

Right-click on the UserControl1.xaml file in the Solution Explorer panel and then select Delete from the subsequent context menu. You are not going to be using this control for this project.

As Figure 18.3 shows, right-click on the MyCustomControl project inside the Solution Explorer.

Figure 18.3. The mechanism for creating a new class.

Select Add from the context menu and then subsequently select Class.

Call the class AutoComplete_TextBox.cs.

You now have your original project and the new project in the solution. You are now going to continue through coding up the new class, and then adding the project as a reference before returning to Blend to test the control.

Modify the class as shown in Listing 18.1 to inherit from the TextBox class provided by the Framework.

namespace MyCustomControl
{
    public class AutoComplete_TextBox : System.Windows.Controls.TextBox
    {
    }
}

You are going to create two constructor methods now. One is a standard constructor and the other allows the user to parse in a predefined List<T> of words to add to the dictionary of words. Listing 18.2 shows the dependency property added to accommodate the List<T> as well as the constructors. Note that the dependency property does not contain any change notification.

public class AutoComplete_TextBox : System.Windows.Controls.TextBox
{
    public AutoComplete_TextBox()
    {

    }

    public AutoComplete_TextBox(List<string> WordDictionary)
    {
        this.STORED_LIST = WordDictionary;
    }

    public List<string> STORED_LIST
    {
        get { return (List<string>)GetValue(STORED_LISTProperty); }
        set { SetValue(STORED_LISTProperty, value); }
    }

    public static readonly DependencyProperty STORED_LISTProperty =
    DependencyProperty.Register("STORED_LIST", typeof(List<string>), typeof(AutoComplete_TextBox),
    new FrameworkPropertyMetadata(null,
    FrameworkPropertyMetadataOptions.None));
}

Regardless of how the user instantiates this object, you want to create the Popup control immediately so that it is ready to use as soon as the user starts typing into the TextBox. Before doing this, though, you need to create a customized ListBox control that enables better handling for the user workflow for this type of control. By this I mean that when the user selects a word from the ListBox and presses the Enter key, you want to assume that he has made his choice. So, you need a way to listen for the events and to ensure that the control then places the selected text into the TextBox part of the control. Listing 18.3 shows the custom class inheriting from the ListBox. It contains a single event that simply instructs the TextBox that the user has made a choice. You can see the overridden methods that allow you to listen for specific actions from which you can then raise the event.

You will also need to add the following using directive for the ListBox:

using System.Windows.Controls;

/// <summary>
/// Custom listbox class to allow user actions to act as a click
/// </summary>
class AutoCompleteListBox : ListBox
{
    public AutoCompleteListBox()
    {
        this.EnterKeyPressed += delegate() { };
    }

    public delegate void EnterKeyPressedDelegate();
    public event EnterKeyPressedDelegate EnterKeyPressed;

    protected override void OnKeyUp(KeyEventArgs e)
    {
        base.OnKeyUp(e);

        if (e.Key == Key.Enter)
            this.EnterKeyPressed();
    }

    protected override void OnMouseDoubleClick(MouseButtonEventArgs e)
    {
        base.OnMouseDoubleClick(e);
        this.EnterKeyPressed();
    }

    protected override void OnMouseDown(MouseButtonEventArgs e)
    {
        base.OnMouseDown(e);
        this.EnterKeyPressed();
    }
}

Now you can create the method that builds the Popup control (inside the AutoComplete_TextBox class) as well as sets up the ListBox you just created. Listing 18.4 shows the method used to create the Popup, and you should add a call to this method from both constructors inside the AutoComplete_TextBox class. Note the event handlers added for both the ListBox and the Popup control. Both the ListBox and the Popup controls are defined as global types.

You will need to add the following using directives for the Popup control, the Rect class, and for the type of event arguments that are generated:

using System.Windows.Controls.Primitives;
using System.Windows.Input;
  using System.Windows;

private Popup ListPopUp = new Popup();
private AutoCompleteListBox ListDisplay = new AutoCompleteListBox();
private void BuildPopUp()
{
    ListDisplay.MaxHeight = 80;
    ListDisplay.Width = 150;
    ListDisplay.MouseDown += new System.Windows.Input.MouseButtonEventHandler
(ListDisplay_MouseDown);
    ListDisplay.EnterKeyPressed += new AutoCompleteListBox.
EnterKeyPressedDelegate(ListDisplay_EnterKeyPressed);

    ListPopUp.MouseDown += new System.Windows.Input.MouseButtonEventHandler
(ListPopUp_MouseDown);
    ListPopUp.Child = this.ListDisplay;
    ListPopUp.StaysOpen = false;
    ListPopUp.PopupAnimation = PopupAnimation.Fade;
    ListPopUp.Placement = PlacementMode.Relative;
    ListPopUp.PlacementTarget = this;
    ListPopUp.PlacementRectangle = new Rect(10, 20, 300, 300);
}

void ListPopUp_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs
e)
{
    if (this.ListDisplay.SelectedItem != null)
    {
        this.Text = this.ListDisplay.SelectedItem.ToString();
        this.ListPopUp.IsOpen = false;
    }
}

void ListDisplay_EnterKeyPressed()
{
    if (this.ListDisplay.SelectedItem != null)
    {
        this.Text = this.ListDisplay.SelectedItem.ToString();
        this.ListPopUp.IsOpen = false;
    }
}

void ListDisplay_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs
e)
{
    if (this.ListDisplay.SelectedItem != null)
    {
        this.Text = this.ListDisplay.SelectedItem.ToString();
        this.ListPopUp.IsOpen = false;
    }
}

As you can see, each of the event handler methods simply sets the Popup to close and assigns the selected value from the ListBox to the TextBox control using the this.Text property.

Because the user can opt to use the default constructor and provide a List<T> (or different List<T> objects throughout runtime) at a later stage, you need to provide a method that will clear the existing collection, which is simply calling the Clear() method of the STORED_LIST:

/// <summary>
/// Clear the store of its current values
/// </summary>
public void ClearStore()
{
    this.STORED_LIST.Clear();
}

You should also provide a public method that allows the user to add single words to the list at any time, possibly each time a new word is entered in the TextBox, to build a dynamic history dictionary. Listing 18.5 shows the method created.

/// <summary>
/// Supply a new value to add to the store
/// </summary>
/// <param name="NewValue">A string representing the new value</param>
public void AddNewValueToStore(string NewValue)
{
    //Keep only one copy of the item
    if (!this.STORED_LIST.Contains(NewValue))
        this.STORED_LIST.Add(NewValue);
}

Now you need to add the methods required to filter the dictionary, which involves supplying a predicate to the List<T>.FindAll() method.

What is a predicate?

It is shown like this:

  NewList<T> = OriginalList<T>.FindAll(Predicate<string> match);

In this scenario, the predicate requires the creation of a delegate method that performs the value-matching logic. This means that the original collection will attempt to match a value one at a time in the collection by parsing the string value to the method specified, and with the delegate method returning a Bool value (true for matched), the original collection generates a new collection of the same type with only the matched values.

Listing 18.6 demonstrates this as you can see the point where the STORED_LIST generic type object has the FindAll() method called, parsing the name of the method to perform the matching.

private void BuildFilteredList()
{

    if (this.Text.Length > 0)
    {

        List<string> FilteredStore = this.STORED_LIST.FindAll(DoMatch);

        if (FilteredStore.Count == 0)
        {
            this.ListPopUp.IsOpen = false;
            return;
        }
        else
        {
            this.ListDisplay.Items.Clear();

            foreach (string var in FilteredStore)
            {
                this.ListDisplay.Items.Add(var);
            }

            this.ListPopUp.IsOpen = true;
        }
    }

}

private bool DoMatch(string ValueToTest)
{
    if (ValueToTest.StartsWith(this.Text, true, null))
        return true;
    else
        return false;
}

In this line of Listing 18.6:

  if (ValueToTest.StartsWith(this.Text, true, null))

You are testing the value by calling the StartsWith() method, which has three overloaded options. The first parameter we are testing for is the text that the user has already entered into the text box, the second true specified whether the method should ignore case sensitivity, and the third parameter is for culture information. A null value tells the method to use the current culture information.

The last method you need to create (see Listing 18.7) is an overridden instance of the OnKeyUp event handler for the TextBox, which allows you to control the PopUp control and then call the method you just added to filter the dictionary (List<T>) based on what the user has already entered.

/// <summary>
/// Checks to see if the currently entered text is available from
/// the Store. If so, display the popup
/// </summary>
/// <param name="e"></param>
protected override void OnKeyUp(KeyEventArgs e)
{
    base.OnKeyUp(e);

    if (e.Key == Key.Down)
    {
        if (!this.ListPopUp.IsOpen)
            this.ListPopUp.IsOpen = true;

        this.ListDisplay.SelectedIndex = 0;
        this.ListDisplay.Focus();

    }

    if (this.STORED_LIST.Count > 0)
        this.BuildFilteredList();
}

Click the SaveAll button in Visual Studio or Save All from the File menu.

Now select Build Solution from the Build menu in Visual Studio. Hopefully everything builds correctly for you and you are now ready to move on.

In the Solution Explorer panel, locate the References folder of the first project you created—not the control project.

Right-click and select Add Reference. Visual Studio might take a little while to display the Add Reference dialog box, but this is just because it is finding a lot of information in your computer about other available references.

As Figure 18.4 shows, select the Projects tab of the dialog box and you should see the MyCustomControl project available.

Figure 18.4. The Add Reference dialog.

Select it and click OK.

Open the solution in Expression Blend, checking that both projects are available. If you still only have the first project open in Blend, you will need to close the project and then select Open -> Project/Solution (Ctrl + Shift + O) from the File menu, navigating to the .sln file, or check to see if the .sln file is listed in your Recent Projects list (available from the File menu).

Make sure that you have Window1.xaml open inside Blend.

Open the Asset Library and select the Custom Controls tab.

You should see your AutoComplete_TextBox control in the list, complete with the correct icon, thanks to the TextBox you inherited. Add the control to your project. It should look like an ordinary text box at this stage.

Open the Properties panel and name the new control actxtTest.

Clear out the default text that is populated in your control.

Select the Window element inside the Objects and Timeline category of the Interaction panel.

Locate and add the Loaded event handler for the Window, taking you back to Visual Studio.

You can now define a simple list to parse to the control for testing as shown in Listing 18.8. You will need to add the following using directive for the List<T> type:

  using System.Collections.Generic;