Exercise 4: Display the Query Results in the Silverlight User Interface

In this exercise you will modify the existing Silverlight application to display the results of the query. The user interface is bound to the SearchResults propery.

Task 1 – Modifying the Exiting Silverlight User Interface to Display the Query Results.

1. Right-click MainPage.xaml and select Open.

2. Replace the MainPage.xaml markup with the markup located in <Install>\Labs\AccessingSPUsingQueryWebService\Source\SupportingFiles\MainPage.xaml.txt. Notice the user interface components are data bound to the SearchResults property.

   Figure 10

   Silverlight Query Web Service Web Part

3. Right-click MainPage.xaml and select View Code.
4. Add using Silverlight.QueryWebService.ViewModels; to the list of using statements in the MainPage.xaml.cs file.

5. Add a private class-level variable named viewModel of type SearchResultsViewModel to the class.

   C#

   public partial class MainPage : UserControl { private SearchResultsViewModel viewModel;

6. Use snippet 4.1.7 to add the viewModel and DataContext code below InitializeComponent in the constructor.

   C#

   public MainPage() { InitializeComponent(); viewModel = new SearchResultsViewModel(); this.DataContext = viewModel; }

7. Use snippet 4.1.8 to add the btnSearch_click event handler that is used to start the search.

   C#

   private void btnSearch_Click(object sender, RoutedEventArgs e) { if (!String.IsNullOrWhiteSpace(txtKeyword.Text)) viewModel.GetSearchResults(txtKeyword.Text); }