O X do Xamarin Forms — Resources e Styles

Fala galera,

Faça uma festa na sua casa, compre bebida, carne boa e faça o possível e o impossível para ela ser ótima! Resultado : sempre tem gente que sai reclamando. Parabéns, você entendeu o conceito de cores e fontes em uma interface.

Calma que eu explico. Não importa o quanto você se esforce para combinar cores e interface, sempre alguém não vai gostar. Mas que tal se o usuário decidir como fica a interface do seu APP? O Visual studio mesmo, nos deixa escolher entre os temas preto (O MELHOR TEMA) e branco, alem de diversas customizações.

Pera aeeeeeeeeee. Isso é possível com Xamarin.Forms?

O Xamarin.Forms permite que você utilize resources e styles para criar interfaces de usuário mais bonitas e personalizáveis ​​para iOS, Android e Windows.

Existe muita explicação/Documentação sobre resources/styles com Xamarin.forms. Então tentarei ser breve e pratico :D

Se quer ver o conteúdo completo sobre resources e styles, pode consultar a documentação da microsoft clicando aqui e aqui.

Resources

Os Resources permitem que você compartilhe definições comuns em um aplicativo para ajudar a reduzir o retrabalho e muita codificação, o que facilita na manutenção do seu aplicativo. Em vez de alterar todos os valores em seu aplicativo quando um tema é alterado, você só precisa alterar um deles: o Resource.

Basicamente imagine que queremos utilizar cores diferentes nos controles do nosso aplicativo :

Viram? Tive que repetir diversas vezes a cor de fundo e a cor do texto. Isto porque é uma View de exemplo. Agora imagine fazer isso para o aplicativo inteiro,não tem chines que aguente né?.

Este é um caso em que o resource salva nossa pele. Resources são “configurados” em um ResourceDictionary basicamente utilizando “key-value”.. o famoso chave-valor :D

Resources são aplicados de acordo com o escopo :

  • No controle: só pode ser aplicado para o controle e seus filhos.
  • Na pagina : só pode ser aplicado à página e a seus filhos.
  • No aplicativo: pode ser aplicado em todo o aplicativo.

Então para simplificar, vamos pegar o caso acima e aplicar ele no ResourceDictionary de nossa aplicação.

Basicamente ficaria assim :

Só isso? Não, agora você precisa aplicar o Resource no Xaml e para isso existem duas formas Static Resources e Dynamic Resources

Os “recursos estáticos” nos permitem referenciar nossos resources pré configurados mas tem uma limitação : São configurados apenas na instancia do controle e não podem ser alterados em tempo de execução.

Para utilizar o Static Resource basta colocar o valor da propriedade como “{StaticResource Resource_Name}” :

Static Resources resolvem nosso problema de duplicidade, mas nos queremos mais.. queremos muito mais! Queremos poder alterar a cor do nosso Aplicativo em tempo de execução. Isso é possível graças aos “Recursos Dinamicos”

Para utilizar o Dynamic Resource basta colocar o valor da propriedade como “{ DynamicResource Resource_Name}” :

Em seguida podemos alterar os Resources via código :

Isto nos permite ficar alterando os valores em tempo de execução!

Certo agora que sabemos o que são Resources, e antes de criarmos nosso aplicativo para todos os gostos, vamos entender um pouco de styles.

Styles

Mesmo utilizando os Resources para reduzir meu trabalho eu ainda preciso ficar definindo a utilização do mesmo controle,por controle. Para facilitar isso existem os Styles.

Styles é uma coleção “key-value” chamados Setters. Os setters nos permitem configurar valores visando um controle. Por exemplo eu posso configurar um style pra todos os controles do tipo Label do meu Aplicativo.

Lembram das regras de escopo dos Resources? Elas também se aplicam aos styles, ou seja ao configurar um style no App.xaml ele é replicado para todo o aplicativo,graças ao TargetType:

Claro que se você quiser sobrescrever o style, pode colocar o valor do mesmo diretamente no controle :

O sytle adicionado vai automagicamente sobrescrever o definido. (CSS mandou um abraço ;) )

Criando nosso Aplicativo Dinamico

Ate aqui tudo bem! agora vamos criar um aplicativo que fica mudando de cor.

Vamos criar nosso Resource dictionary com styles :

Em seguida vamos criar uma interface bem simples com dois campos pro usuário escolher a cor:

Note que eu apliquei o style na contentPage e no button. o Label vai pegar por padrão o do controle,devido ao TargetType.

Vamos agora implementar o click do botão:

Agora vamos brincar , escrevendo qualquer cor para o texto ou o fundo em hexadecimal :

Quero mudar para cinza e branco :

Tudo isso em tempo de execução!

Resources e styles são fantásticos sugiro consultar a documentação completa dos dois. Mas acredito que deu para ter uma ideia do poder deles não é?

Quem quiser pode baixar o fonte de exemplo clicando aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

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