今回は、画面のタイトルバーにアイコンを表示したいと思います。
アイコン自体は無料のサービス「Canva」でちゃちゃっと作ってみました。
無料で使えるデザインツール「Canva」でブログタイトル画像を作る
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>
アイコンを表示した画面です。
ちょっと小さすぎましたが、アイコン作成時にちゃんとしたサイズを意識すれば問題ありませんね。
今回はここまで。
ではでは。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント