Windows Phone Toolkit AutoCompleteBox

Question

I am using the WPToolkit's AutoCompleteBox in my application.

XAML is as follows-

<toolkit:AutoCompleteBox Name="ACB" ValueMemberBinding="{Binding Name}" MinimumPrefixLength="0" IsTextCompletionEnabled="False" SelectionChanged="ACB_SelectionChanged">
    <toolkit:AutoCompleteBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Color}"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>

I need help in the following scenario-

The itemsource of the above AutoCompleteBox is a list of objects of a class with 2 properties - Name and Color.

Now, when I enter the text in the box, the items need only be filtered by name and they are filtered fine. But if I select the item, it is not selected correctly.

The case is as follows-

Suppose there are 4 items-

Item 1 - Name= "Pencil", Color = "Red"

Item 2 - Name= "Pencil", Color = "Green"

Item 3 - Name= "Eraser", Color = "Red"

Item 4 - Name= "Eraser", Color = "Green"

Now I enter the text "pen" in the AutoCompleteBox. Then first 2 items are shown. But if I select the Green Pencil, The Red Pencil is selected instead.

Maybe because both items have the "Name" as "Pencil". But I need to manage this scenario. There can be 2 items with the same name. but the correct one needs to be selected.

How can I do that? Do I need to apply some custom Filter? If so, how?

Answer 1

I think the problem is the binding via ValueMemberBinding. You could remove it and use the ItemsSource instead. For this you need to create your own filter and to override the ToString() method of your object class. A shorter workaround would be to not use selection changed event for your autocomplete box and use Tap evant on each item

    <toolkit:AutoCompleteBox Name="ACB" ValueMemberBinding="{Binding Name}" MinimumPrefixLength="0" IsTextCompletionEnabled="False" >
<toolkit:AutoCompleteBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Tap="TapEvent">
            <TextBlock Text="{Binding Name}"/>
            <TextBlock Text="{Binding Color}"/>
        </StackPanel>
    </DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>

And in c#:

   private void TapEvent(object sender, RoutedEventArgs e)
   {
        StackPanel stack = sender as StackPanel;
        if (stack == null) return;

        MyClass item = stack.DataContext as MyClass;
        if (item == null) return;

        //here I have the selected item which I want
   }