第4回　画面を構成するさまざまなコントロールと画面遷移：連載：Windowsストア・アプリ開発入門（2/6 ページ）

2つ目の画面を作る

　それでは、2つ目の画面を作っていこう。この画面では、WebViewコントロールを使う。

　本連載を通じて完成させるアプリは、RSSフィードリーダーだ。2つ目の画面には、RSSフィードで提供された記事のタイトルと記事のWebページを表示する。

スペックを決める

　次の図のような画面とする。今回もデザインだけとし、必要なデータはハードコーディングする。

2つ目の画面の外観構想図（PowerPointで作成）
記事のタイトルと指定されたWebページを表示するだけのシンプルなものだ。

　そして、この画面には、タイトルの文字列とWebViewコントロールに表示するWebページのURLが必要だ。それは＠ITのRSSフィードから取得してくる。例えば「Insider.NETフォーラム」のRSSフィードは、「http://rss.rssad.jp/rss/itmatmarkit/fdotnet/rss.xml」というURLでアクセスできる。Internet Explorerでアクセスしてソースを表示させれば、XMLのデータとして見られる。

　このRSSフィードでは、1つの<item>要素が1つの記事を表している（次のコード）。その中の<title>要素のコンテンツを画面のタイトルに使い、<link>要素のコンテンツをWebViewコントロールに表示させるWebページのURLとして使う。

実装する

　前回の終了時点から、作業を始める。プロジェクトに［基本ページ］を追加し、WebViewコントロールを配置し、タイトルとURLをハードコーディングする。

○ページを追加する

　ソリューションエクスプローラでプロジェクトを右クリックし、出てきたメニューから［追加］−［新しい項目］を選ぶと、［新しい項目の追加］ダイアログが出てくる（次の画像）。

プロジェクトに［基本ページ］を追加する

　ここで［基本ページ］ファイルテンプレートを選び、「ViewPage.xaml」と名前を付けて［追加］ボタンをクリックする。

○XAMLコードを編集する

　今回も画面デザインを作るだけなので、文字列などはハードコーディングしていく。作成した「ViewPage.xaml」ファイルを開いて、まずは画面タイトルから記述していこう。ファイルの上の方にある<Page.Resources>要素の中の<x:String>要素のコンテンツを書き換える（次のコード）。

　次は、ファイルの末尾付近にWebViewコントロールを追加する。SourceプロパティにWebページのURLを指定するだけで、そのWebページを表示してくれる（リダイレクトにも対応している）。

　今回の画面は、以上で終了だ*2。

作成した画面をテストする

　画面を作ったものの、画面遷移する機能をまだ実装していないので、このままでは作った画面を実際に表示できない。そこで、アプリ起動時に表示される画面を一時的に変更してしまおう。

　アプリ起動時の処理は、Appクラスに記述されている。Appクラスは「App.xaml」ファイルと「App.xaml.cs」ファイルの2つから成っているが、処理はコードビハインド（＝「App.xaml.cs」ファイル）の方に書かれている。

　それでは「App.xaml.cs」ファイルを編集しよう。それには、ソリューションエクスプローラで［App.xaml］の左側にある三角をクリックしてツリーを展開してから［App.xaml.cs］をダブルクリックするか、あるいは、［App.xaml］を右クリックして［コードの表示］を選ぶ。そうしたら、「HubPage」という文字列を探して「ViewPage」（＝作った画面のクラス名）に書き換える（次のコード）。

　これで、アプリ起動時に表示される画面が先ほど作った画面になったはずだ。さっそくデバッグ実行してみよう（次の画像）。

2つめの画面を直接表示した
アプリ起動時に表示されているため、［戻る］ボタンは表示されない。

　構想図にはタイトルの左側に［戻る］ボタンがあったが、表示されていない。それは画面遷移させてみないと確認できないのだ。

　ここまでうまくいったら、「App.xaml.cs」ファイルの変更箇所を元に戻してから、先へ進もう。