O X do Xamarin Forms — Imagens Embutidas (Embedded Images)

Thiago Bertuzzi
2 min readMar 2, 2018

Fala Galera,

A tradução de Embedded me faz lembrar moveis de casa,alimentos e etc... E que fica claro, embutir não é chumbar no código.. fica a dica hahahaha.

Quando trabalhamos com imagens em Xamarin.Forms estamos acostumados a colocar os arquivos nas pastas correspondentes de cada plataforma. No IOS usamos o Asset Catalog e no Android na pasta Resources.

Porem,entretanto,todavia .. Existe uma forma de utilizar imagens diretamente do projeto compartilhado. Isto é chamado de Embedded Images.

Claro, fica a dica:

se você quiser usar as resoluções nativas das plataformas (Retina e High-DP) este método não se aplica a você. Mas em alguns casos ele pode ser muito útil.

Implementando imagens embutidas

Primeiro devemos adicionar nossa image e na propriedade “Build Action” alterar para Embedded resource.

Perfeito!

Agora vou mostrar 3 formas de utilizarmos nosso Resource:

1 — O tradicional ImageSource :

Se você quer utilizar o resource no seu app basta utilizar conforme abaixo :

Basicamente o caminho declarado deve ser namespace.pasta.imagem , utilizando o nome da pasta pai ate chegar a imagem desejada.

ex: se o seu arquivo esta em Resources/Images/Avatar/Polly.jpg,o caminho deveria ser EmbeddedImagesExemplo.Resources.Images.Avatar.Polly.jpg

2 — Utilizando no XAML

A utilização no Xaml é um pouquinho mais complicada. Por padrão imagens não podem ser carregadas no Xaml. Mas com uma simples extensão do xaml, podemos resolver o problema :

Em seguida basta chamar nosso controle no XAML :

A logica do caminho é a mesma da primeira forma.

3 — Binding na ViewModel

O tipo 2 resolve para o Xaml, mas e se eu precisar fazer um binding da ViewModel?

Vamos criar a propriedade ImageSource na viewmodel :

E então no XAML :

Fácil não?

Vamos rodar:

Quem quiser pode baixar o código aqui

Referencia: Images

Quer saber mais sobre Resources no IOS ? Clique aqui

Espero ter ajudado!

Aquele abraço!

Este artigo fica de homenagem ao porquinho da índia Polly (da minha namorada e usado no artigo) que faleceu no dia que eu estava escrevendo.

Polly fica pra sempre no nosso ❤ com seus momentos de felicidades

--

--

Thiago Bertuzzi

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!