イメージングの概要Imaging Overview

このトピックでは、Microsoft Windows Presentation Foundation Imaging コンポーネントの概要について説明します。This topic provides an introduction to the Microsoft Windows Presentation Foundation Imaging Component. WPF イメージングを使用すると、開発者はイメージの表示、変換、および書式設定を行うことができます。WPF Imaging enables developers to display, transform, and format images.

WPF Imaging ComponentWPF Imaging Component

WPF イメージングでは、Microsoft Windows 内のイメージング機能が大幅に強化されています。WPF Imaging provides significant enhancements in imaging capabilities within Microsoft Windows. ビットマップの表示や一般的なコントロールでのイメージの使用などのイメージング機能は、以前は Microsoft Windows グラフィックスデバイスインターフェイス (GDI) または Microsoft Windows GDI + ライブラリに依存していました。Imaging capabilities, such as displaying a bitmap or using an image on a common control were previously reliant upon the Microsoft Windows Graphics Device Interface (GDI) or Microsoft Windows GDI+ libraries. これらの API は、ベースラインイメージング機能を提供しますが、コーデック拡張機能や忠実度の高いイメージのサポートなどの機能を備えていません。These API provide baseline imaging functionality, but lack features such as support for codec extensibility and high fidelity image support. WPF イメージングは、GDI と GDI + の欠点を克服し、アプリケーション内でイメージを表示して使用するための新しい API のセットを提供するように設計されています。WPF Imaging is designed to overcome the shortcomings of GDI and GDI+ and provide a new set of API to display and use images within your applications.

WPF イメージング API にアクセスするには、マネージコンポーネントとアンマネージコンポーネントの2つの方法があります。There are two ways to access the WPF Imaging API, a managed component and an unmanaged component. アンマネージ コンポーネントは、次の機能を提供します。The unmanaged component provides the following features.

  • 新規または独自のイメージ形式の機能拡張モデル。Extensibility model for new or proprietary image formats.

  • ビットマップ (BMP)、ジョイント Photographics エキスパートグループ (JPEG)、ポータブルネットワークグラフィックス (PNG)、Tagged Image File Format (TIFF)、Microsoft Windows Media Photo、グラフィックスインターチェンジ形式 (GIF) など、ネイティブイメージ形式のパフォーマンスとセキュリティが向上しました。とアイコン (.ico)。Improved performance and security on native image formats including bitmap (BMP), Joint Photographics Experts Group (JPEG), Portable Network Graphics (PNG), Tagged Image File Format (TIFF), Microsoft Windows Media Photo, Graphics Interchange Format (GIF), and icon (.ico).

  • チャネルあたり最大 8 ビットのビット深度の高いイメージ データの保存 (ピクセルあたり 32 ビット)。Preservation of high bit-depth image data up to 8 bits per channel (32 bits per pixel).

  • 非破壊的なイメージのスケーリング、クロップ、および回転。Nondestructive image scaling, cropping, and rotations.

  • 単純化されたカラー管理。Simplified color management.

  • ファイル内での専用メタデータのサポート。Support for in-file, proprietary metadata.

  • マネージコンポーネントは、アンマネージインフラストラクチャを使用して、ユーザー インターフェイス (UI)user interface (UI)、アニメーション、グラフィックスなどの他の WPF 機能とイメージをシームレスに統合します。The managed component utilizes the unmanaged infrastructure to provide seamless integration of images with other WPF features such as ユーザー インターフェイス (UI)user interface (UI), animation, and graphics. マネージコンポーネントは、WPF アプリケーションで新しいイメージ形式を自動的に認識できるようにする Windows Presentation Foundation (WPF) イメージングコーデック拡張モデルの利点もあります。The managed component also benefits from the Windows Presentation Foundation (WPF) imaging codec extensibility model which enables automatic recognition of new image formats in WPF applications.

マネージ WPF Imaging API の大部分は System.Windows.Media.Imaging 名前空間に存在しますが、ImageBrushImageDrawing などのいくつかの重要な型は System.Windows.Media 名前空間に存在し、ImageSystem.Windows.Controls 名前空間に存在します。The majority of the managed WPF Imaging API reside in the System.Windows.Media.Imaging namespace, though several important types, such as ImageBrush and ImageDrawing reside in the System.Windows.Media namespace and Image resides in the System.Windows.Controls namespace.

このトピックでは、マネージド コンポーネントに関する追加情報について説明します。This topic provides additional information about the managed component. アンマネージ API の詳細については、アンマネージ WPF イメージングコンポーネントのドキュメントを参照してください。For more information on the unmanaged API see the Unmanaged WPF Imaging Component documentation.

WPF イメージ形式WPF Image Formats

コーデックは、特定のメディア形式をデコードまたはエンコードするために使用されます。A codec is used to decode or encode a specific media format. WPF イメージングには、BMP、JPEG、PNG、TIFF、Windows Media Photo、GIF、および ICON image 形式のコーデックが含まれています。WPF Imaging includes a codec for BMP, JPEG, PNG, TIFF, Windows Media Photo, GIF, and ICON image formats. アプリケーションは、これらのコーデックを使用して、対応するイメージ形式をデコードでき、ICON を除くイメージ形式をエンコードできます。Each of these codecs enable applications to decode and, with the exception of ICON, encode their respective image formats.

BitmapSource は、イメージのデコードとエンコードで使用される重要なクラスです。BitmapSource is an important class used in the decoding and encoding of images. これは、WPF イメージングパイプラインの基本的な構成要素であり、特定のサイズと解像度で1つの定数のピクセルセットを表します。It is the basic building block of the WPF Imaging pipeline and represents a single, constant set of pixels at a certain size and resolution. BitmapSource には、複数のフレームイメージの個々のフレームを指定することも、BitmapSourceに対して実行される変換の結果にすることもできます。A BitmapSource can be an individual frame of a multiple frame image, or it can be the result of a transform performed on a BitmapSource. これは、BitmapFrameなど、WPF イメージングで使用される主なクラスの多くの親です。It is the parent of many of the primary classes used in WPF imaging such as BitmapFrame.

BitmapFrame は、イメージ形式の実際のビットマップデータを格納するために使用されます。A BitmapFrame is used to store the actual bitmap data of an image format. 多くのイメージ形式でサポートされるのは1つの BitmapFrameのみですが、GIF や TIFF などの形式では、イメージごとに複数のフレームがサポートされます。Many image formats only support a single BitmapFrame, although formats such as GIF and TIFF support multiple frames per image. フレームは、デコーダーによって入力データとして使用され、イメージ ファイルを作成するためにエンコーダーに渡されます。Frames are used by decoders as input data and are passed to encoders to create image files.

次の例では、BitmapSource から BitmapFrame を作成し、TIFF イメージに追加する方法を示します。The following example demonstrates how a BitmapFrame is created from a BitmapSource and then added to a TIFF image.

BitmapSource image5 = BitmapSource.Create(
    width,
    height,
    96,
    96,
    PixelFormats.Indexed1,
    BitmapPalettes.WebPalette,
    pixels,
    stride);

FileStream stream5 = new FileStream("palette.tif", FileMode.Create);
TiffBitmapEncoder encoder5 = new TiffBitmapEncoder();
encoder5.Frames.Add(BitmapFrame.Create(image5));
encoder5.Save(stream5);
Dim image5 As BitmapSource = System.Windows.Media.Imaging.BitmapSource.Create(width, height, 96, 96, PixelFormats.Indexed1, BitmapPalettes.WebPalette, pixels, stride)

Dim stream5 As New FileStream("palette.tif", FileMode.Create)
Dim encoder5 As New TiffBitmapEncoder()
encoder5.Frames.Add(BitmapFrame.Create(image5))
encoder5.Save(stream5)

イメージ形式のデコードImage Format Decoding

イメージのデコードは、イメージ形式をシステムで使用できるイメージ データに変換する操作です。Image decoding is the translation of an image format to image data that can be used by the system. 変換したイメージ データを使用して、表示、処理、または別の形式へのエンコードを実行できます。The image data can then be used to display, process, or encode to a different format. デコーダーの選択は、イメージ形式に基づきます。Decoder selection is based on the image format. コーデックの選択は、特定のデコーダーを指定しない限り、自動的に行われます。Codec selection is automatic unless a specific decoder is specified. 自動デコード操作については、「WPF でのイメージの表示」セクションの例を参照してください。The examples in the Displaying Images in WPF section demonstrate automatic decoding. アンマネージ WPF イメージングインターフェイスを使用して開発され、システムに登録されたカスタム書式指定デコーダーは、自動的にデコーダーの選択に参加します。Custom format decoders developed using the unmanaged WPF Imaging interfaces and registered with the system automatically participate in decoder selection. これにより、カスタム書式を WPF アプリケーションに自動的に表示できます。This allows custom formats to be displayed automatically in WPF applications.

次の例は、ビットマップデコーダーを使用して、BMP 形式のイメージをデコードする方法を示しています。The following example demonstrates the use of a bitmap decoder to decode a BMP format image.


// Open a Uri and decode a BMP image
System::Uri^ myUri = gcnew System::Uri("tulipfarm.bmp", UriKind::RelativeOrAbsolute);
BmpBitmapDecoder^ decoder2 = gcnew BmpBitmapDecoder(myUri, BitmapCreateOptions::PreservePixelFormat, BitmapCacheOption::Default);
BitmapSource^ bitmapSource2 = decoder2->Frames[0];

// Draw the Image
Image^ myImage2 = gcnew Image();
myImage2->Source = bitmapSource2;
myImage2->Stretch = Stretch::None;
myImage2->Margin = System::Windows::Thickness(20);

// Open a Uri and decode a BMP image
Uri myUri = new Uri("tulipfarm.bmp", UriKind.RelativeOrAbsolute);
BmpBitmapDecoder decoder2 = new BmpBitmapDecoder(myUri, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapSource bitmapSource2 = decoder2.Frames[0];

// Draw the Image
Image myImage2 = new Image();
myImage2.Source = bitmapSource2;
myImage2.Stretch = Stretch.None;
myImage2.Margin = new Thickness(20);
' Open a Uri and decode a BMP image
Dim myUri As New Uri("tulipfarm.bmp", UriKind.RelativeOrAbsolute)
Dim decoder2 As New BmpBitmapDecoder(myUri, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default)
Dim bitmapSource2 As BitmapSource = decoder2.Frames(0)

' Draw the Image
Dim myImage2 As New Image()
myImage2.Source = bitmapSource2
myImage2.Stretch = Stretch.None
myImage2.Margin = New Thickness(20)

イメージ形式のエンコードImage Format Encoding

イメージのエンコードは、イメージ データを特定のイメージ形式に変換する操作です。Image encoding is the translation of image data to a specific image format. エンコードされたイメージ データを使用して、新しいイメージ ファイルを作成できます。The encoded image data can then be used to create new image files. WPF イメージングでは、上記で説明したイメージ形式ごとにエンコーダーが提供されます。WPF Imaging provides encoders for each of the image formats described above.

次の例は、エンコーダーを使用して新しく作成されたビットマップ イメージを保存する操作を示しています。The following example demonstrates the use of an encoder to save a newly created bitmap image.

FileStream^ stream = gcnew FileStream("new.bmp", FileMode::Create);
BmpBitmapEncoder^ encoder = gcnew BmpBitmapEncoder();
TextBlock^ myTextBlock = gcnew TextBlock();
myTextBlock->Text = "Codec Author is: " + encoder->CodecInfo->Author->ToString();
encoder->Frames->Add(BitmapFrame::Create(image));
encoder->Save(stream);
FileStream stream = new FileStream("new.bmp", FileMode.Create);
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "Codec Author is: " + encoder.CodecInfo.Author.ToString();
encoder.Frames.Add(BitmapFrame.Create(image));
encoder.Save(stream);
Dim stream As New FileStream("new.bmp", FileMode.Create)
Dim encoder As New BmpBitmapEncoder()
Dim myTextBlock As New TextBlock()
myTextBlock.Text = "Codec Author is: " + encoder.CodecInfo.Author.ToString()
encoder.Frames.Add(BitmapFrame.Create(image))
encoder.Save(stream)

WPF でのイメージの表示Displaying Images in WPF

Windows Presentation Foundation (WPF) アプリケーションでイメージを表示するには、いくつかの方法があります。There are several ways to display an image in a Windows Presentation Foundation (WPF) application. 画像を表示するには、Image コントロールを使用するか、ImageBrushを使用してビジュアルに描画するか、ImageDrawingを使用して描画します。Images can be displayed using an Image control, painted on a visual using an ImageBrush, or drawn using an ImageDrawing.

イメージ コントロールの使用Using the Image Control

Image はフレームワーク要素であり、アプリケーションにイメージを表示する主な方法です。Image is a framework element and the primary way to display images in applications. XAMLXAMLでは、次の2つの方法で Image を使用できます。属性構文またはプロパティ構文。In XAMLXAML, Image can be used in two ways; attribute syntax or property syntax. 次の例は、属性構文とプロパティ タグ構文の両方を使用して、幅 200 ピクセルのイメージをレンダリングする方法を示しています。The following example shows how to render an image 200 pixels wide using both attribute syntax and property tag syntax. 属性の構文とプロパティの構文の詳細については、Dependency Properties Overviewを参照してください。For more information on attribute syntax and property syntax, see Dependency Properties Overview.

<!-- Simple image rendering. However, rendering an image this way may not
     result in the best use of application memory. See markup below which
     creates the same end result but using less memory. -->
<Image Width="200" 
Source="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg"/>

<Image Width="200">
  <Image.Source>
    <!-- To save significant application memory, set the DecodePixelWidth or  
     DecodePixelHeight of the BitmapImage value of the image source to the desired 
     height and width of the rendered image. If you don't do this, the application will 
     cache the image as though it were rendered as its normal size rather then just 
     the size that is displayed. -->
    <!-- Note: In order to preserve aspect ratio, only set either DecodePixelWidth
         or DecodePixelHeight but not both. -->
    <BitmapImage DecodePixelWidth="200"  
     UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
  </Image.Source>
</Image>

多くの例では、BitmapImage オブジェクトを使用してイメージファイルを参照しています。Many of the examples use a BitmapImage object to reference an image file. BitmapImage は、Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) の読み込み用に最適化された特殊な BitmapSource であり、Image コントロールの Source としてイメージを表示する簡単な方法です。BitmapImage is a specialized BitmapSource that is optimized for Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) loading and is an easy way to display images as the Source of an Image control.

次の例では、コードを使用して幅 200 ピクセルのイメージをレンダリングする方法を示します。The following example shows how to render an image 200 pixels wide using code.

注意

BitmapImage は、ISupportInitialize インターフェイスを実装して、複数のプロパティの初期化を最適化します。BitmapImage implements the ISupportInitialize interface to optimize initialization on multiple properties. プロパティの変更は、オブジェクトの初期化中にのみ実行できます。Property changes can only occur during object initialization. BeginInit を呼び出して、初期化が開始されたことを通知し、初期化が完了したことを通知する EndInit ます。Call BeginInit to signal that initialization has begun and EndInit to signal that initialization has completed. 初期化の完了後は、プロパティの変更は無視されます。Once initialized, property changes are ignored.

 // Create Image Element
 Image myImage = new Image();
 myImage.Width = 200;

 // Create source
 BitmapImage myBitmapImage = new BitmapImage();

 // BitmapImage.UriSource must be in a BeginInit/EndInit block
 myBitmapImage.BeginInit();
 myBitmapImage.UriSource = new Uri(@"C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg");

 // To save significant application memory, set the DecodePixelWidth or  
 // DecodePixelHeight of the BitmapImage value of the image source to the desired 
 // height or width of the rendered image. If you don't do this, the application will 
 // cache the image as though it were rendered as its normal size rather then just 
 // the size that is displayed.
 // Note: In order to preserve aspect ratio, set DecodePixelWidth
 // or DecodePixelHeight but not both.
 myBitmapImage.DecodePixelWidth = 200;
 myBitmapImage.EndInit();
 //set image source
 myImage.Source = myBitmapImage;
' Create Image Element
Dim myImage As New Image()
myImage.Width = 200

' Create source
Dim myBitmapImage As New BitmapImage()

' BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit()
myBitmapImage.UriSource = New Uri("C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg")

' To save significant application memory, set the DecodePixelWidth or  
' DecodePixelHeight of the BitmapImage value of the image source to the desired 
' height or width of the rendered image. If you don't do this, the application will 
' cache the image as though it were rendered as its normal size rather then just 
' the size that is displayed.
' Note: In order to preserve aspect ratio, set DecodePixelWidth
' or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200
myBitmapImage.EndInit()
'set image source
myImage.Source = myBitmapImage

イメージの回転、変換、およびクロップRotating, Converting, and Cropping Images

WPF を使用すると、ユーザーは BitmapImage のプロパティを使用して、または CroppedBitmapFormatConvertedBitmapなどの追加の BitmapSource オブジェクトを使用してイメージを変換できます。WPF enables users to transform images by using properties of BitmapImage or by using additional BitmapSource objects such as CroppedBitmap or FormatConvertedBitmap. これらのイメージの変換では、イメージの拡大縮小、回転、ピクセル形式の変更、またはクロップを行うことができます。These image transformations can scale or rotate an image, change the pixel format of an image, or crop an image.

イメージの回転は、BitmapImageRotation プロパティを使用して実行されます。Image rotations are performed using the Rotation property of BitmapImage. 回転は、90 ° 単位でのみ実行できます。Rotations can only be done in 90 degree increments. 次の例では、イメージが 90 ° 回転します。In the following example, an image is rotated 90 degrees.

<Image Width="150" Margin="5" Grid.Column="0" Grid.Row="1">
  <Image.Source>
    <TransformedBitmap Source="/sampleImages/watermelon.jpg" >
      <TransformedBitmap.Transform>
        <RotateTransform Angle="90"/>
      </TransformedBitmap.Transform>
    </TransformedBitmap>
  </Image.Source>
</Image>
// Create Image element.
Image rotated90 = new Image();
rotated90.Width = 150;

// Create the TransformedBitmap to use as the Image source.
TransformedBitmap tb = new TransformedBitmap();

// Create the source to use as the tb source.
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(@"sampleImages/watermelon.jpg", UriKind.RelativeOrAbsolute);
bi.EndInit();

// Properties must be set between BeginInit and EndInit calls.
tb.BeginInit();
tb.Source = bi;
// Set image rotation.
RotateTransform transform = new RotateTransform(90);
tb.Transform = transform;
tb.EndInit();
// Set the Image source.
rotated90.Source = tb;
' Create Image element.
Dim rotated90 As New Image()
rotated90.Width = 150

' Create the TransformedBitmap to use as the Image source.
Dim tb As New TransformedBitmap()

' Create the source to use as the tb source.
Dim bi As New BitmapImage()
bi.BeginInit()
bi.UriSource = New Uri("sampleImages/watermelon.jpg", UriKind.RelativeOrAbsolute)
bi.EndInit()

' Properties must be set between BeginInit and EndInit calls.
tb.BeginInit()
tb.Source = bi
' Set image rotation.
Dim transform As New RotateTransform(90)
tb.Transform = transform
tb.EndInit()
' Set the Image source.
rotated90.Source = tb

画像をグレースケールなどの別のピクセル形式に変換するには、FormatConvertedBitmapを使用します。Converting an image to a different pixel format such as grayscale is done using FormatConvertedBitmap. 次の例では、イメージが Gray4に変換されます。In the following examples, an image is converted to Gray4.

<!-- Grayscale XAML Image -->
<Image Width="200" Grid.Column="0" Grid.Row="1">
   <Image.Source>
      <FormatConvertedBitmap Source="/sampleImages/rocks.jpg"  DestinationFormat="Gray4" />
   </Image.Source>
</Image>
//Create Image Element
Image grayImage = new Image();
grayImage.Width = 200;
grayImage.Margin = new Thickness(5);

//Create source using xaml defined resource.
FormatConvertedBitmap fcb = new FormatConvertedBitmap(
   (BitmapImage)this.Resources["masterImage"],PixelFormats.Gray4,null,0);
//set image source
grayImage.Source = fcb;
'Create Image Element
Dim grayImage As New Image()
grayImage.Width = 200
grayImage.Margin = New Thickness(5)

'Create source using xaml defined resource.
Dim fcb As New FormatConvertedBitmap(CType(Me.Resources("masterImage"), BitmapImage), PixelFormats.Gray4, Nothing, 0)
'set image source
grayImage.Source = fcb

イメージをトリミングするには、Image または CroppedBitmapClip プロパティを使用できます。To crop an image, either the Clip property of Image or CroppedBitmap can be used. 通常、イメージの一部を表示するだけの場合は、Clip を使用する必要があります。Typically, if you just want to display a portion of an image, Clip should be used. トリミングされたイメージをエンコードして保存する必要がある場合は、CroppedBitmap を使用する必要があります。If you need to encode and save a cropped image, the CroppedBitmap should be used. 次の例では、EllipseGeometryを使用して、クリッププロパティを使用してイメージをトリミングします。In the following example, an image is cropped using the Clip property using an EllipseGeometry.

<!-- Cropping an Image using Clip -->
<Image Width="200" Grid.Column="0" Grid.Row="5" Margin="5"
   Source="/sampleImages/gecko.jpg">
  <Image.Clip>
    <EllipseGeometry Center="75,50" RadiusX="50" RadiusY="25" />
  </Image.Clip>
</Image>
           //Create the image for clipping
           Image clipImage = new Image();
           clipImage.Width = 200;
           clipImage.Margin = new Thickness(5);

           //Create & Set source
           BitmapImage bi = new BitmapImage();
           //BitmapImage.UriSource must be in a BeginInit/EndInit block
           bi.BeginInit();
           bi.UriSource = new Uri("pack://application:,,/sampleImages/gecko.jpg");
           bi.EndInit();
           clipImage.Source = bi;

           //Clip the using an EllipseGeometry
           EllipseGeometry clipGeometry = new EllipseGeometry(new Point(75, 50), 50, 25);
           clipImage.Clip = clipGeometry;
' Create the image for clipping
Dim clipImage As New Image()
clipImage.Width = 200
clipImage.Margin = New Thickness(5)

'Create & Set source
Dim bi As New BitmapImage()
' BitmapImage properties must be in a BeginInit/EndInit block
bi.BeginInit()
bi.UriSource = New Uri("pack://application:,,/sampleImages/gecko.jpg")
bi.EndInit()
clipImage.Source = bi

' Clip the using an EllipseGeometry
Dim clipGeometry As New EllipseGeometry(New System.Windows.Point(75, 50), 50, 25)
clipImage.Clip = clipGeometry

イメージの引き伸ばしStretching Images

Stretch プロパティは、コンテナーを埋めるためにイメージをどのように拡大するかを制御します。The Stretch property controls how an image is stretched to fill its container. Stretch プロパティは、Stretch 列挙体によって定義される次の値を受け入れます。The Stretch property accepts the following values, defined by the Stretch enumeration:

  • None: イメージは、出力領域に合わせて拡大されません。None: The image is not stretched to fill the output area. イメージが出力領域よりも大きい場合は、出力領域に収まらない部分がクリップされたイメージが出力領域に描画されます。If the image is larger than the output area, the image is drawn to the output area, clipping what does not fit.

  • Fill: イメージは、出力領域に合わせて拡大縮小されます。Fill: The image is scaled to fit the output area. イメージの高さと幅は個別に拡大縮小されるため、イメージの元の縦横比は保持されないことがあります。Because the image height and width are scaled independently, the original aspect ratio of the image might not be preserved. つまり、イメージは、出力コンテナーを完全に埋めるためにゆがんで表示される可能性があります。That is, the image might be warped in order to completely fill the output container.

  • Uniform: イメージは、出力領域内に完全に収まるようにスケーリングされます。Uniform: The image is scaled so that it fits completely within the output area. イメージの縦横比は保持されます。The image's aspect ratio is preserved.

  • UniformToFill: イメージは、イメージの元の縦横比を維持したまま、出力領域を完全に塗りつぶすようにスケーリングされます。UniformToFill: The image is scaled so that it completely fills the output area while preserving the image's original aspect ratio.

次の例では、使用可能な Stretch 列挙をそれぞれ Imageに適用します。The following example applies each of the available Stretch enumerations to an Image.

次の図は、この例の出力を示しています。また、イメージに適用した場合のさまざまな Stretch 設定の影響を示しています。The following image shows the output from the example and demonstrates the affect the different Stretch settings have when applied to an image.

異なる TileBrush Stretch 設定Different TileBrush Stretch settings
異なる Stretch 設定Different stretch settings

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <DockPanel>

    <Border DockPanel.Dock="Top" Background="Black">
      <TextBlock Foreground="White" HorizontalAlignment="Stretch" FontSize="20">
        Stretching an Image
      </TextBlock>
    </Border>

    <Grid Name="simpleGrid" Background="{StaticResource CheckeredBrushResource}" 
       Margin="10" 
       ShowGridLines="True"
       VerticalAlignment="Center"
       HorizontalAlignment="Center">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="200"/>
      </Grid.RowDefinitions>
      <!-- Labels -->
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="0" Grid.Row="0">None</TextBlock>
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="1" Grid.Row="0">Uniform</TextBlock>
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="2" Grid.Row="0">UniformToFill</TextBlock>
      <TextBlock Style="{StaticResource Header1}"
        Grid.Column="3" Grid.Row="0">Fill</TextBlock>
      <Border Grid.Column="0" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- None: Image is not scaled. If image is larger than the
             output area, the image will be cropped to the size of the output area.-->
        <Image
          Source="sampleImages/gecko.jpg" 
          Stretch="None" />
      </Border>
      <Border Grid.Column="1" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- Uniform: Scale to fit output area.
             Aspect ratio is preserved.-->
        <Image
          Source="sampleImages/gecko.jpg" 
          Stretch="Uniform" />
      </Border>
      <Border Grid.Column="2" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- UniformToFill: Scale to completely fill output area.
             Aspect ratio is preserved. Cropping may occur.-->
        <Image  
          Source="sampleImages/gecko.jpg" 
        Stretch="UniformToFill" />
      </Border>
      <Border Grid.Column="3" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
      <!-- Fill: Scale to completely fill output area.
             Aspect ratio may not be preserved.-->
      <Image 
        Source="sampleImages/gecko.jpg" 
        Stretch="Fill" />
      </Border>
    </Grid>
  </DockPanel>
</Page>

イメージによる塗りつぶしPainting with Images

画像は、Brushで描画することによってアプリケーションに表示することもできます。Images can also be displayed in an application by painting with a Brush. ブラシを使用すると、UIUI オブジェクトを単色で塗りつぶすことも、パターンとイメージの複雑な組み合わせで塗りつぶすこともできます。Brushes enable you to paint UIUI objects with anything from simple, solid colors to complex sets of patterns and images. イメージで描画するには、ImageBrushを使用します。To paint with images, use an ImageBrush. ImageBrush は、そのコンテンツをビットマップイメージとして定義する TileBrush の一種です。An ImageBrush is a type of TileBrush that defines its content as a bitmap image. ImageBrush には、ImageSource プロパティによって指定された1つのイメージが表示されます。An ImageBrush displays a single image, which is specified by its ImageSource property. イメージがゆがまないようしたり、パターンやその他の効果を作成したりするために、イメージの伸縮、配置、およびタイル表示方法を制御できます。You can control how the image is stretched, aligned, and tiled, enabling you to prevent distortion and produce patterns and other effects. 次の図は、ImageBrushで実現できるいくつかの効果を示しています。The following illustration shows some effects that can be achieved with an ImageBrush.

ImageBrush の出力例ImageBrush output examples
イメージ ブラシは、図形、コントロール、テキストなどを塗りつぶすことができるImage brushes can fill shapes, controls, text, and more

次の例では、ImageBrushを使用して、イメージでボタンの背景を描画する方法を示します。The following example demonstrates how to paint the background of a button with an image using an ImageBrush.

<!-- Sets the button's Background property with an ImageBrush. The resulting
     button has an image as its background. -->
<Button Grid.Row="3" Grid.Column="2" 
 Height="75" Width="100" Foreground="White" FontWeight="Bold"
 HorizontalAlignment="Left">
  A Button
  <Button.Background>
    <ImageBrush ImageSource="sampleImages\blueberries.jpg" />
  </Button.Background>
</Button>

イメージの ImageBrush と描画の詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」を参照してください。For additional information about ImageBrush and painting images see Painting with Images, Drawings, and Visuals.

イメージのメタデータImage Metadata

一部のイメージ ファイルには、ファイルの内容または特性を記述するメタデータが含まれています。Some image files contain metadata that describes the content or the characteristics of the file. たとえば、ほとんどのデジタル カメラは、イメージをキャプチャするために使用されるカメラの型番に関するメタデータを含むイメージを作成します。For example, most digital cameras create images that contain metadata about the make and model of the camera used to capture the image. 各イメージ形式では、メタデータの処理方法が異なりますが、WPF イメージングは、サポートされているイメージ形式ごとにメタデータを格納および取得するための統一された方法を提供Each image format handles metadata differently but WPF Imaging provides a uniform way of storing and retrieving metadata for each supported image format.

メタデータへのアクセスは、BitmapSource オブジェクトの Metadata プロパティを通じて提供されます。Access to metadata is provided through the Metadata property of a BitmapSource object. Metadata は、イメージに含まれるすべてのメタデータを含む BitmapMetadata オブジェクトを返します。Metadata returns a BitmapMetadata object that includes all the metadata contained by the image. このデータは、1 つのメタデータ スキーマでも、異なるスキーマの組み合わせでもかまいません。This data may be in one metadata schema or a combination of different schemes. WPF イメージングでは、次のイメージメタデータスキーマがサポートされています。 Exchangeable 可能イメージファイル (Exif)、テキスト (PNG テキストデータ)、イメージファイルディレクトリ (IFD)、国際通話通信委員会 (IPTC)、および拡張可能メタデータプラットフォーム (XMP)。WPF Imaging supports the following image metadata schemas: Exchangeable image file (Exif), tEXt (PNG Textual Data), image file directory (IFD), International Press Telecommunications Council (IPTC), and Extensible Metadata Platform (XMP).

メタデータの読み取りプロセスを簡略化するために、BitmapMetadata には、AuthorTitleCameraModelなどの簡単にアクセスできる名前付きプロパティがいくつか用意されています。In order to simplify the process of reading metadata, BitmapMetadata provides several named properties that can be easily accessed such as Author, Title, and CameraModel. これらの名前付きプロパティの多くは、メタデータを書き込むためにも使用できます。Many of these named properties can also be used to write metadata. メタデータを読み取るための追加サポートは、メタデータ クエリ リーダーによって提供されます。Additional support for reading metadata is provided by the metadata query reader. GetQuery メソッドは、 "/app1/exif/" などの文字列クエリを指定することによって、メタデータクエリリーダーを取得するために使用されます。The GetQuery method is used to retrieve a metadata query reader by providing a string query such as "/app1/exif/". 次の例では、 "/Text/Description" の場所に格納されているテキストを取得するために GetQuery が使用されています。In the following example, GetQuery is used to obtain the text stored in the "/Text/Description" location.


// Add the metadata of the bitmap image to the text block.
TextBlock^ myTextBlock = gcnew TextBlock();
myTextBlock->Text = "The Description metadata of this image is: " + pngInplace->GetQuery("/Text/Description")->ToString();

// Add the metadata of the bitmap image to the text block.
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "The Description metadata of this image is: " + pngInplace.GetQuery("/Text/Description").ToString();
' Add the metadata of the bitmap image to the text block.
Dim myTextBlock As New TextBlock()
myTextBlock.Text = "The Description metadata of this image is: " + pngInplace.GetQuery("/Text/Description").ToString()

メタデータを書き込むには、メタデータ クエリ ライターが使用されます。To write metadata, a metadata query writer is used. SetQuery はクエリライターを取得し、目的の値を設定します。SetQuery obtains the query writer and sets the desired value. 次の例では、 "/Text/Description" の場所に格納されているテキストを書き込むために SetQuery が使用されています。In the following example, SetQuery is used to write the text stored in the "/Text/Description" location.

Stream^ pngStream = gcnew FileStream("smiley.png", FileMode::Open, FileAccess::ReadWrite, FileShare::ReadWrite);
PngBitmapDecoder^ pngDecoder = gcnew PngBitmapDecoder(pngStream, BitmapCreateOptions::PreservePixelFormat, BitmapCacheOption::Default);
BitmapFrame^ pngFrame = pngDecoder->Frames[0];
InPlaceBitmapMetadataWriter^ pngInplace = pngFrame->CreateInPlaceBitmapMetadataWriter();
if (pngInplace->TrySave() == true)
{
   pngInplace->SetQuery("/Text/Description", "Have a nice day.");
}
pngStream->Close();
Stream pngStream = new System.IO.FileStream("smiley.png", FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite);
PngBitmapDecoder pngDecoder = new PngBitmapDecoder(pngStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapFrame pngFrame = pngDecoder.Frames[0];
InPlaceBitmapMetadataWriter pngInplace = pngFrame.CreateInPlaceBitmapMetadataWriter();
if (pngInplace.TrySave() == true)
{ pngInplace.SetQuery("/Text/Description", "Have a nice day."); }
pngStream.Close();
Dim pngStream As New System.IO.FileStream("smiley.png", FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite)
Dim pngDecoder As New PngBitmapDecoder(pngStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default)
Dim pngFrame As BitmapFrame = pngDecoder.Frames(0)
Dim pngInplace As InPlaceBitmapMetadataWriter = pngFrame.CreateInPlaceBitmapMetadataWriter()
If pngInplace.TrySave() = True Then
    pngInplace.SetQuery("/Text/Description", "Have a nice day.")
End If
pngStream.Close()

コーデックの機能拡張Codec Extensibility

WPF イメージングのコア機能は、新しいイメージコーデックの拡張モデルです。A core feature of WPF Imaging is the extensibility model for new image codecs. これらのアンマネージインターフェイスにより、コーデック開発者はコーデックを WPF と統合できるため、新しいイメージ形式を WPF アプリケーションで自動的に使用できるようになります。These unmanaged interfaces enable codec developers to integrate codecs with WPF so new image formats can automatically be used by WPF applications.

機能拡張 API のサンプルについては、 Win32 サンプルコーデックを参照してください。For a sample of the extensibility API, see the Win32 Sample Codec. このサンプルは、カスタム イメージ形式用のデコーダーとエンコーダーの作成方法を示しています。This sample demonstrates how to create a decoder and encoder for a custom image format.

注意

システムで認識するは、コーデックをデジタル署名する必要があります。The codec must be digitally signed for the system to recognize it.

関連項目See also