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

公開日:2019-07-08
最終更新:2019-07-08
※この記事は外部サイト(https://www.doraxdora.com/blog/2017/08/13/...)からのクロス投稿です

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

無料で使えるデザインツール「Canva」でブログタイトル画像を作る

アイコンを作成する

https://www.canva.com/

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

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

透過させる

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

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

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

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

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

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

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

アイコンコンバーター

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

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

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

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

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

画面を修正する

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

/プロジェクト名;component/Resource/アイコン名.ico  

通常版

Icon="/WpfApp1;component/Resource/Cat.ico"  

サイズ変更版

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

    <Controls:MetroWindow.IconTemplate>  
        <DataTemplate>  
            <Image Source="/WpfApp1;component/Resource/Cat.ico" Width="22" Height="22" />  
        </DataTemplate>  
    </Controls:MetroWindow.IconTemplate>  

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

今回はここまで。

ではでは。

記事が少しでもいいなと思ったらクラップを送ってみよう!
10
+1
@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする