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

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

[山本康彦(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クラスを継承していないが、便宜上この表に載せた。


Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。