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

Windowsストア・アプリの画面に機能を追加してこう。今回はUIコントロールを紹介し、RSSフィードリーダーを作成する。

» 2013年10月17日 17時15分公開

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

　前回から本格的にアプリを作り始めた。前回は、［ハブアプリ (XAML)］プロジェクト・テンプレートを開始点として、スタート画面のタイルとスプラッシュスクリーン、そしてメイン画面のUI（ユーザーインターフェイス）を作成した。今回は、UIを作るために用意されている標準のコントロールを紹介し、WebViewコントロールを使って2つ目の画面のUIを作成して（次の画像）、メイン画面からの画面遷移を実装する。本稿のサンプルは「Dev Center - Windows Store apps サンプル： Windowsストア・アプリ開発入門：第4回」からダウンロードできる。

今回作成する画面（実行結果）
記事のタイトルと、記事のWebページを表示する（一部に画像処理を施してある）。

事前準備

　Windows 8.1（以降、Win 8.1）用のWindowsストア・アプリ（以降、Win 8.1アプリ）を開発するには、Win 8.1とVisual Studio 2013（以降、VS 2013）が必要だ。本稿執筆時点では、まだ製品版が一般にはリリースされていないので、Visual Studio Express 2013 Preview版とWindows 8.1 Preview版を使用する*1。詳しくは第2回の記事を参照してほしい。そして、前回終了時点のソースコード（「Windows Store app samples：Windowsストア・アプリ開発入門：第3回」からダウンロード可）を用意しておいてほしい。

*1　本稿はPreview版に基づいて記述しているため、製品版では異なる可能性がある。あらかじめご承知おきいただきたい。なお、10月18日から製品版が一般公開される。Expressエディションの製品版が利用可能になり次第、本連載も製品版に切り替える予定だ。

画面を構成するさまざまなコントロール

　VS 2013でXAMLエディタを開いているときに「ツールボックス」を開いてみよう（メニューバー―［表示］―［ツールボックス］で表示）。ツールボックスで［すべての XAML コントロール］を展開すると、標準で用意されているコントロールが一覧される（次の画像）。

標準で用意されているコントロールの一覧
画像を途中で切断し、左右に並べてある。最初の項目［ポインター］は、コントロールではなく、デザイン・ビュー（後述）でコントロールを選択するためのツール。

　これらのコントロールは画面のUIを作るために標準で用意されているものである。その中で、Windows.UI.Xaml.Controls名前空間のListViewコントロールやTextBlockコントロールなど、いくつかは前回までに使ってきた。

　これら標準のコントロールを知ることが、画面をデザインしていくうえで重要だ。ところが、ツールボックスにアルファベット順で並べられた一覧を見ていてもよく分からないだろう。おまけに、この一覧の中には通常は使わないものまで入っている。そこで、今回の末尾の［付録］（「まとめ」のさらに後ろ）に、標準のコントロールを使用目的別に分けて掲載しておいた。それぞれに簡単な説明も付けてある。画面デザインを考えるときに役立ててほしい。