O X do Xamarin Forms — Alterando toda interface do seu APP — XF-Material

Image for post
Image for post

Fala galera,

tudo beleza?

Quando a versão do Xamarin.Forms 3.6 foi lançada eu fiz um artigo falando de como utilizar o Material Design (O X do Xamarin Forms — 3.6 Bem Vindo Material Design !).

Com o Material nativo podemos utilizar as interfaces comuns entre as plataformas do Xamarin.Forms com um unico padrão, deixando-as quase iguais!

Hoje o material do Forms tem adaptado os controles :

  • ActivityIndicator, Button,DatePicker, Editor, Entry, FramePicker, ProgressBar, Slider, Stepper e TimePicker.

Alem da possibilidade de criar seu próprio controle com o padrão Material.

Porem caso você queira mais controles, e não queira customizar seu próprio material existe um pacote sensacional com um conjunto de controles que vai alterar completamente a aparência do seu app… O XF-Material-Library !

Então vamos conhecer o mesmo e como utiliza-lo!

Configurando o controle

Image for post
Image for post

Vamos ao nosso querido Nuget instalar o pacote XF.Material em todos os projetos :

Image for post
Image for post

Agora precisamos iniciar o controle em todos os projetos, inclusive no projeto compartilhado :

Existe uma ultima configuração, no iOS você precisa adicionar a chave UIViewControllerBasedStatusBarAppearance no info.plist :

Image for post
Image for post

Pronto, hora de brincar com o Material!

Utilizando o pacote

Não foi exagero quando eu disse que o XF -Material iria alterar toda a aparência do seu app ele é tão customizável, que você pode padronizar as cores do tema, fontes e tudo mais que você quiser !

Antes de mais nada para dar uma tapa a mais no visua eu adicionei mais 3 fontes nos projetos iOS e Android :

Image for post
Image for post
Image for post
Image for post

Caso você não saiba como adicionar e utilizar fontes pode dar uma olhada nesse artigo : O X do Xamarin Forms — Fontes customizadas

No App.Xaml nós podemos criar um ResourceDictionary customizado para utilizar em todo o projeto, basta declarar os Namespaces:

xmlns:mtrl=”clr-namespace:XF.Material.Forms.Resources;assembly=XF.Material.Forms”
xmlns:mtrltypo=”clr-namespace:XF.Material.Forms.Resources.Typography;assembly=XF.Material.Forms”

E seguir o exemplo abaixo :

Sim é bastante coisa, mas é para mostrar que é possível customizar o que você quiser do visual.

Agora só precisamos iniciar essa configuração :

Claro, você não é obrigado a customizar tudo, pode utilizar a configuração padrão. Para isso basta inicializar :

Pronto! Agora é só começar a utilizar os controles :)

O XF.Material é tão incrível que ele nos permite customizar a Navigation e StatusBar das plataformas com pouco esforço.

Para utilizar as propriedades precisamos utilizar a classe MaterialNavigationPage ao invés da NavigationPage que estamos acostumados.

Então vamos inicializar nosso aplicativo da seguinte forma :

Agora em nossa MainPage podemos adicionar algumas propriedades para mudar o Visual da mesma e inclusive da StatusBar :

Basicamente adicionamos os namespaces e é possível customizar as cores, fonte e etc tanto da navigation como da Statusbar :

Image for post
Image for post

Facil em ? ja ficou com outra cara :D

Existem diversas opções para customizar a Appbar você pode conferir todas clicando aqui.

O Material nos permite também adicionar alguns controles incríveis. Por exemplo podemos criar uma cartão definir sua elevação e adicionar um Label dentro :

Image for post
Image for post

O Material nos permite configurar a animação, bordas e cores em praticamente todos os controles. Seja em um botão, slider,um loading e ate um "Chip".

No caso do Entry, podemos utilizar o TextField e customizar ate um texto abaixo do campo para passar alguma informação ao Usuario na hora de preencher :

Image for post
Image for post

O Material também possui radioButtons e checkbox alem de outros controles, é possível conferir todos clicando aqui.

Vou te dizer, este pacote é tão completo que ele ja vem com muitas opções para janelas de Dialogos e Alertas .

No caso desses dois ele utiliza por baixo dos panos, outro plugin o Rg.Plugins.Popup.

Se você não conhece ele ainda eu fiz um artigo sobre :O X do Xamarin Forms — Pop-ups .

Para simplicar o plugin e garantir que no caso do Android o botão voltar não remova as caixas de dialogo, precisamos realizar uma implementação simples na MainActivity.cs sobrescrevendo o evento OnBackPressed():

Pronto ! Agora vamos implementar 3 botões para demonstrar 3 tipos de caixas de Dialogo diferentes :

Em seguida o backend para exibi-las :

Agora é só executar :

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Muito legal não?

Existem diversas customizações de Dialog e você pode ver todas as possibilidades clicando aqui .

XF.Material é um conjunto de controles incrível, vale a pena dar uma olhada na documentação e ver que praticamente tudo q vc precisa de controle esta la ;)

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