Adicionar imagens a um projeto de aplicativo .NET MAUI

As imagens são uma parte crucial da navegação, usabilidade e identidade visual do aplicativo. No entanto, cada plataforma tem requisitos de imagem diferentes que normalmente envolvem a criação de várias versões de cada imagem em resoluções diferentes. Portanto, uma única imagem normalmente tem que ser duplicada várias vezes por plataforma, em resoluções diferentes, com as imagens resultantes tendo que usar diferentes convenções de nome de arquivo e pasta em cada plataforma.

Em um projeto de aplicativo .NET Multi-platform App UI (.NET MAUI), as imagens podem ser especificadas em um único local no projeto de aplicativo e, em tempo de compilação, podem ser redimensionadas para a resolução correta para a plataforma de destino e adicionadas ao pacote do aplicativo. Isso evita ter que duplicar manualmente e nomear imagens por plataforma. Por padrão, os formatos de imagem bitmap (não vetoriais), incluindo GIFs animados, não são redimensionados automaticamente pelo .NET MAUI.

As imagens do .NET MAUI podem usar qualquer um dos formatos de imagem de plataforma padrão, incluindo arquivos SVG (Scalable Vector Graphics).

Importante

O .NET MAUI converte arquivos SVG em arquivos PNG. Portanto, ao adicionar um arquivo SVG ao seu projeto de aplicativo .NET MAUI, ele deve ser referenciado de XAML ou C# com uma extensão .png. A única referência ao arquivo SVG deve estar no arquivo de projeto.

Uma imagem pode ser adicionada ao seu projeto de aplicativo arrastando-a para a pasta Resources\Images do projeto, onde sua ação de compilação será definida automaticamente como MauiImage. Isso cria uma entrada correspondente no arquivo de projeto:

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

Observação

As imagens também podem ser adicionadas a outras pastas do seu projeto de aplicativo. No entanto, nesse cenário, sua ação de compilação deve ser definida manualmente como MauiImage na janela Propriedades .

Para estar em conformidade com as regras de nomenclatura de recursos do Android, os nomes de arquivos de imagem devem ser minúsculos, começar e terminar com um caractere de letra e conter apenas caracteres alfanuméricos ou sublinhados. Para obter mais informações, consulte Visão geral dos recursos do aplicativo no developer.android.com.

Os nomes de arquivos de imagem também devem ser exclusivos, caso contrário, ocorrerá um erro de compilação. Para obter mais informações, consulte Erros de nome de arquivo de imagem duplicados.

Em tempo de compilação, as imagens podem ser redimensionadas para as resoluções corretas para a plataforma e o dispositivo de destino. As imagens resultantes são adicionadas ao pacote do aplicativo. Para obter informações sobre como desabilitar o empacotamento de imagem, consulte Desabilitar o empacotamento de imagem.

Redimensionar uma imagem

Os dispositivos têm uma variedade de tamanhos e densidades de tela e cada plataforma tem funcionalidade para exibir imagens dependentes da densidade. O tamanho base de uma imagem representa a densidade de linha de base da imagem e é efetivamente o fator de escala 1.0 para a imagem (o tamanho que você normalmente usaria em seu código para especificar o tamanho da imagem) do qual todos os outros tamanhos de densidade são derivados. Se você não especificar o tamanho base de uma imagem bitmap, a imagem não será redimensionada. Se você não especificar um tamanho base para uma imagem vetorial, como um arquivo SVG, as dimensões especificadas na imagem serão usadas como o tamanho base.

O diagrama a seguir ilustra como o tamanho base afeta uma imagem:

O processo mostrado no diagrama segue estas etapas:

• R: A imagem tem dimensões de 210x260 e o tamanho base é definido como 424x520.
• B: O .NET MAUI dimensiona a imagem para corresponder ao tamanho base de 424x520.
• C: Como diferentes plataformas de destino exigem tamanhos diferentes da imagem, o .NET MAUI dimensiona a imagem do tamanho base para tamanhos diferentes.

Dica

Use imagens SVG sempre que possível. As imagens SVG podem aumentar para tamanhos maiores e ainda parecer nítidas e limpas. Imagens baseadas em bitmap, como uma imagem PNG ou JPG, parecem borradas quando ampliadas.

O tamanho base é especificado com o atributo BaseSize="W,H" , onde W é a largura da imagem e H é a altura da imagem. O exemplo a seguir define o tamanho base:

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

Em tempo de compilação, a imagem será redimensionada para as densidades corretas para a plataforma de destino. As imagens resultantes são adicionadas ao pacote do aplicativo.

Para impedir que as imagens vetoriais sejam redimensionadas, defina o Resize atributo como false:

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

Adicionar tonalidade e cor de fundo

Para adicionar uma tonalidade às imagens, que é útil quando você tem ícones ou imagens simples que deseja renderizar em uma cor diferente da origem, defina o TintColor atributo:

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

Uma cor de plano de fundo para uma imagem também pode ser especificada:

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

Os valores de cor podem ser especificados em hexadecimal ou como uma cor MAUI do .NET. Por exemplo, Color="Red" é válido.