データ読み込みなどの処理中にぐるぐる回るアニメーションを表示したいことはありませんか？
Storyboard でアニメーションを作るのは面倒なので、手軽にアニメーションGIFを表示して代用したいという方に、WindowsFormsHostを使った方法を、フリーのサイトでGIFを入手する方法も含めて、超具体的に解説したいと思います。
WindowFormのPictureBoxでGIFを表示する
WPFの標準コントロールでアニメーションGIFを簡単に表示する方法はありません。
MediaElementは動画や音楽を再生するためのコントロールで、これを使ってアニメーションGIF
を表示することはできますが、表示開始までのタイムラグがあったり、コードを書かないとループ再生できない、たまに動作がカクカクするなどの問題があります。
そこで、WPFで用意されているWindowsFormsHost コントロールを経由して、WindowsFormでお馴染みのPictureBoxを使う方法が良く使われています。
WindowsFormsHostコントロール の利用
WindowsFormsHostコントロールは、WindowsForm専用の各種コントロールをWPFから利用するためのラッパーです。
WindowsFormsHostの詳しい説明は、こちら をご一読頂くとして、ここでは必要利用する上で必要な作業について説明します。
手順は以下の５つです。
- 必要なアセンブリの参照設定
- XAMLへ名前空間とコントロールを記述
- C#ソースに名前空間を追加
- PictureBoxに画像を登録
- 処理に応じてアニメーションをON/OFF
必要なアセンブリの参照設定
プロジェクトの参照設定で、System.Drawing、System.Windows.Forms、WindowsFormsIntegration の３つを加えます。
XAMLへ名前空間とコントロールを記述
XAMLへは以下の４行を記述します。
具体的には、次の１行を追加します。
|
1 2 |
//参照設定 xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" |
コントロールの記述については、後からWindowsFormsHostとPictureBoxに対してC#プログラムから制御（表示／非表示設定や画像の読み込み）を行うため、適切な名前を付けておきます。
ここでは、WindowsFormsHost に "uxHost"、PictureBoxに "uxProgress" という名前を付けています。
また、WindowsFormsHostについては、PictureBoxを中央に表示させるために、HorizontalAlignmentとVerticalAlignmentを "Center" に設定すると共に、非表示にするためVisibility="Hidden" を設定しておきます。
非表示に設定するのはXAMLではなく、C#ソースコード上のコンストラクタで行っても構いません。
|
1 2 3 4 |
//コントロールの記述 <WindowsFormsHost x:Name="uxHost" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Hidden"> <wf:PictureBox x:Name="uxProgress"/> </WindowsFormsHost> |
この時点だと画面一杯にPictureBoxが表示されていると思うので、Visual Studioのレイアウトエディタを使ってWindowsFormsHostのサイズ（＝PictureBoxのサイズ）を適切に変更してください。
C#ソースに名前空間を追加
PictureBoxにGIf画像を登録するためには、Bitmapクラスを使います。
このBitmapクラスは Sytem.Drawing 名前空間に存在しているので、次の１行をソースコードの冒頭に追加してください。
|
1 |
using System.Drawing; |
PictureBoxに画像を登録
最後にPictureBoxに画像を登録します。
先ほどPictureBoxに "uxProgress" という名前を付けていますので、ImageプロパティにGIF画像を追加します。
GIF画像のファイルを読み込むには、 Bitmap.FromFile メソッドを使います。
下記はResourceフォルダ直下に progress.gif が置かれている場合の記述例です。
|
1 |
uxProgress.Image = Bitmap.FromFile(@".\Resources\progress.gif"); |
プロジェクトに画像を登録したり、プログラムから参照する方法については、こちら の記事を参考にしてください。
１点注意としては、GIF画像のプロパティの「出力ディレクトリにコピー」を「常にコピーする」に変更しておく必要があるということです。
こうすることで、Visual Studio のレイアウトエディタ上とデバックを含む実行中のどちらでもGIF画像が表示されるようになります。
処理に応じてアニメーションをON/OFF
では、実際にアニメーションをON/OFFする方法について解説します。
操作は簡単で、アニメーションをONにしたい箇所で WindowsFormsHostのVisibilityを Visibleに、アニメーションをOFFにしたい箇所で Visibilityを Hidden にするだけです。
|
1 2 3 |
uxHost.Visibility = Visibility.Visible; ～時間の掛かる処理～ uxHost.Visibility = Visibility.Hidden; |
処理中に発生するエラー（例外処理）をTry～Catchで補足するのであれば、Catchの処理でも Visibilityを Hidden にする処理を入れることは忘れないで下さい。
でないと、エラーになったら延々アニメーションが動作し続けることになりますので・・・。
ぐるぐる回るGIFの作り方
ぐるぐる回るGIFを作るための無料のサイトが公開されています。
Ajaxload、LoadInfo、Preloaders などのサイトが有名ですが、ここでは一番使いやすく種類が豊富な Preloaders について解説します。
URLは次の通りです。
https://icons8.com/preloaders/
下記が実際のサイトの画面です。
フリーと有料があるようですが、Freeだけを表示することも可能です。
気に入ったデザインをクリックすると、下記の詳細画面が表示されます。
ここで、色やスピード、画像サイズなどを変更することが可能です。
一番下に「Generate」ボタンがありますが、これをクリックするまでは変更した内容はアニメーションに反映されませんのでご注意ください。
設定が完了したら、「Download」ボタンでアニメーションGIF画像をダウンロードできます。
まとめ
今回はWPFで処理中を表すため、アニメーションGIFの表示方法と、アニメーションGIFを作るための無料サイトについてご紹介しました。
WindowsFormに比べてWPFの方がアニメーション機能は充実しているとはいえ、Storyboard はそれなりに面倒ですし、単純にGIFを表示する用途では、MediaElement も決して使いやすいとは言えません。
今のところ、WindowsFormsHost 経由で PictureBox を使うのが一番手軽っぽいです。
長い時間の掛かる処理があれば、一度試してみてはいかがでしょうか。
コメント