KatsuYuzuのブログ

.NET の開発をメインとした日記です。

Segoe UI SymbolをBlendでパスに変換する #win8dev_jp #wpdev_jp

Windows ストアアプリではアイコンを簡単に表示できます。

<SymbolIcon Symbol="Camera"/>

f:id:KatsuYuzu:20140109074202p:plain
"Camera"の部分は定義済みでこちらで確認できます。

さて、このSymbolの正体なんですがただのフォントです。さきほどのコードは下記のように置き換えられます。

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

"E114"の部分が文字コードで、フォントの詳細もふくめてこちらで確認できます。

フォントさえ入ってればいけるというのはいいんですがせっかくのXAMLです。

「パスでくれたらフォントが入ってない環境でも表示できるのに……!SilverlightとかSilverlightとか……(ぼそ)」

そこでBlend。いや、フォトショでもその他お絵かきツールでもなんでもいいんですがXAMLerの標準装備で。

Blendでパスに変換する

BlendではTextBlockからパスに変換する機能があるので、先ほどのTextBlockを配置して右クリックで変換するだけ。
f:id:KatsuYuzu:20140109075306p:plain
f:id:KatsuYuzu:20140109075516p:plain
これだけで好きなアイコンのパスが手に入ります。あとは変換されたソースみてMarginとか要らないのを消してViewBoxにくるんでおけば扱いやすいです。ResourceDictionaryに突っ込んで参照するとなおいいですね。