Adding a Search Contract item template (Windows Store apps using C#/VB/C++ and XAML)

You can add the Search Contract item template to an app created in the Split App project template. The item template for search enables an app to present a search results page for a search that's initiated by the Search charm. The concepts in this topic also apply when you add search to the Grid App project template. For descriptions of the Windows Store item templates, see C#, VB, and C++ item templates for Windows Store apps.

The Search Contract item template implements the recommended navigation model that's used in the Grid App and Split App project templates. For more info, see Navigation model.

To add the Search Contract item template

1. On the Visual Studio menu, click File > New Project.
2. In the left pane of the New Project dialog box, click the Visual C#, Visual Basic, or Visual C++ node.
3. In the center pane, click Grid App.
4. In the Name box, type SearchContractExample, and then click OK.

   The solution is created and the project files appear in Solution Explorer. For more info about the project files, see C#, VB, and C++ project templates for Windows Store apps.

   Important  When you run Visual Studio for the first time, it prompts you to obtain a developer license. For more info, see Get a developer license.

5. In Solution Explorer, right-click the project node and then click Add > New Item.
6. In the center pane of the Add New Item dialog box, select Search Contract. For this example, keep the default name, SearchResultsPage1.xaml, that appears in the Name box.
7. Click Add.

   The code for the new file is displayed

To customize the app for search

1. In SearchResultsPage1.xaml, notice that the UI controls are already bound to properties that are expected on the data source that you'll hook up. If these properties don't exist or have different names, you'll have to update the binding in XAML. In the following steps, you're going to hook up the sample data already provided in both the Grid app and the Split app.
2. Add this using statement to the top of the file to reference the sample data classes:
   C#

   Copy

   
   using SearchContractExample.Data;
   
   

3. Add this property:
   C#

   Copy

   
   public Dictionary<String, IEnumerable<SampleDataItem>> Results { get; set; }
   
   

4. Update the first TODO comment by replacing
   C#

   Copy

   
               // TODO: Application-specific searching logic.  The search process is responsible for
               //       creating a list of user-selectable result categories:
               //
               //       filterList.Add(new Filter("<filter name>", <result count>));
               //
               //       Only the first filter, typically "All", should pass true as a third argument in
               //       order to start in an active state.  Results for the active filter are provided
               //       in Filter_SelectionChanged below.
               	var filterList = new List<Filter>();
               filterList.Add(new Filter("All", 0, true));
   
   
   

   with

   C#

   Copy

   
               var filterList = new List<Filter>();
               var totalMatchingItems = 0;
   Results = new Dictionary<string, IEnumerable<SampleDataItem>>();
               foreach (var group in SampleDataSource.GetGroups("AllGroups"))
               {
                       var matchingItems = group.Items.Where(item => item.Title.Contains(queryText));
                  	    int numberOfMatchingItems = matchingItems.Count();
                       if (numberOfMatchingItems > 0)
                       {
                          Results.Add(group.Title, matchingItems);
                          filterList.Add(new Filter(group.Title, numberOfMatchingItems));
                       }
               }
    		filterList.Insert(0, new Filter("All", totalMatchingItems, true));
   
   
   

5. Update the next TODO comment by replacing
   C#

   Copy

   
                   // TODO: Respond to the change in active filter by setting this.DefaultViewModel["Results"]
                   //       to a collection of items with bindable Image, Title, Subtitle, and Description properties
   
   
   

   with

   C#

   Copy

   
                   if (selectedFilter.Name.Equals("All"))
                   {
                       var tempResults = new List<SampleDataItem>();
                       foreach (var group in Results)
                           tempResults.AddRange(group.Value);
                       this.DefaultViewModel["Results"] = tempResults;
                   }
                   else if (Results.ContainsKey(selectedFilter.Name))
   this.DefaultViewModel["Results"] = 
    	new List<SampleDataItem>(Results[selectedFilter.Name]);
   
   
   

To react to search

1. Open SearchResultsPage1.xaml.
2. In the Document Outline panel, click resultsGridView.
3. In the Property Inspector, click the events tab and then in the ItemClick field type ItemClick.
4. Add these two lines of code to the new event handler:
   C#

   Copy

   
           private void ItemClick(object sender, ItemClickEventArgs e)
           {
               var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
               this.Frame.Navigate(typeof(ItemDetailPage), itemId);
           }
   
   
   

5. In SearchResultsPage1.xaml, click resultsListView in the Document Outline panel. In the Property Inspector, click the events tab and then in the ItemClick field type ItemClick.

To test search

1. On the drop-down list next to the Start Debugging button on the debugger toolbar, click Local Machine.
2. On the Visual Studio menu, click Debug > Start Debugging, or press F5.
3. Open the Search charm. (Point to or tap the lower-right corner of the screen.)
4. In the search box, type the name of an item, and then click the search button.

   The search results page shows results for items that include the search term. This illustration shows the search results page when "Leon" is entered in the search box.

   
5. Click one of the search results.

   The Grid app opens the item view.

Related topics

C#, VB, and C++ item templates for Windows Store apps

Adding a Page Control item template

Build date: 3/11/2013