CSS em aplicativo Xamarin.Forms

CSS em Xamarin.Forms

Publicado 21/01 

  • Forms agora suporta o style CSS, além dos estilos existentes, da versão 2.6.0. Isso permite que você use CSS como você faria na Web, em um aplicativo Xamarin.Forms.

Nota: A partir do momento em que escrevo isto, estou usando código do branch master, que ainda nem atingiu a build noturna. Considerando que a compilação noturna está em 2.6.0, estou especulando que esse recurso será lançado na versão 2.6.0

Criar folha de estilos

  1. Crie um arquivo vazio style.css em seu projeto de biblioteca de classes e defina a ação de construção como um EmbeddedResource.
  2. No seu ContentPage, adicione a folha de style.

Em seu style.css, é apenas um arquivo css regular. por exemplo

 

Seletores

O CSS usa seletores para determinar quais elementos serão segmentados. A maioria é igual ao CSS normal, uma exceção. Esses seletores certamente permitem mais flexibilidade no estilo.

Outros seletores aos quais você pode estar acostumado no CSS ainda não estão disponíveis. Você também pode combinar seletores se quiser. Uma pequena nota que ! Importante não é suportada, portanto, garantir a correta ordenação de estilos é essencial. Os estilos são aplicados em ordem, portanto, o último definido ganha.

Suporte à Propriedade

Isto foi retirado do PR 1207 para legibilidade.

Property Applies to Examples
background-color VisualElement background-color:blue;
background-image Page background-image:image.png
border-color Button, Frame border-color:#7aff67; (see colors)
border-width Button border-width:1;
color Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker color:#447799; (see colors)
direction VisualElement direction:rtl;
font-family Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span font-family:’Open Sans’;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span font-size:12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span font-style:bold;
height VisualElement height:100;
margin
margin-left
margin-right
margin-top
margin-bottom
View margin:3; (see thickness section below)
min-height VisualElement min-height:100;
min-width VisualElement min-width:100;
opacity VisualElement opacity:0.5;
padding
padding-left
padding-right
padding-top
padding-bottom
Layout, Page padding:0; (see thickness section below)
text-align Entry, EntryCell, Label, SearchBar text-align:right;
visibility VisualElement visibility:hidden;
width VisualElement min-width:100;

⠀⠀

Espessura

Isso é semelhante ao XF:

  1. Um valor único, que é uma espessura uniforme (por exemplo, 2)
  2. 2 valores, indicando vertical, horizontal (por exemplo, 2, 4)
  3. 3 valores, indicando superior, horizontal (esquerda e direita), espessura inferior (por exemplo, 3, 4, 5)
  4. 4 valores delimitados por vírgulas. No entanto, os 4 valores estão em uma sequência diferente. superior, direita, inferior, esquerda. (por exemplo, 2, 3, 4, 2) – TRBL em vez de LTRB⠀

Cores

As cores são semelhantes ao que você está acostumado. Você pode usar:

  1. Hex (# 78f6a7)
  2. X11nomes
  3. RGB
  4. RGBA
  5. HSL
  6. HSLA

CDATA

Se você quiser ter o seu CSS na sua página, sem criar um novo arquivo, você pode usar o CDATA.

Carregar Style no Code Behind

As APIs foram expostas para permitir que você carregue uma folha de estilo do código por trás, no entanto, eu recomendo que você use XAML.

De um EmbeddedResource

 

De um TextReader

 

 

Saiba mais…

Em uma nota pessoal, eu fui contra essa adição, e ainda sou, e teria preferido que a Xamarin investisse o esforço em melhorar o atual sistema de styling.

No entanto, o CSS tem seus benefícios, principalmente com o tema, a flexibilidade do seletor e a redução do detalhamento sobre o XAML. Com isso, Theming é provavelmente o potencial mais promissor desta adição Xamarin.Forms, somente o futuro dirá se a comunidade irá pegar e executar com ele.  Provavelmente ajudará os desenvolvedores que vêm de um plano de fundo da web para dispositivos móveis, mas se você estiver em um projeto no futuro, eu recomendaria escolher Estilos ou CSS e não misturar os dois.

No que diz respeito aos visualizadores visuais, é provável que eles também sejam capazes de suportar essa mudança, sem mudanças no final, mas tudo depende de como eles implementarão o pré-visualizador, mas provavelmente haverá problemas iniciais.

Fonte: xamarinhelp.com

  • Por: Adam Pedley
  • Tradução Adriano D’lucca

 

RelatedPost

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *