【WPF】画面のタイトルバーに自作アイコンを表示する

2017年8月13日C#, 開発

おはようございます。

今回は、画面のタイトルバーにアイコンを表示したいと思います。
アイコン自体は以前紹介した無料のサービス「Canva」でちゃちゃっと作ってみました。

スポンサーリンク

Canvaについて

Canva日本語サイト

https://www.canva.com/ja_jp/

Canvaでは、無料のアイコンを使って様々なデザインを作成することができます。

ロゴやブランドマークを作成する場合は、次のページを参考にしていただければ。

https://www.canva.com/ja_jp/features/free-icons/

アイコンを作成する

Canvaにアクセスします。

Canva でアイコン作り
Canva でアイコン作り

Canva で 猫のシルエットのイラストを適当に追加します。

ダウンロード
ダウンロード

ダウンロードボタンをクリックしてダウンロードします。

透過させる

Gimp
Gimp

Gimpというツールを使って作成した画像の背景を透過させます。

ファジー選択ツール
ファジー選択ツール

先ほど作成した画像をドラッグアンドドロップで表示したら、
ツールから「ファジー選択ツール」を選択します。

透過処理
透過処理

背景色(白い)部分をクリックすると、同じ色の箇所が選択状態となります。

背景色を削除
背景色を削除

背景色が選択された状態で、「Delete」キーを押下すると選択された部分が透過されます。

保存
保存

ファイルメニューから「名前を付けてエクスポート」を選択して画像を保存します。

画像をアイコンファイルに変換

こちらもフリーで出来るサービスを利用して「PNG」→「ICO」ファイルに変換します。

アイコンコンバーター

アイコンコンバーター
アイコンコンバーター

ページを表示したら、「ファイルを選択」ボタンをクリックして
先ほど作成した画像ファイルをアップロードします。

ダウンロード
ダウンロード

色々なサイズに変換してくれるので、32 x 32 の大きさをダウンロードします。

アイコンをリソースに追加

ソリューションエクスプローラで、
プロジェクトを右クリックし「追加」>「フォルダ」を選択、「Resource」フォルダを作成します。

リソースの追加
リソースの追加

作成した「Resource」に作成した「ICO」ファイルをコピー&ペースト等で追加します。

画面を修正する

Windowのオプションを追加します。
(リソースのパスは次のようにします。)

通常版

サイズ変更版

こちらは Window のオプションではなく、別途追加してサイズを変更する方法です。
(メトロウィンドウ)

 

変更後画面
変更後画面

アイコンを表示した画面です。
ちょっと小さすぎましたが、アイコン作成時にちゃんとしたサイズを意識すれば問題ありませんね。

今回はここまで。

ではでは。

スポンサーリンク


関連するコンテンツ

2017年8月13日C#, 開発C#, WPF, プログラミング

Posted by doradora