Image Graphics

Image は URI、ファイルパス、アプリケーションリソースなどさまざまなソースから画像を表示するコントロールです。複数の画像フォーマットに対応し、コンテナに対する画像の拡大縮小方法を制御できます。

概要

WPF の Image コントロールは FrameworkElement を継承したシンプルな画像表示要素です。Source プロパティに BitmapImage、DrawingImage、RenderTargetBitmap などの ImageSource 派生クラスを設定して使用します。

XAML では Source に URI 文字列を設定するだけで、WPF が自動的に BitmapImage に変換します。アプリのリソースに埋め込んだ画像は /AssemblyName;component/Images/logo.png 形式の URI でアクセスできます。

Stretch プロパティで Image がコンテナに対してどのようにサイズ調整されるかを制御します。Uniform はアスペクト比を保ちながら収まるようにスケール、UniformToFill はアスペクト比を保ちながらコンテナを完全に埋めます（端がクリップされる場合あり）。

高 DPI 環境では、RenderOptions.BitmapScalingMode 添付プロパティで補間方法を制御します。HighQuality は滑らかな拡大縮小を提供し、NearestNeighbor はピクセルアート画像をシャープに表示します。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`Source`	`ImageSource (URI / file path)`	表示する画像のソースを設定します。アプリケーションにリソースとして埋め込んだ画像は Pack URI 形式（例：`pack://application:,,,/Images/logo.png`）でアクセスします。大量の画像を扱う場合は `BitmapImage` の `CacheOption=OnLoad` を指定してデコードを即時に行うと、ストリームを早期に解放できます。はまりやすいポイント：XAML でバインドに単純な文字列 URI を渡すとコンバーターが自動適用されて動作しますが、コードビハインドで直接 `Image.Source = "path"` と文字列を代入してもエラーになります。コードビハインドでは `BitmapImage` か `ImageSourceConverter` を使って変換してから設定してください。
`Stretch`	`None / Fill / Uniform / UniformToFill`	画像がコンテナに対してどのようにスケールされるかを設定します。`Uniform` はアスペクト比を保って収まるようにスケールしレターボックス（余白）が生じます。`UniformToFill` はアスペクト比を保ってコンテナを完全に埋め、はみ出した端がクリップされます。`Fill` はアスペクト比を無視して引き伸ばします。プロフィール写真やカバー画像は `UniformToFill` が自然な見た目になります。はまりやすいポイント：`UniformToFill` では端がクリップされていても画像全体がメモリに展開されるため、大きな画像ではメモリを無駄に消費します。
`StretchDirection`	`UpOnly / DownOnly / Both`	スケールの方向を制限します。`UpOnly` は拡大のみ許可（縮小しない）、`DownOnly` は縮小のみ許可（拡大しない）、`Both` は両方向にスケールします。アイコン画像が大きなコンテナで引き伸ばされてぼけないよう `UpOnly` は重要です。はまりやすいポイント：`StretchDirection=UpOnly` と `Stretch=Uniform` を組み合わせた場合、小さな画像を大きなコンテナに入れても画像は自然サイズのまま拡大されません。アイコン用途では意図した動作ですが、写真表示では予期しない小さな表示になることがあります。

XAML 使用例

<!-- リソース画像 -->
<Image Source="/Images/logo.png" Stretch="Uniform"
       Width="200" Height="100" />

<!-- ViewModel からバインド -->
<Image Source="{Binding ThumbnailUri}" Stretch="UniformToFill"
       Width="120" Height="90" />

<!-- 高 DPI 向け品質設定 -->
<Image Source="/Icons/save.png" Stretch="None"
       RenderOptions.BitmapScalingMode="HighQuality" />

主な使用例

アプリロゴの表示 — ウィンドウヘッダーや起動画面にアプリアイコンを表示します。
製品・商品画像 — ECサイト風アプリで製品の写真をサムネイルや拡大表示に使います。
ユーザーアバター — プロフィール画像をサークル形にクリップして表示します（Border の ClipToBounds と組み合わせ）。
地図・チャート画像 — 外部サービスから取得した地図画像や生成したチャート画像をバインドして表示します。
ツールバーアイコン — ツールバーボタンの Content として小さなアイコン画像を配置します。

ヒントとベストプラクティス

アスペクト比を保つには Uniform を使う — 写真など比率が重要な画像には Stretch="Uniform" を使って歪まないようにします。
BitmapImage の CacheOption — 大量の画像を扱う場合は BitmapImage の CacheOption に BitmapCacheOption.OnLoad を設定してデコードを前倒しにします。
非同期画像読み込み — 大きな画像を読み込む際は BitmapImage に BitmapCreateOptions.DelayCreation を設定し BeginInit/EndInit で非同期読み込みを行うことで UI のフリーズを防ぎます。
メモリ管理 — Image コントロールが非表示になったら Source プロパティに null を設定するか BitmapImage に WeakReference を使ってメモリリークを防ぎます。大きな画像は解放しないとメモリを占有し続けます。
Viewbox との違いを理解する — Image 自体に Stretch プロパティがあります。Viewbox でラップするより Image の Stretch を使うほうがシンプルです。
StretchDirection でダウンスケールのみ許可 — 小さなアイコン画像が大きなコンテナで拡大してぼけないよう StretchDirection="DownOnly" を設定します。
SVG は直接表示不可 — WPF の Image は SVG に対応していません。SVG を表示するにはサードパーティライブラリまたは Path/Canvas での再実装が必要です。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。アプリ内の「コード表示」ボタンから各プロパティの実際の XAML を確認できます。

GitHub で Image のソースコードを見る →