Telerik blogs

RadAutoCompleteBox–An Annotated Demo

jesseLiberty by Jesse Liberty
October 24, 2012 Desktop, WinForms 0 Comments


In our Q3 Webinar, I demonstrated the RadAutoCompleteBox, Telerik's Silverlight AutoCompleteBox, part of the RadControls for Silverlight and WPF.  AutoCompleteBoxIn 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,

   1: public class Song
   2: {
   3: private string title = String.Empty;
   4: private string author = String.Empty;
   5:  
   6: public string Title
   7:     {
   8:         get { return title; }
   9:         set { title = value; }
  10:     }
  11: public string Author
  12:     {
  13:         get { return author; }
  14:         set { author = value; }
  15:     }
  16: }

 

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):

   1: public class Data
   2: {
   3: private ObservableCollection<Song> songs = new ObservableCollection<Song>();
   4:  
   5: public void CreateSongsData()
   6:     {
   7:         songs.Add(new Song()
   8:         {
   9:             Title = "Like A Rolling Stone",
  10:             Author = "Bob Dylan"
  11:         });
  12:         songs.Add(new Song()
  13:         {
  14:             Title = "Satisfaction",
  15:             Author = "The Rolling Stones"
  16:         });
  17:  
  18:  
  19:     }
  20:  
  21: public ObservableCollection<Song> GetSongs()
  22:     {
  23:         songs.Clear();
  24:         CreateSongsData();
  25: return songs;
  26:     }
  27: }

 

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,

   1: public class ExampleViewModel
   2: {
   3:     Data source = new Data();
   4: private ObservableCollection<Song> songsList = new ObservableCollection<Song>();
   5: public ObservableCollection<Song> SongsList
   6:     {
   7:         get { return songsList; }
   8:     }
   9:  
  10: public ExampleViewModel()
  11:     {
  12:         LoadSongs();
  13:     }
  14:  
  15: private void LoadSongs()
  16:     {
  17: foreach (var song in source.GetSongs())
  18:         {
  19:             songsList.Add(song);
  20:         }
  21:     }
  22: }

 

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,

   1: <Window.Resources>
   2:     <Style x:Key="AutoCompleteStyle" TargetType="TextBlock">
   3:         <Setter Property="FontFamily" Value="Segoe UI" />
   4:         <Setter Property="FontSize" Value="13.333" />
   5:         <Setter Property="Foreground" Value="#FF0A0A0A" />
   6:         <Setter Property="VerticalAlignment" Value="Center" />
   7:     </Style>

 

Next we add a DataTemplate for displaying the song and its author, using the style we just created,

   1: <DataTemplate x:Key="SongsSearchAutoComplete">
   2:     <StackPanel Orientation="Horizontal">
   3:         <TextBlock Text="{Binding Title}" Style="{StaticResource AutoCompleteStyle}" />
   4:         <TextBlock Text=", " Style="{StaticResource AutoCompleteStyle}" />
   5:         <TextBlock Text="{Binding Author}" Style="{StaticResource AutoCompleteStyle}" />
   6:     </StackPanel>
   7: </DataTemplate>

 

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):

xmlns:local="clr-namespace:AutoCompleteBoxDemo"

With that, we can declare the resource,

<local:ExampleViewModel x:Key="ViewModel" />

Close off the Windows.Resources section and within the grid declare the data context to use the ExampleViewModel static resource we just created,

<Grid DataContext="{StaticResource ViewModel}">

We are now ready to drag a Telerik RadAutoCompleteBox onto the XAML surface and to populate its properties,

<telerik:RadAutoCompleteBox 
        WatermarkContent="Enter a song..."
        x:Name="songsAutoCompleteBox"
        TextSearchMode="Contains"
        AutoCompleteMode="Suggest"
        TextSearchPath="Title"
        SelectionMode="Single"
        ItemsSource="{Binding SongsList}"
        DropDownItemTemplate="{StaticResource SongsSearchAutoComplete}"
        VerticalAlignment="Top"
        Margin="0 20 0 0"
        Height="22"
        BorderBrush="#FF25A0DA"
        BorderThickness="1" />

 

Notice the TextSearchMode is an enumerated constant, as shown in the figure.  The mode we’ll want TextSearchModeis “contains” so that any text that we type will be searched for anywhere within the song title.

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

jesseLiberty
About the Author

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

Comments

Comments are disabled in preview mode.