O X do Xamarin Forms — Magic Gradients

Image for post
Image for post

Fala galera,

tudo beleza?

Layout é uma das partes mais importantes do nosso App. Eu ja demonstrei diversos controles que facilitam a implementação e nos auxiliam a deixar o layout mais bonito e da forma que queremos.

Hoje vamos falar de um controle incrivel chamado MagicGradients

Image for post
Image for post
Magic gradient exemplo

Então bora ver como implementa-lo!

Image for post
Image for post

Vamos ao nosso querido nuget instalar o pacote MagicGradients em nossos projetos :

Image for post
Image for post

Pronto, mais facil que FICAR EM CASA , em ?

Para utilizar o controle basta utilizar o namespace : xmlns:magic=”clr-namespace:MagicGradients;assembly=MagicGradients” , sem seguida com ele vamos criar um controle bem simples :

Eu utilizei para exemplificar as cores azul e verde, definindo primeiro a cor azul em seguida a verde com o offset. É possivel utilizar hexadecimal para as cores tambem.

É possivel modificar o Angle, para determinar de onde o efeito ira aparecer.

Image for post
Image for post

É possivel utilizar uma coleção de gradients para gerar mais cores nos efeitos :

Image for post
Image for post

Magic gradient é tão completo que você pode utilizar ate CSS (com ódio mortal) para configura-lo :

Image for post
Image for post

Isso facilita se você ja possui algum feito no seu CSS e quer aproveitar no APP.

Alem do linear podemos fazer radial :

Image for post
Image for post

E com Repeating:

Image for post
Image for post

Bem legal não?

No proprio repositorio do Controle existe um playground para você brincar e testar os gradients, e você pode acessar clicando aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store