WPF Tips(5) URLの画像を表示する

今日は、URLで指定された画像をWPFで表示する方法を紹介します。
画像の表示には「Image」クラスを使用します。

早速、コードを見てください。

   Image image = new Image();
   BitmapImage imageSource =  new BitmapImage(new Uri(画像のURL));
   image.Source = imageSource;

上記のサンプルでは、ImageクラスのインスタンスをC#側で生成していますが、
XAMLで宣言しても同じです。

URLの画像の取得には「BitmapImage」クラスを使用します。
画像の指定方法はコンストラクタにUriを指定するだけです。

そして、そのBitmapImageのインスタンスをImageのSourceプロパティに設定します。
画像のダウンロードは非同期で行われ、完了次第画面に表示されます。

これだけでは一点問題があります。

Imageのサイズが自動的に調整され、大きくなったりしていまいます。
これを防ぐためには以下のようにします。

   Image image = new Image();
   BitmapImage imageSource =  new BitmapImage(new Uri(画像のURL));
   image.Source = imageSource;

   //画像のロード完了イベントを処理して、画像のサイズを設定する
   imageSource.DownloadCompleted += new EventHandler((Object sender,EventArgs e) =>
   {
       image.Width = imageSource.PixelWidth;
       image.Height = imageSource.PixelHeight;
   });

BitmapImageクラスのPixelWidth、PixelHeightプロパティを使用すれば良いのですが、
先ほど、言いましたように画像のダウンロードは非同期で行われるため、
Sourceを設定した直後に取得しても0が返されてしまいます。

そこで上記のコードのように、BitmapImageクラスのDownloadCompletedイベントを処理して、
画像のロード完了後に画像のサイズを取得するようにします。
(ハンドラはラムダ式の匿名メソッドにしました。)