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ão em um único repositório.

Se você perdeu algum artigo da série, veja os que já foram publicados:

• Xamarin Rocket – Parte 01: LineBreakMode
• Xamarin Rocket – Parte 02 : alterando o espaço das linhas e colunas do Grid
• Xamarin Rocket – Parte 03 : 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?

Criaremos um simples ImageButton. Isso mesmo, é um controle nativo!

     <StackLayout Padding="0,30,0,0">
        <Label Text="Image Button"
               FontSize="50"
               FontAttributes="Bold"/>

       <ImageButton Source="xamarinRocket.png"
                    Margin="20,0,20,0"
                    BorderWidth="1"
                    BorderColor="Red"
                    HeightRequest="200"
                    WidthRequest="200"/>  
            
        </StackLayout>

E o resultado:

Warning: não esqueça de colocar a imagem nas pastas resources do iOS e Android. Qualquer dúvida é 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. Mas, como?

Vocês conhecem o Button? Sabiam que ele tem imagem também? É pra isso que serve esta série de artigos básicos.

Vamos implementar o seguinte código:

  <StackLayout Padding="0,30,0,0">
        <Label Text="Image Button"
               FontSize="50"
               FontAttributes="Bold"/>
              
            
         <Button Text="Default" BorderWidth="1" BorderColor="Red"  Margin="40,0,40,0" 
                 Image="xamarinRocketMini.png" />

        <Button Text="Left - 10"  BorderWidth="1" BorderColor="Red"  Margin="40,0,40,0"
                ContentLayout="Left, 10"  Image="xamarinRocketMini.png"/>

        <Button Text="Top - 10" BorderWidth="1" BorderColor="Red" Margin="40,0,40,0"
                ContentLayout="Top, 10" Image="xamarinRocketMini.png"/>

        <Button Text="Right - 20" BorderWidth="1" BorderColor="Red" Margin="40,0,40,0"
                ContentLayout="Right, 20" Image="xamarinRocketMini.png"/>

        <Button Text="Bottom - 20" BorderWidth="1" BorderColor="Red" Margin="40,0,40,0"
                ContentLayout="Bottom, 20" Image="xamarinRocketMini.png"/>
            
        </StackLayout>

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

Duas dicas pelo preço de uma, hein? São dicas bem simples, mas que ajudam muito.

Caso queira baixar o código utilizado no exemplo, clique aqui. Se quiser ver outros artigos sobre Xamarin, acesse este link.

Espero ter ajudado.

Aquele abraço!