Getting started with Silverlight: Part 5 – Integrating other controls

This is part 5 in a series on getting started with Silverlight.  To view the index to the series click here.  You can download the completed project files for this sample application in C# or Visual Basic.

In our previous step we added better data binding and saved some data to our isolated storage area.  Let’s start integrating some other controls to make our experience a little better.

AutoCompleteBox

Remember the history data we save every time a search term is used?  Let’s help our users search better, by providing them a history of their searches in the TextBox while they type.  We’re going to use a control from the Silverlight Toolkit to accomplish this, AutoCompleteBox.

To do this we need to add a reference to the System.Windows.Controls.Input assembly.  Then add an xmlns to your Search.xaml file:

   1: xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"

With this in place, change the control named SearchTerm from TextBox to input:AutoCompleteBox:

   1: <input:AutoCompleteBox x:Name="SearchTerm" FontSize="14.667" Margin="0,0,10,0" Width="275"

   2:      IsTextCompletionEnabled="True" />

Now we need to provide data for the AutoCompleteBox.  In our Helper.cs class I added the following function:

   1: internal static string[] GetSearchTermHistory()

   2: {

   3:     List<string> searchHistory = new List<string>();

   4:  

   5:     foreach (var item in IsolatedStorageSettings.ApplicationSettings.Keys)

   6:     {

   7:         searchHistory.Add(item.ToString());

   8:     }

   9:  

  10:     return searchHistory.ToArray();

  11: }

Then in the Loaded event handler for Search.xaml.cs I added a call to Helper.GetSearchTermHistory():

   1: void Search_Loaded(object sender, RoutedEventArgs e)

   2: {

   3:     SearchResults.ItemsSource = pcv; // bind the DataGrid

   4:     _timer.Start(); // start the timer

   5:     SearchForTweetsEx(); // do the initial search

   6:     SearchTerm.ItemsSource = Helper.GetSearchTermHistory(); // populate autocomplete

   7: }

The result of which now is that when the application loads it will give the user some hinting while they search:

Helpful!

Adding our History view

Now that we have our search history, we can provide some data in a new view called History.xaml.  You should have already created this in the Views folder in a previous step, but if you haven’t, do so now (using the Silverlight Page item template).  Here we’ll want to show perhaps a simple list of all the terms.  We can easily do this using a ListBox in our XAML like this:

   1: <StackPanel>

   2:     <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}" 

   3:                    Text="Serach Term History"/>

   4:     <ListBox x:Name="SearchTermHistory" />

   5: </StackPanel>

Then using a function we already have in Helper.cs, we can bind new data to the listbox like this in History.xaml.cs:

   1: protected override void OnNavigatedTo(NavigationEventArgs e)

   2: {

   3:     SearchTermHistory.ItemsSource = Helper.GetSearchTermHistory();

   4: }

So we are able to make re-use of a function to display a complete history of our terms:

Adding some more navigation functionality

Now that we have a couple of views in the application, notice the navigation framework working.  You can navigate using the buttons, but also the back/forward browser buttons will also trigger the same functionality!

We can actually take this to the next level with the History view now.  In the ListBox I’m adding a SelectionChanged event handler:

   1: <ListBox x:Name="SearchTermHistory" SelectionChanged="SearchTermHistory_SelectionChanged" />

The function looks like this in History.xaml.cs:

   1: private void SearchTermHistory_SelectionChanged(object sender, SelectionChangedEventArgs e)

   2: {

   3:     this.NavigationService.Navigate(new Uri(string.Format("/Search/{0}", 

   4:             SearchTermHistory.SelectedItem.ToString()), UriKind.Relative));

   5: }

Notice the URI format I’m using?  It will end up being /Search/{term}.  We need to instruct our Navigation Frame in the application to map that accordingly.  Go back to MainPage.xaml and find the UriMapper content and add this line:

   1: <uriMapper:UriMapping Uri="/Search/{term}" MappedUri="/Views/Search.xaml?term={term}" />

Now we need to make our Search.xaml page understand this.  In Search.xaml.cs in the OnNavigatedTo I add this functionality:

   1: protected override void OnNavigatedTo(NavigationEventArgs e)

   2: {

   3:     if (this.NavigationContext.QueryString.ContainsKey("term"))

   4:     {

   5:         SearchTerm.Text = this.NavigationContext.QueryString["term"].ToString();

   6:         SearchForTweetsEx();

   7:     }

   8: }

Now when a user goes to the History page and selects an item, it automatically executes the search!

Summary

Integrating other controls and 3rd party controls like this will help define your user experience and hopefully provide an better experience for your users of the application.  There are a bunch of 3rd party control vendors producing great sets of components.  Visit my Silverlight Controls post for a list of them.  Be sure to check out the Silverlight Toolkit for others from Microsoft and a sample application showing all the controls.

We’ve got our application pretty well working, but the UI could use some more polish, in the next step in part 6 let’s show how we can better template this without affecting functionality.