Data Binding the Windows Phone Toolkit AutoCompleteBox

published on: 10/4/2011 | Views: N/A | Tags: WP7Toolkit Mango Binding

by WindowsPhoneGeek

In this post I am going to talk about data binding the AutoCompleteBox control from Windows Phone Toolkit - August 2011 (7.1 SDK). In one of my previous articles I covered all about this control in depth(AutoCompleteBox for WP7 in depth) and gave lots of general examples, so it is time for a new post that explains how to use the AutoCompleteBox in more complex scenarios.

Here is how the final data binding example should look like:

To begin with lets first create a new Windows Phone 7.1 application project and add a reference to the Microsoft.Phone.Controls.Toolkit.dll assembly in your Windows Phone application project. (for more information about the assembly visit: Where to find Microsoft.Phone.Controls.Toolkit.dll in WP Toolkit Aug 2011).

Databinding AutoCompleteBox Step by Step

This example demonstrates how to populate the AutoCompleteBox control with data using data binding. We will implement a sample that shows suggestions for different mobile phones including images and text descriptions.

Defining the Data Source

Here are the steps we will follow in order to create a data source:

Step1. Define the business/data class.

public class WP7Phone 
{

    public string Image
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }

    public override string ToString()
    {
        return "Selected Phone: " +Name;
    }
}

NOTE: It is important to override ToString() method because we will have to implement a custom text filter method that evaluates the string returned from the ToString method of the WP7Phone object. The custom filter returns matches from WP7Phone`s Name. I.e. the displayed value in the Textbox area will be the returned string!

Step2. Create a new Images folder and add some images in it (with build action set to Content) which will be shown in the AutoCompleteBox dropdown:

Step3. Create a sample collection with items of type WP7Phone:

public MainPage()
{
    InitializeComponent();

    List<WP7Phone> dataSource = new List<WP7Phone>() 
    {
    new WP7Phone(){Image="/Images/DellVenue.jpg", Name = "Dell Venue"},
    new WP7Phone(){Image="/Images/HTChd7.jpg", Name = "HTC HD 7"},
    new WP7Phone(){Image="/Images/HTCMozart.jpg", Name = "HTC Mozart"},
    new WP7Phone(){Image="/Images/LGOptimus.jpg", Name = "LG Optimus"},
    new WP7Phone(){Image="/Images/LGQuantumC900.jpg", Name = "LG Quantum C 900"},
    };
        //...    
}

Databind AutoCompleteBox

Step1. Define AutoCompleteBox in XAML

We will define an AutoCompleteBox with FilterMode set to "Custom" because we want to show a custom data of type "WP7Phone". Next we will define a custm ItemTemplate with an Image data bound to the Image property of our "WP7Phone" class and a TextBlock databound to the Name property of the same class. Here is how the code should look like:

<toolkit:AutoCompleteBox x:Name="acBox" FilterMode="Custom">.
    <toolkit:AutoCompleteBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" Stretch="None" Margin="0,0,5,5"/>
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>

Step2. Populate the AutoCompleteBox with data through its ItemsSource property:

public MainPage()
{
    InitializeComponent();
    //...    

    this.acBox.ItemsSource = dataSource;
}

Step3. Add a custom ItemFilter to the AutoCompleteBox.

We will add a custom delegate named SearchPhones in which we will search for a possible match depending on the entered letter. (i.e if the string starts with the entered letter).

public MainPage()
{
    InitializeComponent();
       //...    

    this.acBox.ItemFilter = SearchPhones;
}

bool SearchPhones(string search, object value)
{
    if (value != null)
    {
        WP7Phone datasourceValue = value as WP7Phone;
        string name = datasourceValue.Name;
        if (name.ToLower().StartsWith(search.ToLower()))
            return true;
    }
    //... If no match, return false. 
    return false;
}

Step4. Build and run the project. Here is how the final result should look like:

Let's say we type "htc" in the TextBox area of the AutoCompleteBox. As you can see on the screen shots below two suggestions are offered in the dropdown area. If we select "HTC Mozart" the following text will appear in the TextBox area: "Selected Phone: HTC Mozart". (Note that this string is returned by the overridden ToString() method in the WP7Phone class).

Data Binding AutoCompleteBox via ValueMemberBinding Step by Step

Alternatively if you do not want to use a Custom filter then there is no need to override ToString() method in you data class because you can use ValueMemberBinding instead. This example uses the same data as the previous one the only difference here is that we do not use any custom filter.

Data Source

Here is how the data source should look like:

public MainPage()
{
    InitializeComponent();

    List<WP7Phone> dataSource = new List<WP7Phone>() 
    {
    new WP7Phone(){Image="/Images/DellVenue.jpg", Name = "Dell Venue"},
    new WP7Phone(){Image="/Images/HTChd7.jpg", Name = "HTC HD 7"},
    new WP7Phone(){Image="/Images/HTCMozart.jpg", Name = "HTC Mozart"},
    new WP7Phone(){Image="/Images/LGOptimus.jpg", Name = "LG Optimus"},
    new WP7Phone(){Image="/Images/LGQuantumC900.jpg", Name = "LG Quantum C 900"},
    };

    this.acBox.ItemsSource = dataSource;
}

public class WP7Phone 
{

    public string Image
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }
}

Data Binding

Here is how the data bound AutoCompleteBox should look like:

<toolkit:AutoCompleteBox x:Name="acBox" FilterMode="StartsWith" ValueMemberBinding="{Binding Name}">
    <toolkit:AutoCompleteBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" Stretch="None" Margin="0,0,5,5"/>
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>