MENU閉じる

HEXA BLOG

プログラム

HEXA BLOGプログラム2021.8.5

Segoe MDL2 Assetsでボタンにアイコンを載せよう

こんにちは。大阪プログラマーのサワノです。

みなさんツールを作るときはどんな環境で作成していますでしょうか?
サワノはというとちょっとしたツールであれば簡単にウィンドウやボタンを作成できるWPFでツールを作ることが多いです。
今回はWPFでツール作るの楽だよという紹介も含めてWPFでボタンにアイコンを載せる方法を紹介します。

WPFでボタンにアイコンを載せる場合、アイコン画像を用意できれば一番楽かと思いますが
簡単なツール一つ作るのにアーティストの方に手を煩わせるのもなかなか難しい現実が
あったりしますよね。

そこでWindows10であればWPFは「Segoe MDL2 Assets」というフォントを使用でき
この「Segoe MDL2 Assets」を使用すればプログラマーだけでも簡単にいい感じのアイコンを
ボタンに乗せることができます。

ということで早速Xamlのコードです。

上記のコードをコンパイルすると下記の画像のようなボタンが出来上がります。


TextBlockのFontFamilyを「Segoe MDL2 Assets」に指定してTextにはGlyphに対応する
Unicode pointを設定すればアイコンが表示されます。

Microsoft様がSegoe MDL2 Assets iconsに関してドキュメントとGlyphに対応する
Unicode point表をまとめてくださっているのでそちらを参考にすれば簡単に好きなアイコンを
設定することができます!
https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font

WPFでボタンにいい感じのアイコンを載せる紹介は以上です。
※時代は進み今ではMAUIやWinUI3.0なんてものも出始めていますね。
そろそろWPFからの移行を検討し始めても良いかもしれません。

RECRUIT

大阪・東京共にスタッフを募集しています。
特にキャリア採用のプログラマー・アーティストに興味がある方は下のボタンをクリックしてください

RECRUIT SITE