.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>

注意

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

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

イメージの基本サイズは、属性を BaseSize 8 で割り切れる値に設定することで指定できます。

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

属性の値はイメージの BaseSize ベースライン密度を表し、実質的には、他のすべての密度サイズの派生元となるイメージの 1.0 スケール ファクター (通常、コードで画像サイズを指定するために使用するサイズ) です。 この値は、イメージのサイズが異なる表示密度に正しく変更されるようにするために使用されます。 ビットマップ イメージに a を指定 BaseSize しない場合、イメージのサイズは変更されません。 ベクター画像の値を BaseSize 指定しない場合、SVG で指定された次元は基本サイズと見なされます。 ベクター イメージのサイズ変更を停止するには、属性を 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" 有効です。

ビルド時に、ターゲット プラットフォームとデバイスの正しい解像度にイメージのサイズを変更できます。 その後、結果の画像がアプリ パッケージに追加されます。