Image（画像）

導入

Imageは、画像を表示するコントロールです。ロゴ・アイコン・写真などをUIに載せます。

XAMLサンプル（読み物）

<!-- Source に画像パス、Stretch で拡大縮小の仕方を指定 -->
<Image Source="/Assets/logo.png" Width="120" Stretch="Uniform" />

// コードから差し替える場合
img.Source = new BitmapImage(new Uri("/Assets/logo.png", UriKind.Relative));

主なプロパティ

• Source … 表示する画像
• Stretch … 拡大縮小の仕方：None（原寸）/Fill（枠いっぱい・比率無視）/Uniform（比率保持で収める）/UniformToFill（比率保持で埋める）
• Width / Height … 表示サイズ

補足: プロジェクトに画像を追加し、プロパティの**ビルドアクションをResource**にすると/Assets/...の形で参照できます。比率を崩したくないときはStretch="Uniform"。

MVVM（実務ではこう書く）

表示する画像を実行時に切り替えるなら、画像パス（またはURI）をViewModelのプロパティに持ち、Sourceにバインドします。

<Image Source="{Binding LogoPath}" Width="120" Stretch="Uniform" />

public string LogoPath
{
    get => _logoPath;
    set { _logoPath = value; OnPropertyChanged(); }
}
// 例: 状態に応じて LogoPath = "/Assets/logo_dark.png"; と差し替える

固定画像ならSource="/Assets/logo.png"の直書きで十分。切り替えが必要なときだけバインドします。

試す（ローカル）

• 画像をプロジェクトに追加（ビルドアクション=Resource）してSourceに指定。Stretchを切り替えて表示の違いを確認。
• 発展：SourceをViewModelのLogoPathにバインドし、実行中にパスを変えて画像が切り替わることを確認。

まとめ

• Imageは画像表示。Sourceで画像、Stretchで拡大縮小の仕方
• 画像はビルドアクションResourceで埋め込むと参照しやすい
• 実務で切り替えが要るときはSourceをViewModelのパスにバインド

次回: 画面とデータを連動させる「データバインディング」です。