次の方法で共有

画像

.NET マルチプラットフォーム アプリ UI (.NET MAUI) Image は、ローカル ファイル、URI、またはストリームから読み込むことができるイメージを表示します。 アニメーション GIF を含む標準のプラットフォーム イメージ形式がサポートされており、ローカルのスケーラブル ベクター グラフィックス (SVG) ファイルもサポートされています。 .NET MAUI アプリ プロジェクトへのイメージの追加の詳細については、「.NET MAUI アプリ プロジェクトにイメージを追加する」を参照してください。

Image では、次のプロパティを定義します。

  • Aspect型の Aspectは、イメージのスケーリング モードを定義します。
  • bool型の IsAnimationPlayingは、アニメーション GIF が再生されているか停止しているかを決定します。 このプロパティの既定値は falseです。
  • bool型の IsLoadingは、イメージの読み込み状態を示します。 このプロパティの既定値は falseです。
  • bool型の IsOpaqueは、レンダリング エンジンがイメージをレンダリング中に不透明として扱えるかどうかを示します。 このプロパティの既定値は falseです。
  • Sourceは、ImageSource型で、イメージのソースを指定します。

これらのプロパティは、BindableProperty オブジェクトによってサポートされます。つまり、スタイルを設定でき、データ バインディングのターゲットにすることができます。

手記

フォント アイコンは、フォント アイコン データを FontImageSource オブジェクトとして指定することで、Image で表示できます。 詳細については、「フォント アイコンを表示する」を参照してください。

ImageSource クラスは、さまざまなソースからイメージを読み込むのに使用できる次のメソッドを定義します。

  • FromFile は、ローカル ファイルからイメージを読み取る FileImageSource を返します。
  • FromUri は、指定した URI からイメージをダウンロードして読み取る UriImageSource を返します。
  • FromStream は、イメージ データを提供するストリームからイメージを読み取る StreamImageSource を返します。

XAML では、ファイル名または URI を Source プロパティの文字列値として指定することで、ファイルと URI からイメージを読み込むことができます。 カスタム マークアップ拡張機能を使用して、XAML のストリームからイメージを読み込むこともできます。

大事な

イメージは、Image のサイズがレイアウトによって制限されている場合、または Image の HeightRequest または WidthRequest プロパティが指定されていない限り、完全な解像度で表示されます。

アプリアイコンとスプラッシュスクリーンをアプリに追加する方法については、アプリアイコン と スプラッシュスクリーンを参照してください。

ローカル イメージを読み込む

イメージをアプリ プロジェクトに追加するには、プロジェクトの Resources\Images フォルダーにドラッグします。ここで、ビルド アクションは自動的に mauiImage に設定されます。 ビルド時に、ベクター イメージはターゲット プラットフォームとデバイスの適切な解像度にサイズ変更され、アプリ パッケージに追加されます。 これは、異なるプラットフォームが異なるイメージ解像度をサポートし、オペレーティング システムがデバイスの機能に基づいて実行時に適切なイメージ解像度を選択するためです。

Android リソースの名前付け規則に準拠するには、すべてのローカル イメージ ファイル名を小文字にし、先頭と末尾を文字で区切り、英数字またはアンダースコアのみを含める必要があります。 詳細については、developer.android.com アプリ リソースの概要 に関するページを参照してください。

大事な

.NET MAUI は SVG ファイルを PNG ファイルに変換します。 したがって、SVG ファイルを .NET MAUI アプリ プロジェクトに追加する場合は、.png 拡張子を持つ XAML または C# から参照する必要があります。

ファイルの名前付けと配置に関するこれらの規則に従うと、次の XAML で画像を読み込んで表示できます。

<Image Source="dotnet_bot.png" />

同等の C# コードは次のとおりです。

Image image = new Image
{
    Source = ImageSource.FromFile("dotnet_bot.png")
};

ImageSource.FromFile メソッドには string 引数が必要であり、ファイルからイメージを読み取る新しい FileImageSource オブジェクトを返します。 Image.Source プロパティの string 引数としてファイル名を指定できるようにする暗黙的な変換演算子もあります。

Image image = new Image { Source = "dotnet_bot.png" };

リモート イメージを読み込む

リモート イメージは、Source プロパティの値として URI を指定することでダウンロードおよび表示できます。

<Image Source="https://aka.ms/campus.jpg" />

同等の C# コードは次のとおりです。

Image image = new Image
{
    Source = ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"))
};

ImageSource.FromUri メソッドには Uri 引数が必要であり、Uriからイメージを読み取る新しい UriImageSource オブジェクトを返します。 文字列ベースの URI の暗黙的な変換もあります。

Image image = new Image { Source = "https://aka.ms/campus.jpg" };

イメージ キャッシュ

ダウンロードしたイメージのキャッシュは既定で有効になっており、キャッシュされたイメージは 1 日間保存されます。 この動作は、UriImageSource クラスのプロパティを設定することで変更できます。

UriImageSource クラスは、次のプロパティを定義します。

  • Uriは、Uri型で、表示用にダウンロードするイメージの URI を表します。
  • TimeSpan型の CacheValidityは、イメージをローカルに保存する期間を指定します。 このプロパティの既定値は 1 日です。
  • bool型の CachingEnabledは、イメージ キャッシュを有効にするかどうかを定義します。 このプロパティの既定値は trueです。

これらのプロパティは、BindableProperty オブジェクトによってサポートされます。つまり、スタイルを設定でき、データ バインディングのターゲットにすることができます。

特定のキャッシュ期間を設定するには、Source プロパティを、CacheValidity プロパティを設定する UriImageSource オブジェクトに設定します。

<Image>
    <Image.Source>
        <UriImageSource Uri="https://aka.ms/campus.jpg"
                        CacheValidity="10:00:00:00" />
    </Image.Source>
</Image>

同等の C# コードは次のとおりです。

Image image = new Image();
image.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CacheValidity = new TimeSpan(10,0,0,0)
};

この例では、キャッシュ期間は 10 日に設定されています。

ストリームからイメージを読み込む

イメージは、ImageSource.FromStream メソッドを使用してストリームから読み込むことができます。

Image image = new Image
{
    Source = ImageSource.FromStream(() => stream)
};

大事な

ImageSource.FromStream メソッドを使用してストリームからイメージを読み込むときに、Android でイメージ キャッシュが無効になります。 これは、適切なキャッシュ キーを作成するデータがないためです。

フォント アイコンを読み込む

FontImage マークアップ拡張機能を使用すると、ImageSourceを表示できる任意のビューにフォント アイコンを表示できます。 FontImageSource クラスと同じ機能を提供しますが、より簡潔に表現できます。

FontImage マークアップ拡張は、次のプロパティを定義する FontImageExtension クラスでサポートされています。

  • フォント アイコンが属するフォント ファミリである stringタイプの FontFamily。
  • string型の Glyph、フォント アイコンの Unicode 文字値。
  • Color型の Color、フォント アイコンを表示するときに使用する色。
  • double型の Size、レンダリングされたフォント アイコンのサイズ (デバイスに依存しない単位)。 既定値は 30 です。 さらに、このプロパティは名前付きフォント サイズに設定できます。

手記

XAML パーサーを使用すると、FontImageExtension クラスを FontImageと省略できます。

Glyph プロパティは、FontImageExtensionの content プロパティです。 そのため、中かっこで表現された XAML マークアップ式の場合、式の Glyph= 部分が最初の引数である場合は削除できます。

次の XAML の例は、FontImage マークアップ拡張機能を使用する方法を示しています。

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

この例では、FontImageExtension クラス名の省略形を使用して、Ionicons フォント ファミリの XBox アイコンを Imageに表示します。

FontImage マークアップ拡張機能のスクリーンショット。

アイコンの Unicode 文字は \uf30cされていますが、XAML でエスケープする必要があるため、&#xf30c;になります。

FontImageSource オブジェクトでフォント アイコン データを指定してフォント アイコンを表示する方法については、「フォント アイコン表示する」を参照してください。

フォント アイコンは、FontImageSource オブジェクトのフォント アイコン データを指定することで表示できます。 詳細については、「フォント アイコンを表示する」を参照してください。

アニメーション GIF を読み込む

.NET MAUI には、小さいアニメーション GIF の表示がサポートされています。 これは、アニメーション GIF ファイルに Source プロパティを設定することによって実現されます。

<Image Source="demo.gif" />

大事な

.NET MAUI でのアニメーション GIF のサポートにはファイルをダウンロードする機能が含まれていますが、アニメーション GIF のキャッシュやストリーミングはサポートされていません。

既定では、アニメーション GIF が読み込まれると再生されません。 これは、アニメーション GIF が再生中か停止かを制御する IsAnimationPlaying プロパティの既定値が falseであるためです。 したがって、アニメーション GIF が読み込まれると、IsAnimationPlaying プロパティが trueに設定されるまで再生されません。 IsAnimationPlaying プロパティを falseにリセットすることで、再生を停止できます。 GIF 以外の画像ソースを表示する場合、このプロパティは効果がないことに注意してください。

イメージのスケーリングを制御する

Aspect プロパティは、表示領域に合わせてイメージを拡大縮小する方法を決定し、Aspect 列挙体のいずれかのメンバーに設定する必要があります。

  • AspectFit - イメージ全体が表示領域に収まるようにイメージをレターボックス化し、画像が広いか高いかに応じて上部または下部または側面に空白スペースが追加されます。
  • AspectFill - 縦横比を維持しながら表示領域を埋めるように画像をクリップします。
  • Fill - 表示領域を完全かつ正確に塗りつぶすために画像を拡大します。 これにより、イメージが歪む可能性があります。
  • Center - 縦横比を維持しながら、画像を表示領域の中央に表示します。