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

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

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

［付録］標準コントロール一覧（使用目的別）

　これらのコントロールは、画面のUIを作るためにVS 2013のツールボックスに標準で用意されているコントロールである。特記したものを除き、Windows.UI.Xaml.Controls名前空間に属している。なお、各表の［コントロール］列に灰色で記述されているコントロールは、普段使わないコントロールを指す。

レイアウト用コンテナ

　ほかのコントロールの配置に使うコントロール。コンテンツにコントロールが1つだけ入れられるものと、複数のコントロールを入れられるものの2種類に大きく分けられる。また、特定の用途に特化したコンテナもある。

○単一コントロール用

　内部にコントロールを1つだけ配置できる。コードビハインドでは、ContentプロパティまたはChildプロパティにコントロールを設定できる。

コントロール	説明
AppBar	アプリバーを作る。 ただし、ボタンだけを含むアプリバーにはCommandBarコントロールを使う方がよい（「WinRT／Metro TIPS：アプリ・バーを簡単に実装するには？［Windows 8.1ストア・アプリ開発］」を参照）
Border	コンテンツに背景色や外側の境界線を与える
ContentControl	あまり使わない。このコンテナは特定の表示状態を持っていないので、独自のスタイルを定義するときには便利
ContentPresenter	通常は使わない（ControlTemplateを使ってコントロールの外観をカスタマイズするときに利用する）
Flyout	フライアウトを作る（「WinRT／Metro TIPS：簡単にフライアウトを出すには？［Windows 8.1ストア・アプリ開発］」を参照）。
Frame	通常は画面内では使わない（画面を収める共通の「枠」として「App.xaml.cs」ファイルで使われている）
Popup	Win 8.1アプリでは、通常は使わない。Windows 8では、フライアウトを作るために使っていた（「WinRT／Metro TIPS：簡単にフライアウトを出すには？［Windows 8.1ストア・アプリ開発］」を参照）。 Windows.UI.Xaml.Controls.Primitives名前空間
ScrollContentPresenter	通常は使わない（ScrollViewerの内部で利用されている）
ScrollViewer	大きなサイズのコントロールを入れて、スクロール可能にする
ToolTip	ほかのコントロールにツールチップを付ける（「WinRT／Metro TIPS：ツールチップを表示するには？［Win 8］」を参照）。通常は単独では使わない
UserControl	既存のコントロールをカプセル化した新しいコントロールを作るために使う。通常は直接使用しない
Viewbox	拡大／縮小されたとき、コンテンツも一緒に拡大／縮小する
単一コントロール用のレイアウト用コンテナ

○複数コントロール用

　内部に複数のコントロールを配置できる。コードビハインドでは、ChildrenプロパティのAddメソッドでコントロールを追加できる。

コントロール	説明
Canvas	配置するコントロールの位置を座標で指定できる
CommandBar	ボタンだけを含むアプリバーを作る（「WinRT／Metro TIPS：アプリ・バーを簡単に実装するには？［Windows 8.1ストア・アプリ開発］」を参照） コントロールを直接配置するのではなく、PrimaryCommandsプロパティとSecondaryCommandsプロパティに追加する（このコントロ―ルはChildrenプロパティを持たないが、この2つのプロパティにAddメソッドがある）
Grid	レイアウト用として最もよく使われる。 セルのサイズは全て同じ。ただし、隣り合ったセルにまたがってコントロールを配置できる。どのセルに配置するか、明示的に指定する
StackPanel	レイアウト用としてよく使われる。 1列にコントロールを並べる。縦方向、または横方向
VariableSizedWrapGrid	配置されたコントロールによってセルのサイズが変わるグリッド。 ただし、グリッドの「けい線」は一直線になる。つまり、あるセルの高さはその行にある最大のコントロールで決まる。幅は、その列にある最大のコントロールで決まる。どのセルに配置されるかは、コントロールの記述順による
複数コントロール用のレイアウト用コンテナ

○特殊なレイアウト用

　画面全体のレイアウトに使う特定用途のコンテナ。

コントロール	説明
Hub	ハブページを作る（前回を参照）
HubSection	ハブページの中にセクションを作る（前回を参照）
SemanticZoom	2つのレイアウトを切り替える。 ZoomedInViewプロパティにセットしたコンテンツがデフォルトで表示される。ピンチアウトのタッチ操作、またはコントロール右下の「ズームアウトボタン」のクリックで、ZoomedOutViewプロパティに設定したコンテンツに切り替わる
特殊なレイアウト用コンテナ

コレクション表示用コンテナ

　データのコレクションを表示するためのコンテナで、ItemsControlクラスを継承している*6。コントロールを直接配置することも可能ではあるが、通常はデータのコレクションをバインドし、テンプレートによってデータの数だけコントロールを自動生成する（次回で解説予定）。

コントロール	説明
FlipView	一度に1つのデータだけを表示する。左右にスライドさせることで、次々とデータを表示できる
GridView	データをグリッドの各セルに表示する。グループに分けた表示も可能
ItemsControl	通常は使わない（コレクション表示用コンテナの継承元クラス）
ItemsPresenter	通常は使わない（ItemsControlの内部で利用）*6
ListView	データを縦スクロール・リストの各セルに表示する
VirtualizingStackPanel	通常は使わない（ItemsControlの内部で利用）*6
WrapGrid	通常は使わない（ItemsControlの内部で利用）*6
コレクション表示用コンテナ

*6　ツールボックスにはItemsControlコントロールの内部で使うためのコントロールも表示されている。それらはItemsControlクラスを継承していないが、便宜上この表に載せた。