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

当ページのリンクには広告が含まれています。

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

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は次の通りです。

https://icons8.com/preloaders/

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

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

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

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

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

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

まとめ

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次