かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

StandardStyles.xamlに定義されているテンプレートを知る

Windows ストア アプリで手早く見た目のいいアプリを作るにはGridViewやListViewに既存のテンプレートを適用したり、既存のテンプレートをコピーして、それをベースにいじるというのがお手軽かつ、基本を逸脱しないという点でお勧めです。では、どんなテンプレートが定義されてるの?ということで確認できるアプリケーションを作ってみました。

アプリバーにテンプレート名のあるボタンがあって、それを押すと画面の表示が、そのテンプレートを使ったものに切り替わります。ということで1つずつ見ていきたいと思います。

Standard250x250ItemTemplate

GridViewによく使われてる正方形のテンプレートです。

アンセムが一番かわいく映えるテンプレートですね!

Standard500x130ItemTempate

横長長方形のテンプレートです。

写真に対して詳細な説明をチラ見させるのが、アンセムの可愛さを引き立ててますね。

Standard130ItemTemplate

横長長方形のテンプレートで、こいつはコンテンツの中身がある限り横幅を使います。

これだけ、詳細をかければアンセムの可愛さを語りつくせるかもしれないですね。

Standard80ItemTemplate

これは、一番こじんまりとしたテンプレートです。

アンセムをアクセントとして表示するのに素敵ですね。

StandardSmallIcon300x70ItemTemplate

これは、アイコンが一番小さくて、テキストもそれなりに小さいテンプレートです。

小さいのでアンセムがよく見えないですね。なんとなくのイメージをつかんでもらう、メインじゃないおまけ的なおのを表示するのにいいかもしれません。

StandardSmallIcon70ItemTemplate

これは、画像は小さいけど詳細情報は完全に表示するテンプレートです。

アンセムかわいいが見えない…!文字でフォローするしかないのか。

StandardFileWithTooltip190x130ItemTemplate

これは、FilePickerに表示することを想定したテンプレートみたいです。マウスを上に持っていくとポップアップで詳細情報が表示されます。因みにテンプレート内にあるマウスという文字列はMouseに変更しないといけないというバグつきのテンプレートです。

可愛い写真を全面におしだして、ふらふらとマウスを持って来たら、さらに追い打ち。たまらんですな。

犬的まとめ

アンセムかわいいよアンセム

まとめ

このように、デフォルトで結構な数のテンプレートが用意されています。自分のイメージに一番近いテンプレートを適用して、それをコピーして手を入れていくことで、サイズが他のアプリと大きくかけ離れないWindows ストア アプリとしての統一感を持ったアプリが簡単に作れます。
是非、有効活用していきましょう!

サンプルプログラム

このプログラムのダウンロードは以下からどうぞ。
TempateViewer