.NET MAUI アプリ プロジェクトに画像を追加

画像は、アプリのナビゲーション、使いやすさ、ブランド化の重要な部分です。 ただし、各プラットフォームには異なる画像要件があり、通常は異なる解像度で各画像の複数のバージョンを作成する必要があります。 そのため、通常、1 つの画像をプラットフォームごとに異なる解像度で何度も複製する必要があります。結果として得られる画像は、プラットフォームごとに異なるファイル名とフォルダー規則を使用する必要があります。

.NET マルチプラットフォーム アプリ UI (.NET MAUI) アプリ プロジェクトでは、画像をアプリ プロジェクト内の 1 つの場所で指定でき、ビルド時にターゲット プラットフォームの適切な解像度にサイズ変更して、アプリ パッケージに追加できます。 これにより、プラットフォームごとに画像を手動で複製して名前を付ける必要がなくなります。 デフォルトでは、アニメーション GIF を含むビットマップ (非ベクター) 画像形式は、.NET MAUI によって自動的にサイズ変更されません。

.NET MAUI 画像では、スケーラブル ベクター グラフィックス (SVG) ファイルなど、標準のプラットフォーム イメージ形式を使用できます。

重要

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

画像をプロジェクトの Resources\Images フォルダーにドラッグして、アプリ プロジェクトに追加できます。そのビルド アクションは、MauiImage に自動的に設定されます。 これにより、プロジェクト ファイルに対応するエントリが作成されます。

<ItemGroup>
    <MauiImage Include="Resources\Images\logo.svg" />
</ItemGroup>

Note

画像は、アプリ プロジェクトの他のフォルダーに追加することもできます。 ただし、このシナリオでは、[プロパティ] ウィンドウでビルド アクションを MauiImage に手動で設定する必要があります。

Android リソースの命名規則に準拠するには、画像ファイル名は小文字で、先頭と末尾が文字で、英数字またはアンダースコアのみを含める必要があります。 詳細については、developer.android.com の「アプリ リソースの概要」をご覧ください。

画像ファイル名も一意である必要があります。そうしないと、ビルド エラーが発生します。 詳細については、「Duplicate image filename errors」をご覧ください。

ビルド時に、ターゲット プラットフォームとデバイスの適切な解像度に画像のサイズを変更できます。 すると、結果として得られた画像がアプリ パッケージに追加されます。 画像のパッケージ化を無効にする方法については、「Disable image packaging」をご覧ください。

イメージサイズの変更

デバイスにはさまざまな画面サイズと密度があり、各プラットフォームには、密度に依存した画像を表示する機能があります。 画像の基本サイズは、画像のベースライン密度を表します。これは、他のすべての密度サイズが導き出される画像の 1.0 スケール係数 (画像サイズを指定するために、通常コードで使用されるサイズ) になります。 ビットマップ画像の基本サイズを指定しない場合、画像のサイズは変更されません。 SVG ファイルなどのベクター画像の基本サイズを指定しない場合、画像で指定されたサイズが基本サイズとして使用されます。

次の図は、基本サイズが画像に与える影響を示しています。

図に示したプロセスは、次の手順に従います。

• A: 画像サイズは 210 x 260 で、基本サイズは 424 x 520 に設定されています。
• B: .NET MAUI は、424 x 520 の基本サイズに合わせて画像をスケーリングします。
• C: 各ターゲット プラットフォームで必要な画像サイズが異なるので、.NET MAUI は、基本サイズから異なるサイズに画像をスケーリングします。

ヒント

可能な場合は SVG 画像を使用します。 SVG 画像は、サイズを拡大しても、鮮明できれいなままです。 PNG 画像や JPG 画像などのビットマップ ベースの画像は、アップスケーリングするとぼやけて見えます。

基本サイズは BaseSize="W,H" 属性で指定します。W は画像の幅、H はの高さです。 次の例では、基本サイズを設定しています。

<MauiImage Include="Resources\Images\logo.jpg" BaseSize="376,678" />

ビルド時に、画像はターゲット プラットフォームの正しい密度にサイズ変更されます。 すると、結果として得られた画像がアプリ パッケージに追加されます。

ベクター画像のサイズ変更を停止するには、Resize 属性を false に設定します。

<MauiImage Include="Resources\Images\logo.svg" Resize="false" />

濃淡と背景色の追加

画像に濃淡を追加すると、ソースに別の色でレンダリングするアイコンや単純な画像がある場合に便利です。画像に濃淡を追加するには、TintColor 属性を次のように設定します。

<MauiImage Include="Resources\Images\logo.svg" TintColor="#66B3FF" />

画像の背景色を指定することもできます。

<MauiImage Include="Resources\Images\logo.svg" Color="#512BD4" />

色の値は、16 進数で指定することも、.NET MAUI 色として指定することもできます。 たとえば、Color="Red" は有効になります。