Windows Store Appの標準アイコンをSegoe UI Symbolフォントから効率的に探す

Windowsストアアプリケーションと、そこで使われているSegoe UI Symbolというフォントについてです。Segoeは「セゴエ」と読むのかと思っていたら「シーゴー」と読むらしいです。

 

  Windowsストアアプリケーションは細かなガイドラインで統一されたデザインのアプリを作成することが可能です。もちろん自由に作ることもできるのですが、私のようなデザインの素人にとっては、ガイドラインに沿って作ればそれなりの見た目のアプリが作れるのは嬉しいです。

 

標準アイコンはSegoe UI Symbolというフォントでできています。例えば、下の画面の「戻る」ボタンはSegoe UI Symbolフォントの「E071」というコードで定義されています。

f:id:yomon8:20130624190313p:plain

 

 

実際の標準アイコンの定義は、StandardStyles.xamlというファイルに入っています。ここにある標準のアイコンなどを必要に応じて、自分のアプリの画面定義に利用する形になります。XAMLの中身を見ると「Segoe UI Symbol」というフォントが設定されているのがわかります。 

f:id:yomon8:20130624190318p:plain

 

 

このStandardStyles.xamlにはかなりの量のコンポーネント定義が書かれていて、ほとんどは以下の画面のようにコメントアウトされています。これらは、必要に応じてコメントアウトを解除して、使う形になります。ただ、どれを使うか決めると言ってもXAMLの文字だけ見てもどの定義がどのアイコンなのかわかりにくいです。

f:id:yomon8:20130624190325p:plain

 

 

MSDNSegoe UI Symbol アイコンの一覧なんてページもあってアイコンの一覧するには便利なのですが、以下のようにアイコンが画像ファイルなのでXAMLに記載されているコードからアイコンを検索なんてことができません。

JJ841126.segoe_ui_symbol_backbuttons20pt(ja-jp,WIN.10).png

 

 

そんな時に便利な方法です、WordやExcelを開いて、「記号と特殊文字」という機能を利用します。この画面のように「その他の記号」というところをクリックしてみます。

f:id:yomon8:20130624190332p:plain

 

 

そうするとこのような画面が出るので、フォントに「Segoe UI Symbol」を選択すると、Windows Store Appの標準になっているアイコンがズラリ並びます。後はコードを指定すれば、そのコードがどのアイコンを意味しているのかがわかります。または、画像から選んで4桁のコードを確認して、逆にStandardStyles.xamlから探してもいいかもしれないです。

f:id:yomon8:20130624190338p:plain

 

 上の画像の場合はE0A6が文字コードになっているので、例えばこのように使います。

<TextBlock FontFamily="Segoe UI Symbol" Text="&#xE0A6;"/>

 

キーワードから検索かけたい場合はこちらのサイトも便利です。

http://www.adamdawes.com/windows8/win8_segoeuisymbol.html