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 precisa ser duplicada várias vezes por plataforma, em diferentes resoluções, com as imagens resultantes tendo que usar diferentes convenções de nome de arquivo e pasta em cada plataforma.

Em um projeto de aplicativo de interface de usuário multiplataforma .NET (.NET MAUI), as imagens podem ser especificadas em um único local no projeto do seu aplicativo e, no momento da compilação, podem ser redimensionadas para a resolução correta da plataforma de destino e adicionadas ao pacote do seu aplicativo. Isso evita a necessidade de duplicar e nomear manualmente as imagens de acordo com a 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 padrão da plataforma, incluindo arquivos SVG (Elementos Gráficos Vetoriais Escaláveis).

Importante

O .NET MAUI converte arquivos SVG em arquivos PNG. Portanto, ao adicionar um arquivo SVG ao seu projeto de aplicativo do .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 Recursos\Imagens do projeto, em que sua ação de compilação será automaticamente definida 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. Entretanto, nesse cenário, sua ação de compilação deve ser definida manualmente como MauiImage na janela Propriedades.

Para cumprir as regras de nomenclatura de recursos do Android, os nomes de arquivos de imagem devem estar em letras minúsculas, começar e terminar com um caractere de letra e conter apenas caracteres alfanuméricos ou sublinhados. Para obter mais informações, consulte a Visão geral dos recursos do aplicativo em 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, confira Erros de nome de arquivo de imagem duplicada.

No momento da 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 então adicionadas ao pacote do aplicativo. Para obter informações sobre como desabilitar o empacotamento de imagens, consulte Desabilitar o empacotamento de imagens.

Para obter informações sobre a exibição de imagens, consulte Imagem.

Redimensionar uma imagem

Os dispositivos têm um intervalo de tamanhos de tela e densidades e cada plataforma tem funcionalidade para exibir imagens dependentes de densidade. O tamanho base de uma imagem representa a densidade da 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 de vetor, 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 a escala para tamanhos maiores e ainda ficam nítidas e limpas. Imagens baseadas em bitmap, como uma imagem PNG ou JPG, ficam desfocadas quando ampliadas.

O tamanho base é especificado com o atributo BaseSize="W,H", em que 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" />

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

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

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

Adicionar tonalidade e cor da tela de fundo

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

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

Uma cor 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 do .NET MAUI. Por exemplo, Color="Red" é válido.