WisdomSoft - for your serial experiences.

4.6 イメージ

JPEG や PNG などの画像ファイルをUIElementオブジェクトとして表示します。

4.6.1 画像ファイルを表示する

WPF でも、比較的容易にイメージを扱うことができますが、従来の System.Windows.Drawing よりもさらに抽象化され、汎用性を高めています。イメージには、描画要素としてイメージを扱う方法と、グラフィックスとしてのイメージデータとして扱う方法に分離されています。

要素と指定のイメージは System.Windows.Controls.Image クラスが担当します。Image クラスは、UIElement クラスから派生しているので、このクラスのオブジェクトをコンテンツとして扱うことができ、他のコントロールなどと組み合わせてレイアウトすることができます。

System.Windows.Controls.Image クラス
System.Object 
   System.Windows.Threading.DispatcherObject 
     System.Windows.DependencyObject 
       System.Windows.Media.Visual 
         System.Windows.UIElement 
           System.Windows.FrameworkElement 
            System.Windows.Controls.Image
[LocalizabilityAttribute(LocalizationCategory.None, Readability=Readability.Unreadable)] 
public class Image : FrameworkElement, IUriContext

Image クラスのコンストラクタはパラメータを受け取りません。

Image クラスのコンストラクタ
public Image ()

Image クラスをインスタンス化しても、初期状態のオブジェクトはイメージを参照していません。Image オブジェクトは、描画要素として出力するイメージのソースを Source プロパティで設定・取得することができます。

Image クラス Source プロパティ
public ImageSource Source { get; set; }

このプロパティは、Image 要素が描画するイメージの源泉となる System.Windows.Media.ImageSource クラスのオブジェクトを保有します。ImageSource は、画像としてのイメージデータを表すオブジェクトです。Image オブジェクトは、Source プロパティに設定されている ImageSource に従ってイメージを描画します。

System.Windows.Media.ImageSource クラス
System.Object 
   System.Windows.Threading.DispatcherObject 
     System.Windows.DependencyObject 
       System.Windows.Freezable 
         System.Windows.Media.Animation.Animatable 
          System.Windows.Media.ImageSource
[LocalizabilityAttribute(LocalizationCategory.None, Readability=Readability.Unreadable)] 
[TypeConverterAttribute(typeof(ImageSourceConverter))] 
public abstract class ImageSource : Animatable, IFormattable

ImageSouce クラスは、イメージを表す抽象クラスです。具体的に、どのようなイメージデータを扱うかは、このクラスを継承するサブクラスに委ねられています。ImageSource を継承するクラスは様々存在していますが、この場では画像ファイルを表示する System.Windows.Media.Imaging.BitmapImage クラスを用います。

System.Windows.Media.Imaging.BitmapImage クラス
System.Object 
   System.Windows.Threading.DispatcherObject 
     System.Windows.DependencyObject 
       System.Windows.Freezable 
         System.Windows.Media.Animation.Animatable 
           System.Windows.Media.ImageSource 
             System.Windows.Media.Imaging.BitmapSource 
              System.Windows.Media.Imaging.BitmapImage
public sealed class BitmapImage : BitmapSource, ISupportInitialize, IUriContext

BitmapImage クラスのコンストラクタでは、読み込むイメージの URI を表す System.Net パッケージの Uri オブジェクトを渡すことができます。相対 Uri を用いれば、用意にディスク上の画像ファイルを読み込むことができます。

BitmapImage クラスのコンストラクタ
public BitmapImage ()
public BitmapImage (Uri uriSource)

コンストラクタで設定した Uri は、UriSource プロパティで設定・取得することも可能です。

UriSource プロパティ
public Uri UriSource { get; set; }

WPF は、既定で BMP、JPEG、GIF、PNG、そして TIFF 形式のフォーマットに対応しています。これらの画像フォーマットは、Windows やインターネット上で標準的に取り扱われているものです。

コード1
using System;
using System.Net;

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;

class Test {
	[STAThread]
	public static void Main() {
		Uri uri = new Uri("test.jpg", UriKind.RelativeOrAbsolute);
		Image image = new Image();
		BitmapImage source = new BitmapImage(uri);

		image.Source = source;

		Window wnd = new Window();
		wnd.Content = image;

		Application app = new Application();
		app.Run(wnd);
	}
}
実行結果
コード1 実行結果

コード1は、アプリケーションの実行ファイルが配置されているフォルダにある test.jpg という画像ファイルを読み込んで表示するプログラムです。画像ファイルの場所を表す Uri オブジェクトにある画像ファイルを BitmapImage クラスで読み込み、指定した画像ファイルを ImageSource として Image オブジェクトの Source プロパティに設定しています。

ImageSource クラスには、イメージの幅と高さを取得する Width プロパティHeight プロパティを公開しています。読み込まれたイメージの種類に関係なく、イメージ本来のサイズはこれらのプロパティから取得することができます。

ImageSource クラス Width プロパティ
public abstract double Width { get; }
ImageSource クラス Height プロパティ
public abstract double Height{ get; }

これらのプロパティは、それぞれ ImageSource オブジェクトが表すイメージの幅と高さを論理ピクセル単位で返します。

コード2
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;

class Test {
	[STAThread]
	public static void Main() {
		Uri uri = new Uri("test.jpg", UriKind.RelativeOrAbsolute);
		BitmapImage source = new BitmapImage(uri);

		Image image = new Image();
		image.Source = source;
		image.Width = source.Width / 2;
		image.Height = source.Height / 2;
		Canvas.SetLeft(image,50);
		Canvas.SetTop(image, 10);

		Canvas canvas = new Canvas();
		canvas.Children.Add(image);

		Window wnd = new Window();
		wnd.Content = canvas;

		Application app = new Application();
		app.Run(wnd);
	}
}
実行結果
コード2 実行結果

コード2は、Canvas クラスを用いて Image オブジェクトの位置とサイズを明示的に指定して画像ファイルを表示するプログラムです。このプログラムでは、読み込んだ画像ファイルの BitmapImage オブジェクトから、幅と高さを Width 及び Height プロパティから取得し、この値を参考に、オリジナルの画像の半分のサイズで画面に表示します。画像ファイルのサイズを参考に、コントロールのレイアウトを行いたい場合などに、これらの情報が必要になるでしょう。