第4回 画面を構成するさまざまなコントロールと画面遷移：連載：Windowsストア・アプリ開発入門（5/6 ページ）
［付録］標準コントロール一覧（使用目的別）
これらのコントロールは、画面の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クラスを継承していないが、便宜上この表に載せた。
Copyright© Digital Advantage Corp. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。