かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

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

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

Standard250x250ItemTemplate

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

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

Standard500x130ItemTempate

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

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

Standard130ItemTemplate

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

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

Standard80ItemTemplate

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

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

StandardSmallIcon300x70ItemTemplate

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

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

StandardSmallIcon70ItemTemplate

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

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

StandardFileWithTooltip190x130ItemTemplate

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

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

犬的まとめ

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

まとめ

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

サンプルプログラム

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