O X do Xamarin Forms — Cantos arredondados, bordas, sombras : PancakeView

Image for post
Image for post

Fala galera ,

Tudo beleza?

UI é algo de conhecimento obrigatório para quem quer fazer um bom app…. Ou Então você contrata um bom designer :P

Brincadeiras a parte, criar interfaces bonitas pode dar um bom trabalho, principalmente quando queremos criar interfaces com sombra, bordas arredondadas e etc.

Porem "PARA NOSSA ALEGRIA! (quem vai lembrar desse meme)" existem controles incríveis que facilitam nossa , e um deles sem nenhuma duvida é o "Delicioso" PancakeView !

Image for post
Image for post

O pancake view nos permite configurar bordas, sombras ,cantos arredondados praticamente de qualquer forma que precisarmos.

E mais importante, de uma forma tão simples que creio que daqui para frente você vai acabar usando ele em todos os seus projetos.

Então antes que alguém fique com fome, bora ver como utilizar esse controle incrível!

Configurando o Controle

Image for post
Image for post

Vamos ao nuget baixar o pacote Xamarin.Forms.PancakeView e instalar em todos os projetos :

Image for post
Image for post

Pronto, sem mais configurações :D, agora é só utilizar ;)

Utilizando o Controle

Tão facil como instalar é a utilização do PancakeView. Primeiro devemos declarar o namespace : xmlns:pancake=”clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView” .

Para começar vamos criar um controle bem Simples com um label dentro :

A Propriedade CornerRadius define a borda do nosso PancakeView :

Image for post
Image for post

Ate aqui bem simples. Podemos também arredondar partes do controle apenas, criando bordas diferentes :

Image for post
Image for post

Ficou bem diferente não? O PancakeView nos permite também criar efeitos como os "Degrade" por exemplo.

Para isso basta utilizar as propriedades BackgroundGradient, como no exemplo abaixo :

Image for post
Image for post

Da pra fazer aquele fundo que vemos em diversos controles !

Podemos fazer bordas com efeitos mais grossos ou picotados por exemplo :

Image for post
Image for post

Finalmente, adicionar sombras ou fazer o mesmo efeito de elevação do Material Design :

Image for post
Image for post

Que controle!!!

O PancakeView é realmente incrível para quem quer criar efeitos, melhorar suas interfaces e fazer um design único :)

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!

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