【WPF】C#で処理中にぐるぐる回るGIFを表示したい！

データ読み込みなどの処理中にぐるぐる回るアニメーションを表示したいことはありませんか？

Storyboard でアニメーションを作るのは面倒なので、手軽にアニメーションGIFを表示して代用したいという方に、WindowsFormsHostを使った方法を、フリーのサイトでGIFを入手する方法も含めて、超具体的に解説したいと思います。

WindowFormのPictureBoxでGIFを表示する

WPFの標準コントロールでアニメーションGIFを簡単に表示する方法はありません。

MediaElementは動画や音楽を再生するためのコントロールで、これを使ってアニメーションGIF
を表示することはできますが、表示開始までのタイムラグがあったり、コードを書かないとループ再生できない、たまに動作がカクカクするなどの問題があります。

そこで、WPFで用意されているWindowsFormsHost コントロールを経由して、WindowsFormでお馴染みのPictureBoxを使う方法が良く使われています。

WindowsFormsHostコントロール の利用

WindowsFormsHostコントロールは、WindowsForm専用の各種コントロールをWPFから利用するためのラッパーです。

WindowsFormsHostの詳しい説明は、こちら をご一読頂くとして、ここでは必要利用する上で必要な作業について説明します。

手順は以下の５つです。

1. 必要なアセンブリの参照設定
2. XAMLへ名前空間とコントロールを記述
3. C#ソースに名前空間を追加
4. PictureBoxに画像を登録
5. 処理に応じてアニメーションをON/OFF

必要なアセンブリの参照設定

プロジェクトの参照設定で、System.Drawing、System.Windows.Forms、WindowsFormsIntegration　の３つを加えます。

XAMLへ名前空間とコントロールを記述

XAMLへは以下の４行を記述します。

具体的には、次の１行を追加します。

//参照設定
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#ソースコード上のコンストラクタで行っても構いません。

//コントロールの記述
<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 名前空間に存在しているので、次の１行をソースコードの冒頭に追加してください。

using System.Drawing;

PictureBoxに画像を登録

最後にPictureBoxに画像を登録します。

先ほどPictureBoxに "uxProgress" という名前を付けていますので、ImageプロパティにGIF画像を追加します。

GIF画像のファイルを読み込むには、 Bitmap.FromFile メソッドを使います。

下記はResourceフォルダ直下に progress.gif が置かれている場合の記述例です。

uxProgress.Image = Bitmap.FromFile(@".\Resources\progress.gif");

プロジェクトに画像を登録したり、プログラムから参照する方法については、こちら の記事を参考にしてください。

１点注意としては、GIF画像のプロパティの「出力ディレクトリにコピー」を「常にコピーする」に変更しておく必要があるということです。

こうすることで、Visual Studio のレイアウトエディタ上とデバックを含む実行中のどちらでもGIF画像が表示されるようになります。

処理に応じてアニメーションをON/OFF

では、実際にアニメーションをON/OFFする方法について解説します。

操作は簡単で、アニメーションをONにしたい箇所で WindowsFormsHostのVisibilityを Visibleに、アニメーションをOFFにしたい箇所で Visibilityを Hidden にするだけです。

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 を使うのが一番手軽っぽいです。

長い時間の掛かる処理があれば、一度試してみてはいかがでしょうか。