將影像新增至 .NET MAUI 應用程式專案

影像是應用程式流覽、可用性和商標的重要部分。 不過，每個平臺都有不同的映像需求，通常牽涉到在不同的解析度建立每個映像的多個版本。 因此，每個平臺的單一映像通常必須在不同的解析度上重複多次，產生的影像必須在每個平臺上使用不同的檔名和資料夾慣例。

在 .NET 多平臺應用程式 UI （.NET MAUI） 應用程式專案中，映射可以在應用程式專案中的單一位置指定，並在建置時將其大小調整為目標平臺的正確解析度，並新增至您的應用程式套件。 這可避免每個平台必須手動複製和命名映像。 根據預設，位圖（非向量）影像格式，包括動畫 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 的應用程式資源概觀 。

影像檔名也必須是唯一的，否則會發生建置錯誤。 如需詳細資訊，請參閱 重複的影像檔名錯誤。

在建置階段，映像可以調整為目標平臺和裝置的正確解析度。 產生的影像接著會新增至您的應用程式套件。 如需停用映像封裝的相關信息，請參閱 停用映射封裝。

調整影像大小

裝置有一系列的螢幕大小和密度，而且每個平臺都有顯示密度相依影像的功能。 影像的基底大小代表影像的基準密度，而且實際上是影像的 1.0 縮放比例（您通常會在程式碼中用來指定影像大小的大小），而所有其他密度大小都是衍生自其中的。 如果您未指定位圖影像的基底大小，則不會調整影像大小。 如果您未指定向量影像的基底大小，例如 SVG 檔案，則會使用影像中指定的維度做為基底大小。

下圖說明基底大小如何影響影像：

圖表中顯示的程式會遵循下列步驟：

• 答：影像的維度為 210x260，且基底大小設定為 424x520。
• B：.NET MAUI 會調整映射的大小，以符合 424x520 的基底大小。
• 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" />

色彩值可以在十六進位中指定，或指定為 .NET MAUI 色彩。 例如， Color="Red" 有效。