Aggiungere immagini a un progetto di app MAUI .NET

Le immagini sono una parte fondamentale dello spostamento, dell'usabilità e della personalizzazione delle app. Tuttavia, ogni piattaforma presenta requisiti di immagine diversi che in genere comportano la creazione di più versioni di ogni immagine a risoluzioni diverse. Pertanto, una singola immagine deve essere duplicata più volte per ogni piattaforma, a risoluzioni diverse, con le immagini risultanti che devono usare convenzioni di nome e cartella diverse in ogni piattaforma.

In un progetto di app .NET multipiattaforma (.NET MAUI) le immagini possono essere specificate in un'unica posizione nel progetto dell'app e in fase di compilazione possono essere ridimensionate in base alla risoluzione corretta per la piattaforma di destinazione e aggiunte al pacchetto dell'app. In questo modo si evita di dover duplicare manualmente e denominare le immagini in base alla piattaforma. Per impostazione predefinita, i formati di immagine bitmap (non vettoriali), incluse le GIF animate, non vengono ridimensionati automaticamente da .NET MAUI.

Le immagini MAUI .NET possono usare uno dei formati standard di immagine della piattaforma, inclusi i file SVG (Scalable Vector Graphics).

Importante

.NET MAUI converte i file SVG in file PNG. Pertanto, quando si aggiunge un file SVG al progetto di app MAUI .NET, deve essere fatto riferimento da XAML o C# con estensione png. L'unico riferimento al file SVG deve essere nel file di progetto.

Un'immagine può essere aggiunta al progetto dell'app trascinandola nella cartella Resources\Images del progetto, in cui l'azione di compilazione verrà impostata automaticamente su MauiImage. Verrà creata una voce corrispondente nel file di progetto:

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

Nota

Le immagini possono anche essere aggiunte ad altre cartelle del progetto dell'app. In questo scenario, tuttavia, l'azione di compilazione deve essere impostata manualmente su MauiImage nella finestra Proprietà .

Per rispettare le regole di denominazione delle risorse Android, i nomi file di immagine devono essere minuscoli, iniziare e terminare con un carattere lettera e contenere solo caratteri alfanumerici o caratteri di sottolineatura. Per altre informazioni, vedere Panoramica delle risorse dell'app su developer.android.com.

I nomi file di immagine devono anche essere univoci. In caso contrario, si verificherà un errore di compilazione. Per altre informazioni, vedere Errori di nome file di immagine duplicati.

In fase di compilazione, le immagini possono essere ridimensionate in base alle risoluzioni corrette per la piattaforma e il dispositivo di destinazione. Le immagini risultanti vengono quindi aggiunte al pacchetto dell'app. Per informazioni sulla disabilitazione della creazione di pacchetti di immagini, vedere Disabilitare la creazione di pacchetti di immagini.

Ridimensionare un'immagine

I dispositivi hanno una gamma di dimensioni e densità dello schermo e ogni piattaforma ha funzionalità per la visualizzazione di immagini dipendenti dalla densità. Le dimensioni di base di un'immagine rappresentano la densità di base dell'immagine ed è in effetti il fattore di scala 1,0 per l'immagine (le dimensioni in genere usate nel codice per specificare le dimensioni dell'immagine) da cui derivano tutte le altre dimensioni di densità. Se non si specificano le dimensioni di base per un'immagine bitmap, l'immagine non viene ridimensionata. Se non si specifica una dimensione di base per un'immagine vettoriale, ad esempio un file SVG, le dimensioni specificate nell'immagine vengono usate come dimensioni di base.

Il diagramma seguente illustra come le dimensioni di base influiscono su un'immagine:

Il processo illustrato nel diagramma segue questa procedura:

• R: L'immagine ha dimensioni di 210x260 e la dimensione di base è impostata su 424x520.
• B: .NET MAUI ridimensiona l'immagine in modo che corrisponda alle dimensioni di base di 424x520.
• C: poiché diverse piattaforme di destinazione richiedono dimensioni diverse dell'immagine, .NET MAUI ridimensiona l'immagine dalle dimensioni di base a dimensioni diverse.

Suggerimento

Usare le immagini SVG laddove possibile. Le immagini SVG possono essere di alto livello fino a dimensioni maggiori e sembrano ancora nitide e pulite. Le immagini basate su bitmap, ad esempio un'immagine PNG o JPG, sembrano sfocate quando sono di alto livello.

La dimensione di base viene specificata con l'attributo BaseSize="W,H" , dove W è la larghezza dell'immagine e H corrisponde all'altezza dell'immagine. Nell'esempio seguente vengono impostate le dimensioni di base:

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

In fase di compilazione, l'immagine verrà ridimensionata in base alle densità corrette per la piattaforma di destinazione. Le immagini risultanti vengono quindi aggiunte al pacchetto dell'app.

Per arrestare il ridimensionamento delle immagini vettoriali, impostare l'attributo Resize su false:

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

Aggiungere tinta e colore di sfondo

Per aggiungere una tinta alle immagini, utile quando si hanno icone o immagini semplici che si desidera eseguire il rendering in un colore diverso per l'origine, impostare l'attributo TintColor :

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

È anche possibile specificare un colore di sfondo per un'immagine:

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

I valori di colore possono essere specificati in formato esadecimale o come colore MAUI .NET. Ad esempio, Color="Red" è valido.