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

Thiago Bertuzzi
Jul 30 · 3 min read

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 !

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

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

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 :

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

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 :

Da pra fazer aquele fundo que vemos em diversos controles !

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

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

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!

Thiago Bertuzzi

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade