Windows ストア アプリでのユーザーによる情報の検索の有効化 (C#/VB/C++ と XAML)

ユーザーがアプリで情報を検索できるようにするには、プロジェクトに検索結果ページ項目を追加します。次に、アプリの任意のページに SearchBox コントロールを追加します。 ユーザーは、アプリでこれらのコントロールを使って情報を検索します。ユーザーがアプリで情報を検索できるようにするには、次の手順を実行します。

JJ655408.wedge(ja-jp,WIN.10).gif検索結果ページ項目を追加する

  1. Visual Studio のメニューで、[ファイル][新しいプロジェクト] の順にクリックします。
  2. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで、[Visual C#][Visual Basic][Visual C++] のいずれかのノードをクリックします。
  3. 中央のウィンドウで、[グリッド アプリケーション] をクリックします。
  4. [名前] ボックスに「SearchPageExample」と入力し、[OK] をクリックします。

    ソリューションが作られ、プロジェクト ファイルがソリューション エクスプローラーに表示されます。プロジェクト ファイルについて詳しくは、「Windows ストア アプリ用の C#、VB、C++ プロジェクト テンプレート」をご覧ください。

    重要  Visual Studio を初めて起動したときに、開発者用ライセンスを取得するように求められます。詳しくは、「開発者用ライセンスの取得」をご覧ください。

  5. ソリューション エクスプローラーで、プロジェクト ノードのショートカット メニューを開き、[追加][新しい項目] の順にクリックします。
  6. [新しい項目の追加] ダイアログ ボックスの中央のウィンドウで、[検索結果ページ] をクリックします。この例では、[名前] ボックスに表示される既定の名前、SearchResultsPage1.xaml を使います。
  7. [追加] をクリックします。

    新しいファイルのコードが表示されます。

JJ655408.wedge(ja-jp,WIN.10).gif検索結果ページ項目のコードを変更する

  1. SearchResultsPage1 コード ファイルで、ファイルの先頭にサンプル データ クラスを参照する次のステートメントを追加します。
    
    using SearchResultsExample.Data;
    
    
    
  2. 次のプロパティを追加します。
    
    public Dictionary<String, IEnumerable<SampleDataItem>> Results { get; set; }
    
    
    
  3. 最初の TODO コメントを更新します。
    
    // 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));
    
    
    

    を、次の内容に置き換えます。

    
    var filterList = new List<Filter>();
    var totalMatchingItems = 0;
    Results = new Dictionary<string, IEnumerable<SampleDataItem>>();
    var groups = await SampleDataSource.GetGroupsAsync();
    foreach (var group in groups)
        {
            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));
    
    
    
  4. 次の TODO コメントを更新します。
    
    // 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
    
    
    

    を、次の内容に置き換えます。

    
    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]);
    }
    
    
    

JJ655408.wedge(ja-jp,WIN.10).gifページに SearchBox コントロールを追加する

  1. ソリューション エクスプローラーで、検索ボックスを追加するページ (GroupItemsPage.xaml など) をダブルクリックします。

    ページがデザイナーで開きます。

  2. [ツールボックス] からそのページに SearchBox コントロールをドラッグします。
  3. [プロパティ] ウィンドウで、[イベント] タブをクリックし、[QuerySubmitted] フィールドに「SearchBox_QuerySubmitted」と入力して、Enter キーを押します。

    コード エディターで SearchBox_QuerySubmitted イベント ハンドラーが開きます。

  4. SearchBox_QuerySubmitted イベント ハンドラーを次のコードで置き換えます。
    
    private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
    {
        this.Frame.Navigate(typeof(SearchResultsPage1), args.QueryText);
    }
    
    
    

JJ655408.wedge(ja-jp,WIN.10).gifユーザーが検索結果に表示された項目を開くことができるようにする

  1. デザイナーで SearchResultsPage1.xaml を開きます。
  2. [ドキュメント アウトライン] パネルで、resultsGridView をクリックします。
  3. [プロパティ] ウィンドウで、[イベント] タブをクリックし、[ItemClick] フィールドに「ItemClick」と入力します。
  4. 次の 2 行のコードを新しいイベント ハンドラーに追加します。
    
    private void ItemClick(object sender, ItemClickEventArgs e)
    {
        var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
        this.Frame.Navigate(typeof(ItemDetailPage), itemId);
    }
    
    
    

JJ655408.wedge(ja-jp,WIN.10).gifアプリの検索機能をテストする

  1. Visual Studio のメニューで、[デバッグ] をクリックして [デバッグの開始] をクリックするか、F5 キーを押します。
  2. 実行中のアプリで、検索ボックス コントロールを含むページを開きます。
  3. 検索ボックスに、項目の名前を入力し、[検索] をクリックします。

    検索結果ページに、検索語句が含まれている項目が表示されます。

関連トピック

Windows ストア アプリ用の C#、VB、C++ 項目テンプレート
ページ コントロール項目テンプレートの追加

 

 

表示:
© 2015 Microsoft