第10回 検索ボックスを装備する：連載：Windowsストア・アプリ開発入門（3/5 ページ）

Windowsストアアプリの利便性を高めるために、検索ボックスを実装してみよう。

[山本康彦（http://www.bluewatersoft.jp/），BluewaterSoft]

検索結果画面を実装する

　次に、検索ロジックを呼び出してその結果を表示する検索結果画面を実装しよう。ただし、まだ検索ボックスは配置しない。

　検索結果画面は記事一覧画面（＝「FeedPage.xaml」ファイル）とよく似ているので、「FeedPage.xaml」ファイルを改造して「一人二役」とすることも可能ではあるが、ちょっと煩雑になりそうだ。そこで今回は、記事一覧画面をコピー＆ペーストして作ることにする。

　VS 2013のソリューションエクスプローラーで「FeedPage.xaml」ファイルを右クリックし、［コピー］を選ぶ。続けてソリューションエクスプローラーで、「AtmarkItReader」プロジェクトを右クリックし、［貼り付け］を選ぶ。すると、プロジェクト内に「FeedPage - コピー.xaml」ファイルが作られるので、ファイル名を「SearchResultPage.xaml」に変更し、以下のコードのように修正する（次のXAMLコードとC#コード）。

<!-- Page
  x:Name="pageRoot"
  x:Class="AtmarkItReader.FeedPage"
  ……省略……
  -->
<!-- 【第10回】↓クラス名を変更 -->
<Page
  x:Name="pageRoot"
  x:Class="AtmarkItReader.SearchResultPage"
  ……省略……
  >

  <Page.Resources>
    <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

    <!-- 【第10回】タイルの背景色を緑色に変更 -->
    <SolidColorBrush x:Key="TileBackground">MediumSeaGreen</SolidColorBrush>
  </Page.Resources>

  ……省略……

    <!-- Back button and page title -->

      ……省略……

      <!-- TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}"
                 Grid.Column="1"
                 IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom"
                 Margin="0,0,30,40"/ -->
      <!-- 【第10回】↓Text属性をコンテンツに変更し、Runコントロールを使って文字列をフォーマット -->
      <TextBlock x:Name="pageTitle" Style="{StaticResource HeaderTextBlockStyle}"
                 Grid.Column="1"
                 IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom"
                 Margin="0,0,30,40" >
        "<Run Text="{Binding Title}" />"の検索結果
      </TextBlock>

      ……省略……

    </GridView>

    <!-- 【第10回】検索結果が0件のときの表示を追加 -->
    <TextBlock x:Name="noResultText" Text="該当する記事はありません"
                Grid.Row="1" FontSize="45" Margin="120,0,0,40" />

  </Grid>
</Page>

検索結果画面の定義（XAML）
記事一覧画面からの変更箇所を太字で示してある。変更箇所は4つだけだ。

……省略……

//public sealed partial class FeedPage : Page
public sealed partial class SearchResultPage : Page

……省略……

  //public FeedPage()
  public SearchResultPage()

  ……省略……

  private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
  {
    // 【第10回】このメソッド内は全面的に書き換え

    var queryText = e.NavigationParameter as string;
    await SearchAsync(queryText);
  }

  // 【第10回】検索を実行するメソッドを追加
  private async System.Threading.Tasks.Task SearchAsync(string queryText)
  {
    // 「該当する記事はありません」表示を隠す
    this.noResultText.Visibility = Visibility.Collapsed;

    // 検索を実行し、結果を画面に表示する
    var feedsData = App.Current.Resources["feedsDataSource"] as DataModel.FeedsData;
    var searchResult = await feedsData.SearchAsync(queryText); // 検索ロジックを呼び出す
    this.DataContext = searchResult; // 検索結果をページのデータコンテキストにセット

    // 検索結果が0件のときは「該当する記事はありません」表示を出す
    if (searchResult.Items.Count == 0)
      this.noResultText.Visibility = Visibility.Visible;
  }

  ……省略……

検索結果画面のコードビハインド（C#）
記事一覧画面のコードビハインドからの変更箇所を太字で示してある。

　以上で検索結果画面の実装も完了だ。ここで検索結果画面の動作を確認しておくとよいだろう。それには、「App.xaml.cs」ファイルに一時的な修正を加える（次のコード）。

if (rootFrame.Content == null)
{
  //if (!rootFrame.Navigate(typeof(HubPage)))
  if (!rootFrame.Navigate(typeof(SearchResultPage), "Windows"))
  {
    throw new Exception("Failed to create initial page");
  }
}

検索結果画面の動作を確認するための一時的な修正（C#）
太字の部分を変更する。
AppクラスのOnLaunchedメソッド内で最初の画面に遷移している部分を一時的に変更し、検索結果画面を表示させてみる。確認が終わったら、修正を元に戻しておく。

　これで実行すると、「Windows」を検索文字列として検索した結果が表示されるはずだ。動作が確認できたら、一時的に修正した部分は元に戻しておいてほしい。