WPFボタンに画像を表示する-文字の上に画像を重ねて表示する

WPFでアプリケーションを開発しています。

操作が完了したら、ボタンの上に完了を意味するアイコンを表示したい(文字の上に重ねて画像を表示したい)という案件が出てきました。

bluebird.pngを表示したいXAML上にドロップすると、ソリューションエクスプローラに表示されます。ソリューションエクスプローラ上で、分かりやすいフォルダを作成し分類しておきます。

bluebird.png
vs01.jpg

ボタンにスタックパネルを作成し、Image Sourceと、Label Contentを配置します。
文字と絵がかさならない状態はこれでできます。

vs02.jpg

文字を重ねたい場合は、StackPanelを利用せず、Gridを利用します。

vs03.jpg

後は、C#コード上から、image01のvisiblityをVisibleにするか、Collapseにするかで制御します。

できれば、ボタンは一つの部品として扱いたいです。その中の画像は、そのボタンのプロパティといういか、そのボタンに紐づけて動作して欲しいところ。ボタンがたくさんあるアプリを作る時に、ボタン動作と、その中に表示される画像を別々で管理するのも大変です。

そこで、Contextを利用して、画像のVisibilityを渡す方法を考えました。

Xaml上のボタン名はb01で、その中のGrid上のImageオブジェクトの名前は意識しません。その代り、Imageオブジェクトにバインディングを仕掛けます。Visibility=”{Binding Path=ImageVisibility}

このバインディングめがけて、C#コード上からb01のDataContextを利用してVisibilityを引き渡します。

実行した時、まれに画像が表示されない時があります。この場合は、画像ファイルのパスを疑います。今回は画像ファイルをResoucesフォルダに配置したので、パスは、

このように指定しました。

同じ要領で、画像のパスをDataContextに入れて渡す事も可能です。

Xaml

C#コード

参考 WPF で ボタン に 画像 を 使用する 方法
参考 [WPF/XAML] リソースから画像を読み込む
参考 第5回 WPFの「データ・バインディング」を理解する (1/3)

結論から、同じ方法でGIFアニメーションをImageに設定して表示できるか確認しましたが、pngやJpegと同じように設定してもアニメーションは再生されない事が分かりました。

ボタンにアニメーションGIFを表示します。WPFでやるならBlendを利用してアニメーションを作るのがスマートだと思うのですが、Formアプリケーションも合わせて手掛けており、部品を共通化したかったのでアニメーションGIFを作りました。

アニメーションGIFは、GIMPを利用する事で簡単に作成できます。

1.レイヤー1枚ごとに1フレーム作成

2.フィルター ⇒ アニメーション ⇒ Gif用最適化

3.各レイヤーの名称レイヤー #3(100ms)(combine) の秒数変更

4.エクスポート

作成したGifアニメーション

GimpでのGIFアニメーション作成は簡単でした。ただ、これをImage Sourceに設定してもGIFアニメーションは再生できませんでした。動かすためには、WPFのImageじゃダメみたいです。

前のコマを表示したくなければGimpからエクスポートする時に

レイヤーごとに1フレーム(置換)

を指定します。

Windows Formアプリケーションなら、Picture Boxを利用して簡単にGIFアニメーションを再生可能です。

後は、このPictureBoxにClickイベントをつけてしまえばアニメーションボタンぽく配置できます。

WPFでアニメーションするならわざわざGifを貼り付けなくても素直にBlendでアニメーション作っちゃった方がいいです。めっちゃ便利。

 

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)