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

» 2014年01月23日 17時45分公開

[山本康彦（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.SearchResultPage"
……省略……
>

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

    
    <SolidColorBrush x:Key="TileBackground">MediumSeaGreen</SolidColorBrush>
</Page.Resources>

……省略……

    

      ……省略……

      
      
      <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>

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