画像とイメージ ブラシ

  • [アーティクル]

画像を表示するには、Image オブジェクトまたは ImageBrush オブジェクトを使うことができます。 Image オブジェクトは、イメージのレンダリングに使います。ImageBrush オブジェクトは、特定のイメージを使って別のオブジェクトを描画するために使います。

これらの要素は適切か。

Image 要素を使用して、アプリにスタンドアロンの画像を表示します。

ImageBrush を使用して、画像を別のオブジェクトに適用します。 ImageBrush の使用法には、テキストの装飾性を高める効果や、コントロールまたはレイアウト コンテナーの背景などがあります。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は 、Windows.UI.Xaml.Controls 名前空間と Windows.UI.Xaml.Media 名前空間に存在します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。

Windows 10 バージョン 1607 からは、Image 要素で、アニメーション GIF がサポートされるようになりました。 BitmapImage を画像の Source として使用する場合、BitmapImage API を利用してアニメーション GIF 画像の再生を制御できます。 詳しくは、BitmapImage クラスのページの「解説」をご覧ください。

注意

アニメーション GIF のサポートは、アプリがWindows 10バージョン 1607 用にコンパイルされ、バージョン 1607 (以降) で実行されている場合に使用できます。 アプリがそれ以前のバージョン向けにコンパイルされているか、それらのバージョンで実行されている場合、GIF の最初のフレームは表示されますが、アニメーション効果は得られません。

イメージを作成する

WinUI 3 ギャラリー アプリを開き、「ImageBrushes in action」を参照してください。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

イメージ

Image オブジェクトを使ってイメージを作成する方法を次の例に示します。

<Image Width="200" Source="sunset.jpg" />

次に示すのは、レンダリングされた Image オブジェクトです。

画像要素の例

この例の Source プロパティは、表示する画像がある場所を指定します。 ソースを設定するには、絶対 URL (http://contoso.com/myPicture.jpg など) を指定するか、アプリのパッケージ化構造を基準とする相対 URL を指定します。 この例では、プロジェクトのルート フォルダーに "sunset.jpg" イメージ ファイルを配置し、イメージ ファイルをコンテンツとして含むプロジェクト設定を宣言します。

ImageBrush

ImageBrush オブジェクトを使うと、Brush オブジェクトを受け付ける領域を、画像を使ってペイントできます。 たとえば、Ellipse の Fill プロパティまたは Canvas の Background プロパティの値に ImageBrush を使うことができます。

次の例は、ImageBrush を使って Ellipse をペイントする方法を示しています。

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="sunset.jpg" />
   </Ellipse.Fill>
</Ellipse>

次に示すのは、ImageBrush でペイントされた Ellipse です。

ImageBrush でペイントされた Ellipse (楕円)。

画像を拡大する

Image の Width 値または Height 値を設定しないと、Source で指定した画像の寸法で表示されます。 Width と Height を設定すると、画像を表示する領域を囲む四角形が作成されます。 この囲まれた領域に画像を描く方法は、Stretch プロパティを使って指定できます。 Stretch プロパティには、Stretch 列挙体で定義されている次の値を指定します。

  • None: 画像は拡大されず、出力領域全体に描かれません。 この Stretch の設定には注意してください。囲まれた領域よりもソース画像が大きいと、画像はクリップされます。ユーザーは意図的な Clip で行うような制御をビューポートに対して行うことができないため、通常このことは望ましくありません。
  • Uniform: 画像は、出力領域の大きさに合わせて拡大されます。 ただし、コンテンツの縦横比は保たれます。 これは、既定値です。
  • UniformToFill: 画像は拡大され、出力領域を完全に塗りつぶすように描かれますが、元の縦横比は保たれます。
  • Fill: 画像は、出力領域の大きさに合わせて拡大されます。 コンテンツの高さと幅は個々に拡大されるので、元の画像の縦横比は保たれません。 つまり、出力領域を完全に塗りつぶすために、画像がゆがむことがあります。

ストレッチ設定の例。

画像をトリミングする

Clip プロパティを使うと、画像出力から一定の領域をクリップできます。 Clip プロパティを Geometry に設定します。 現在、四角形以外のクリップはサポートされていません。

画像のクリップ領域として RectangleGeometry を使う方法を次の例に示します。 この例では、高さ 200 の Image オブジェクトを定義します。 RectangleGeometry は、表示される画像の領域に長方形を定義します。 Rect プロパティは "25,25,100,150" に設定されています。これは、四角形が "25,25" の位置から始まり、幅 100、高さ 150 になることを定義しています。 この長方形の領域の内部にだけ、画像が表示されます。

<Image Source="sunset.jpg" Height="200">
    <Image.Clip>
        <RectangleGeometry Rect="25,25,100,150" />
    </Image.Clip>
</Image>

黒い背景の上にクリップされた画像を次に示します。

RectangleGeometry によってトリミングされた Image オブジェクト。

不透明度を適用する

画像が半透明でレンダリングされるように、画像に Opacity を適用することができます。 不透明度の値は、0.0 (完全に透明) ～ 1.0 (完全に不透明) です。 不透明度 0.5 を Image に適用する方法を次の例に示します。

<Image Height="200" Source="sunset.jpg" Opacity="0.5" />

次に示すのは、不透明度 0.5 と黒い背景でレンダリングされ、部分的に不透明になった画像です。

不透明度 0.5 の Image オブジェクト。

画像ファイルの形式

Image と ImageBrush は、次の画像ファイル形式を表示できます。

  • Joint Photographic Experts Group (JPEG)
  • ポータブル ネットワーク グラフィックス (PNG)
  • ビットマップ (BMP)
  • グラフィックス交換形式 (GIF)
  • Tagged Image File Format (TIFF)
  • JPEG XR
  • アイコン (ICO)

Image、BitmapImage、BitmapSource 用の API には、メディア形式のエンコードとデコードを行う専用のメソッドは用意されていません。 エンコード操作とデコード操作はすべてビルトインであり、せいぜいエンコードまたはデコードの局面が読み込みイベント用のイベント データの一部として現れる程度です。 アプリが画像の変換または操作を行うため、画像のエンコードまたはデコードに関連する特別の作業が必要となったときは、Windows.Graphics.Imaging 名前空間に用意されている API を使ってください。 これらの API は、Windows の Windows Imaging Component (WIC) でもサポートされます。

アプリ リソースと、アプリでイメージ ソースをパッケージ化する方法の詳細については、「 スケール、テーマ、ハイ コントラストなどに合わせて調整されたイメージとアセットを読み込む」を参照してください。

WriteableBitmap

WriteableBitmap は、WIC からの基本的なファイルに基づくデコードを使わない、修正可能な BitmapSource を提供します。 画像を動的に変更し、更新後の画像を再レンダリングできます。 WriteableBitmap のバッファーの内容を定義するには、PixelBuffer プロパティを使ってバッファーにアクセスし、ストリームまたは言語固有のバッファーの種類を使って入力します。 コード例については、「WriteableBitmap」をご覧ください。

RenderTargetBitmap

RenderTargetBitmap クラスは、実行中のアプリから XAML UI ツリーをキャプチャして、ビットマップ画像ソースを表現することができます。 キャプチャした画像ソースは、アプリ内の他の部分に適用したり、リソース (つまり、ユーザーによって作成されたアプリ データ) として保存するなど、さまざまなシナリオに利用することができます。 特に便利なシナリオの 1 つは、ナビゲーション スキーム用の XAML ページのランタイム サムネイルを作成することです。 キャプチャされた画像に表示されるコンテンツに関して、RenderTargetBitmap にはいくつか制限があります。 詳しくは、RenderTargetBitmap の API リファレンス トピックをご覧ください。

画像ソースとスケーリング

画像ソースは、Windows がスケールするときにアプリで適切に表示されるように、複数の推奨サイズで作る必要があります。 Image の Source を指定する際には、現在のスケーリングに対応したリソースを自動的に示す名前付け規則を利用できます。 この名前付け規則の詳細や関連情報については、「クイック スタート: ファイルまたは画像リソースの使用」をご覧ください。

スケーリングの設計方法について詳しくは、「レイアウトとスケーリングの UX ガイドライン」をご覧ください。

コードを使った Image と ImageBrush

コードを使うよりも、XAML を使って Image と ImageBrush 要素を指定する方が一般的です。 これは、これらの要素が XAML UI 定義の一部としてのデザイン ツールの出力結果である場合が多いためです。

コードを使って Image または ImageBrush を定義する場合は、既定のコンストラクターを使い、次に、関連するソースのプロパティ (Image.Source とImageBrush.ImageSource) を設定します。 ソースのプロパティは、コードを使って設定する場合、BitmapImage (URI ではない) を必要と使用します。 ソースがストリームである場合は、SetSourceAsync メソッドを使って値を初期化します。 ソースが、ms-appx スキームまたは ms-resource スキームを使うアプリ内のコンテンツを含む URI である場合は、URI を受け取る BitmapImage コンストラクターを使います。 画像ソースが使えるようになるまで代替コンテンツを表示することが必要であるなど、画像ソースの取得やデコードについてタイミングの問題がある場合は、ImageOpened イベントを処理することも検討してください。 コード例については、 WinUI ギャラリーのサンプルを参照してください。

注意

コードを利用して画像を確立すると、自動処理を使って、現在のスケール修飾子とカルチャ修飾子で非修飾リソースにアクセスしたり、カルチャとスケールの修飾子で ResourceManager と ResourceMap を使って、リソースを直接取得したりできます。 詳しくは、「リソース管理システム」をご覧ください。

サンプル コードを入手する