Imagem

A interface de aplicação multiplataforma .NET (.NET MAUI) Image exibe uma imagem que pode ser carregada a partir de um ficheiro local, um URI ou um fluxo. São suportados os formatos padrão de imagem da plataforma, incluindo GIFs animados, e também são suportados ficheiros locais de Gráficos Vetoriais Escaláveis (SVG). Para mais informações sobre como adicionar imagens a um projeto de aplicação .NET MAUI, consulte Adicionar imagens a um projeto de aplicação .NET MAUI.

Image define as seguintes propriedades:

• Aspect, do tipo Aspect, define o modo de escala da imagem.
• IsAnimationPlaying, do tipo bool, determina se um GIF animado está a reproduzir ou parado. O valor padrão dessa propriedade é false.
• IsLoading, do tipo bool, indica o estado de carregamento da imagem. O valor padrão dessa propriedade é false.
• IsOpaque, do tipo bool, indica se o motor de renderização pode tratar a imagem como opaca durante a sua renderização. O valor padrão dessa propriedade é false.
• Source, do tipo ImageSource, especifica a origem da imagem.

Estas propriedades são suportadas por BindableProperty objetos, o que significa que podem ser estilizadas e ser alvo de ligações de dados.

A ImageSource classe define os seguintes métodos que podem ser usados para carregar uma imagem de diferentes fontes:

• FromFile retorna um FileImageSource que lê uma imagem de um arquivo local.
• FromUri retorna um UriImageSource que descarrega e lê uma imagem de um URI especificado.
• FromStream retorna a StreamImageSource que lê uma imagem de um fluxo que fornece dados de imagem.

Em XAML, as imagens podem ser carregadas a partir de ficheiros e URIs especificando o nome do ficheiro ou URI como um valor de cadeia para a Source propriedade. As imagens também podem ser carregadas a partir de fluxos em XAML através de extensões de marcação personalizadas.

Para informações sobre como adicionar ícones de aplicação e um ecrã inicial à sua aplicação, consulte Ícones de Aplicação e Ecrã de Inicio.

Carregar uma imagem local

As imagens podem ser adicionadas ao seu projeto de aplicação arrastando-as para a pasta Resources\Images do seu projeto, onde a ação de construção será automaticamente definida como MauiImage. No momento da compilação, as imagens vetoriais são redimensionadas para as resoluções corretas da plataforma e dispositivo alvo, e adicionadas ao pacote da sua aplicação. Isto é necessário porque diferentes plataformas suportam diferentes resoluções de imagem, e o sistema operativo escolhe a resolução de imagem adequada em tempo de execução com base nas capacidades do dispositivo.

Para cumprir as regras de nomenclatura de recursos do Android, todos os nomes locais de ficheiros de imagem devem ser minúsculos, começar e terminar com uma letra e conter apenas caracteres alfanuméricos ou sublinhados. Para mais informações, consulte a visão geral dos recursos da aplicação sobre developer.android.com.

Seguir estas regras para nomeação e colocação de ficheiros permite que o seguinte XAML carregue e mostre uma imagem:

<Image Source="dotnet_bot.png" />

O código C# equivalente é:

Image image = new Image
{
    Source = ImageSource.FromFile("dotnet_bot.png")
};

O ImageSource.FromFile método requer um string argumento e devolve um novo FileImageSource objeto que lê a imagem do ficheiro. Existe também um operador de conversão implícito que permite que o nome do ficheiro seja especificado como argumento string para a Image.Source propriedade:

Image image = new Image { Source = "dotnet_bot.png" };

Carregar uma imagem remota

Imagens remotas podem ser descarregadas e exibidas especificando um URI como valor da Source propriedade:

<Image Source="https://aka.ms/campus.jpg" />

O código C# equivalente é:

Image image = new Image
{
    Source = ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"))
};

O ImageSource.FromUri método requer um Uri argumento, e devolve um novo UriImageSource objeto que lê a imagem do Uri. Existe também uma conversão implícita para URIs baseados em strings:

Image image = new Image { Source = "https://aka.ms/campus.jpg" };

Cache de imagens

O armazenamento em cache das imagens descarregadas está ativado por defeito, com as imagens em cache armazenadas durante 1 dia. Este comportamento pode ser alterado definindo propriedades da UriImageSource classe.

A classe UriImageSource define as seguintes propriedades:

• Uri, do tipo Uri, representa o URI da imagem a ser descarregada para exibição.
• CacheValidity, do tipo TimeSpan, especifica quanto tempo a imagem será armazenada localmente. O valor padrão desta propriedade é 1 dia.
• CachingEnabled, do tipo bool, define se a cache de imagem está ativada. O valor padrão dessa propriedade é true.

Estas propriedades são suportadas por BindableProperty objetos, o que significa que podem ser estilizadas e ser alvo de ligações de dados.

Para definir um período de cache específico, defina a Source propriedade para um UriImageSource objeto que define a sua CacheValidity propriedade:

<Image>
    <Image.Source>
        <UriImageSource Uri="https://aka.ms/campus.jpg"
                        CacheValidity="10:00:00:00" />
    </Image.Source>
</Image>

O código C# equivalente é:

Image image = new Image();
image.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CacheValidity = new TimeSpan(10,0,0,0)
};

Neste exemplo, o período de cache é definido para 10 dias.

Carregar uma imagem a partir de um stream

As imagens podem ser carregadas a partir de fluxos com o ImageSource.FromStream método:

Image image = new Image
{
    Source = ImageSource.FromStream(() => stream)
};

Carregar um ícone de fonte

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

Carregar GIFs animados

O .NET MAUI inclui suporte para exibir pequenos GIFs animados. Isto é conseguido definindo a Source propriedade para um ficheiro GIF animado:

<Image Source="demo.gif" />

Por defeito, quando um GIF animado é carregado, não será reproduzido. Isto porque a IsAnimationPlaying propriedade, que controla se um GIF animado está a reproduzir ou parado, tem um valor padrão de false. Portanto, quando um GIF animado é carregado, não será reproduzido até que a IsAnimationPlaying propriedade seja definida para true. A reprodução pode ser interrompida reiniciando a IsAnimationPlaying propriedade para false. Note que esta propriedade não tem efeito ao mostrar uma fonte de imagem que não seja GIF.

Controla a escala da imagem

A Aspect propriedade determina como a imagem será dimensionada para se ajustar à área de visualização, e deve ser definida para um dos membros da Aspect enumeração:

• AspectFit - adiciona barras à imagem (se necessário) para que toda a imagem caiba na área de visualização, com espaço em branco adicionado nas partes superior ou inferior, ou nas laterais, dependendo se a imagem é larga ou alta.
• AspectFill - recorta a imagem de modo a preencher a área de ecrã, preservando a proporção de aspeto.
• Fill - estica a imagem para preencher completamente e exatamente a área de visualização. Isto pode resultar na distorção da imagem.
• Center - centraliza a imagem na área de ecrã, mantendo a proporção de aspeto.