Xamarin Rocket #4 — Imagens em botões

Fala galera,

Tentando manter a periodicidade semanal chegamos novamente com uma dica rápida de Xamarin.Forms!

A ideia é ser um artigo bem rápido e todas as dicas vão ficar em um único repositório, se você perdeu algum veja as que ja saíram :

· Xamarin Rocket #1 — LineBreakMode

· Xamarin Rocket #2 — Alterando o espaço das linhas e colunas do Grid

· Xamarin Rocket #3 — Tela Cheia, ocultando a barra de status


ImageButtons são muito utilizados na Web. Com eles colocamos alguma imagem para simbolizar uma ação para o usuário.

Muitas vezes utilizamos controles de terceiros com diversas outras funcionalidades, para apenas colocar imagens em nossos botões. Mas você sabia que o Xamarin.Forms tem isso nativo?

Vamos criar um simples ImageButton, isso mesmo é um controle nativo :

E o resultado :

Warning: não esqueça de colocar a imagem nas pastas resources do iOS e Android. Qualquer duvida é só olhar o código de exemplo

Beleza! Mas só isso? Claro que não, eu sei o que vocês querem fazer, querem colocar texto também :D

Como faz ?

Vocês conhecem o Button? O que , não sabia que ele tem imagem tambem ? É pra isso que serve essa serie de artigos básicos ;)

Vamos implementar o seguinte código :

Calma que eu explico. Basicamente utilizamos a propriedade Image para definir a imagem que sera exibida. Em seguida temos o ContentLayout, que determina onde ela sera exibida e seu espaçamento :

Duas dicas pelo preço de uma em?

É uma dica bem simples mas que ajuda muito :D

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!