In our Q3 Webinar, I demonstrated the RadAutoCompleteBox, Telerik's Silverlight AutoCompleteBox, part of the RadControls for Silverlight and WPF. In this blog post, I will walk through that demo in detail.
The demo itself is extracted and simplified from the QSF demo that downloads with the RadControls for Silverlight and WPF.
To begin, create a new project of type RadControls WPF Application and name it AutoCompleteBoxDemo. In the Project Configuration Wizard select Telerik.Windows.Controls.Input.
Like nearly all interesting projects, it starts with data; in this case a set of Songs and their “Authors.” To start, right click on the project and add a new class: Song.cs. The Song class consists of just two properties: the tile and the author of the song,
The second class we need will be the data class, which will stand in for obtaining songs from a database or a web service. Name the class Data.cs,
The class begins with an ObservableCollectio<song> named songs. It then includes a method, CreateSongsData that adds dozens of song objects to the collection. The class ends with a method, GetSongs, that returns an ObservableCollection<Song>. Here is an abridged version of the class (download the complete source code for the entire class):
Finally, we add a view model class with a single property, SongsList, that consists of an ObservableCollection<Song> that we populate in a private member method LoadSongs,
We are now ready to create our AutoCompleteBox, which we do in MainWindow.xaml. We start by creating a style for the TextBlocks that will display the song title and author,
Next we add a DataTemplate for displaying the song and its author, using the style we just created,
We want to have a StaticResource that refers to our ViewModel, but to do that we need to add a namespace that points to the program in which the view model was declared (that is, the current program):
With that, we can declare the resource,
Close off the Windows.Resources section and within the grid declare the data context to use the ExampleViewModel static resource we just created,
We are now ready to drag a Telerik RadAutoCompleteBox onto the XAML surface and to populate its properties,
Notice also that the DropDownItemTemplate is the DataTemplate that we declared earlier in the Windows Resources section.
No code-behind is needed; the XAML is sufficient to make all this work. Just start the application and your MainWindow will come up with a TextBox visible. Type a letter into the TextBox and watch the suggestions unroll below the letter. As you type, the suggestions are narrowed.
Download the complete source code here
Jesse Liberty has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter
Subscribe to be the first to get our expert-written articles and tutorials for developers!