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

プログラミングTips
この記事は約6分で読めます。

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

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

WindowFormのPictureBoxでGIFを表示する

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

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

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

WindowsFormsHostコントロール の利用

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

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

手順は以下の5つです。

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

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

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

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

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

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

コントロールの記述については、後からWindowsFormsHostとPictureBoxに対してC#プログラムから制御(表示/非表示設定や画像の読み込み)を行うため、適切な名前を付けておきます。

ここでは、WindowsFormsHost に “uxHost”、PictureBoxに “uxProgress” という名前を付けています。

また、WindowsFormsHostについては、PictureBoxを中央に表示させるために、HorizontalAlignmentとVerticalAlignmentを “Center” に設定すると共に、非表示にするためVisibility=”Hidden” を設定しておきます。

非表示に設定するのはXAMLではなく、C#ソースコード上のコンストラクタで行っても構いません。

この時点だと画面一杯にPictureBoxが表示されていると思うので、Visual Studioのレイアウトエディタを使ってWindowsFormsHostのサイズ(=PictureBoxのサイズ)を適切に変更してください。

C#ソースに名前空間を追加

PictureBoxにGIf画像を登録するためには、Bitmapクラスを使います。

このBitmapクラスは Sytem.Drawing 名前空間に存在しているので、次の1行をソースコードの冒頭に追加してください。

PictureBoxに画像を登録

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

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

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

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

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

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

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

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

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

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

処理中に発生するエラー(例外処理)をTry~Catchで補足するのであれば、Catchの処理でも Visibilityを Hidden にする処理を入れることは忘れないで下さい。

でないと、エラーになったら延々アニメーションが動作し続けることになりますので・・・。

ぐるぐる回るGIFの作り方

ぐるぐる回るGIFを作るための無料のサイトが公開されています。

AjaxloadLoadInfoPreloaders などのサイトが有名ですが、ここでは一番使いやすく種類が豊富な Preloaders について解説します。 

URLは次の通りです。

Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator
More than 1000 free and premium ajax loader (loading animated GIF, SVG and APNG) spinners, bars and 3D animations generator for AJAX and JQuery

下記が実際のサイトの画面です。

フリーと有料があるようですが、Freeだけを表示することも可能です。

気に入ったデザインをクリックすると、下記の詳細画面が表示されます。

ここで、色やスピード、画像サイズなどを変更することが可能です。

一番下に「Generate」ボタンがありますが、これをクリックするまでは変更した内容はアニメーションに反映されませんのでご注意ください。

設定が完了したら、「Download」ボタンでアニメーションGIF画像をダウンロードできます。

まとめ

今回はWPFで処理中を表すため、アニメーションGIFの表示方法と、アニメーションGIFを作るための無料サイトについてご紹介しました。

WindowsFormに比べてWPFの方がアニメーション機能は充実しているとはいえ、Storyboard はそれなりに面倒ですし、単純にGIFを表示する用途では、MediaElement も決して使いやすいとは言えません。

今のところ、WindowsFormsHost 経由で PictureBox を使うのが一番手軽っぽいです。

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

タイトルとURLをコピーしました