Click here to Skip to main content
13,291,084 members (72,340 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 5 May 2010

AutoCompleteBox Binding Custom Objects

, 5 May 2010
Rate this:
Please Sign up or sign in to vote.


It is not difficult to bind custom objects to AutoCompleteBox control of Silverlight. There are two methods available to do so. Among the two first method has limited functionality, like we cannot show images or other complex controls using it.
While Second method is great, we can use any control as suggestion.


The inspiration behind writing this article is basically I do not found proper solution of binding custom object to AutoCompleteBox control. I searched many forums as well but hopelessly unable to find the solution.
Some Description
There are mainly two methods to bind custom object to AutoCompleteBox control in Silverlight.

      • Using ItemSource Property (Simplest one, working fine with single value collection)

      • Using DataContext Property (It is mainly used for Custom Objects)

        You can also bind images or other complex and/or custom controls with this method.

Code - First Method

Let's have an employee class.
public class Employee
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string ImagePath { get; set; }
    public Employee(int id1, string fname1, string lname1, string imgpath)
        ID = id1;
        FirstName = fname1;
        LastName = lname1;
        ImagePath = imgpath;
    public override string ToString()
        return "emp: "+FirstName;

Do following code in xaml file.
<input:autocompletebox x:name="test" width="100" height="30" valuememberpath="FirstName" xmlns:x="#unknown" xmlns:input="#unknown">

And for back-end there are two options. Either you can bind simple list like following.
List<string> lst=new List<string>()
test.ItemsSource = lst;

Or you can bind Generic list of Employee.
List<employee> emp = new List<employee>();
emp.Add(new Employee(1, "John", "Player", "books1.jpg"));
emp.Add(new Employee(2, "Vann", "Dam", "LawBooks.jpg"));
emp.Add(new Employee(3, "John", "Travolta", "programmer1.jpg"));
emp.Add(new Employee(6, "Johny", "Lever", "calendar_share.jpg"));
test.ItemsSource = emp;

Code - Second Method

In second method we need to change the control bindings way in xaml file.
<input:autocompletebox x:name="Test1"
    filtermode="ContainsOrdinal" valuememberpath="FirstName"
    width="100" height="30" itemssource="{Binding}"
    xmlns:x="#unknown" xmlns:input="#unknown">
                    <textblock text="{Binding
                        Path=FirstName}" />
                        text="{Binding Path=LastName}" />
                    <image source="{Binding Path=ImagePath}"
                        height="30" width="30" />

And for binding list of employee object we need to use DataContext property of the control rather than ItemSource property.
Test1.DataContext = emp;

I think it would be clearer now the difference between both methods and the capability of both methods.
Hope this will be helpful to everyone.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Peace ON
Software Developer (Senior)
India India
Short Stories Stories We Live...

You may also be interested in...

Comments and Discussions

GeneralReason for my vote of 5 Great simple answer to a seemingly c... Pin
Member 809515123-Oct-11 6:16
memberMember 809515123-Oct-11 6:16 
Reason for my vote of 5
Great simple answer to a seemingly complex question.
GeneralReason for my vote of 5 good explanation. Very nice Pin
lias88825-Nov-10 11:01
memberlias88825-Nov-10 11:01 
GeneralReason for my vote of 5 good demo Pin
abhix19-Jul-10 5:10
memberabhix19-Jul-10 5:10 
Generalany workaround Pin
abhix19-Jul-10 4:44
memberabhix19-Jul-10 4:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 5 May 2010
Article Copyright 2010 by Peace ON
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid