Silverlight AutoComplete box (The real deal!!)

Silverlight Introduction

So I have spent quite a bit of time with Silverlight and one thing I really like about it is that if you don’t come from a lot of .NET experience, you get a taste of every aspect of the framework. You may not be able to do "everything" WPF or Windows Forms can do, but you get a lot of experience in it all. Th reason for this is although Silverlight is rich and a great patform, it is client side only. NO SERVER END. Web Services are used as the way to communicate with either the web project or any other tool outside of Silverlight (database for example)

Purpose for the Autocomplete boxes??

In my articles I like to explain somewhere a real world explanation of what a particular tool would be used for. In this case, the Autocomplete tool is most often used in two scenarios

The first use case is when your application has a fixed set of things you wish to have the user choose from and don’t wish to use a dropdown either because you have too many options for a user to sift through or your users really like the keyboard and want to utilize it to be more efficient. Using AutoComplete boxes allows you to do just that by popping up data values based on what you type in the box (such as looking up someone’s name).

The second use case for using a AutoComplete box (remember I’m sure there are tons more, these are just 2 common ones) is for search engines. Notice how Google has had for a long time now, the ability to autocomplete your question before you finish? In it’s simplest form, this is an autocomplete box that uses a list of words and phrases to match what you are typing on the fly. This is possible using AJAX web methods.

AJAX ( Asynchronous JavaScript and XML)

There is a very special group of web methods called AJAX which allow for a better user experience by making asynchronous calls to the server and instead of the browser waiting for a response from the server before allowing the user to continue interacting with it, the browser continues on it’s merry way with the user until it gets a returned CallBack from the Event that was originally created. I will go into AJAX more in future blogs, but it has definitely matured quite a but since the late 90’s.

No more Background.. Lets get the show on the Road

So now that you have some background in what AutoComplete boxes are, what AJAX is, what limits Silverlight etc… Lets get coding. So first lets create a simple person class in the Silverlight Application. If you want to separate concerns, you can easily do this by placing it in an Entities folder. The Person class should look similar to this:

public class Person

{

public string FirstName { get; set; }

public string LastName { get; set; }

public string Department { get; set; }

public override string ToString()

{

return FirstName;

}

}

}

Overriding the ToString method allows you to instead of getting the object type, get the First name popup in the autocomplete control

Now lets build ourselves a little repository database (really just a list)

public class PersonRepository

{

Person _person = new Person();

#region DUMMY DATABASE

public List<Person> GetPersonList()

{

List<Person> personList = new List<Person>();

personList.Add(new Person

{

FirstName = "Joe",

LastName = "Shmo",

Department = "IT"

});

personList.Add(new Person

{

FirstName = "Gregg",

LastName = "Tyler",

Department = "Software Engineer"

});

personList.Add(new Person

{

FirstName = "Gary",

LastName = "Style",

Department = "Accounting"

});

personList.Add(new Person

{

FirstName = "Geoff",

LastName = "Style",

Department = "Accounting"

});

personList.Add(new Person

{

FirstName = "Michael",

LastName = "Style",

Department = "Accounting"

});

personList.Add(new Person

{

FirstName = "Matthew",

LastName = "Style",

Department = "Accounting"

});

personList.Add(new Person

{

FirstName = "Mark",

LastName = "Style",

Department = "Accounting"

});

personList.Add(new Person

{

FirstName = "Rebeccca",

LastName = "Smith",

Department = "Human Resources"

});

personList.Add(new Person

{

FirstName = "Richard",

LastName = "Style",

Department = "Accounting"

});

personList.Add(new Person

{

FirstName = "Robert",

LastName = "Style",

Department = "Accounting"

});

return personList;

}

#endregion

}

Now lets go into the MainPage.xaml file and add a AutoComplete Box from the ToolBox. This will add the proper references and should create a sdk tag type via this line of code at the top of the screen under the UserControl tag sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk&quot;. The below code does several things, first, I create two Stack Panels that encapsulate the AutoComplete box as well as the textbox that will populate with the selected Item.

<StackPanel Background="LightGray">

<StackPanel x:Name="AutoRoot" Orientation="Horizontal">

<sdk:AutoCompleteBox x:Name="AutoBox" Width="200">

<sdk:AutoCompleteBox.ItemTemplate>

<DataTemplate>

<StackPanel>

<TextBlock Text="{Binding Path=FirstName}"/>

</StackPanel>

</DataTemplate>

</sdk:AutoCompleteBox.ItemTemplate>

</sdk:AutoCompleteBox>

</StackPanel>

</StackPanel>

You will notice that the TextBlock that corresponds to the AutocompleteBox has it’s Text property being bound to the FirstName of the Person object. This is important because we are going to do our auto completion based on first name. This is all encapsulated in what is known as a Datatemplate.

The final part is the code behind for the MainPage.

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

// Create repository and get DB list

PersonRepository personRepository = new PersonRepository();

List<PERSON> personList = personRepository.GetPersonList();

// Bind list to AutoComplete box

this.AutoBox.ItemsSource = personList;

#region Set Filters for Autocomplete Direct Reports

this.AutoBox.ItemFilter = ((search, item) =>

{

Person person = item as Person;

if (personList.Count() != 0)

{

string filter = search;

return (person.FirstName.Contains(filter));

}

return false;

});

}

#endregion

}

The first part accesses the repository and gets the list from our database and binds it to the AutoComplete controls ItemSource. Then using the AutoCompletes ItemFilter property and lambda expression, You are able to filter inside the list by using the Contains property in the string object as shown below.

Advertisements

About Gregg Coleman

I am Senior-level Software Engineer working primarily these days with .NET. I have a good working knowledge of ASP.NET MVC, Web Forms, WCF web services and Windows Services. I spend much of my time in the Web Services (SOAP and REST) world in my current job designing and implementing various SOA architectures. I have been in the software engineering industry for about 6 years now and will not now nor ever consider myself an "expert" in programming because there is always so much to learn. My favorite thing about designing software is there are always new emerging technologies and something to learn every day! My current job has me spending much of my job on the bleeding edge of technologies and changing gears all the time, so I'm never bored and always challenged. On my spare time I enjoy weight training, reading and venturing to new places near by. Of course programing and learning new technologies are another hobby of mine.
This entry was posted in ASP.NET, C#, Programming, Silvelight and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s