quarta-feira, 10 de janeiro de 2018

Xamarin Forms – Personalizando seu app com CSS

por  em 10/01/2018 no site Lambda3



Adicionar estilos aos aplicativos Xamarin Forms nem sempre é uma tarefa simples de se fazer e de se manter. Os estilos no XAML requerem que você conheça especificamente a forma como o Xamarin Forms personaliza seus elementos de tela, coisas espeficicas como propriedades e tags. Além de ser algo específico do Xamarin Forms, caso você queira que um designer personalize seu app, o XAML poderia acabar dificultando um pouco o entendimento.  Você pode ler um pouco mais sobre estilos no XAML do Xamarin Forms na documentação.
Acredito que pensando em facilitar a criação e manutenção de estilos nos aplicativos, o Xamarin Forms irá suportar personalização por arquivos CSS, além de manter a forma de personalização com XAML citada acima.
Para ver um pouco mais esta nova feature que será adicionada ao Xamarin Forms, você pode acessar o PR 1207 disponível no GitHub
Nota: Até a data de publicação deste post, esta funcionalidade estava disponível somente na versão nightly build do Xamarin Forms 2.6+

Adicionando a versão 2.6+ nightly ao seu projeto

Para que você consiga adicionar estilos CSS ao seu projeto, você deve ter a versão 2.6+ nightly build do Xamarin Forms instalado no .Net Standart e em todas as plataformas específicas.
Nota: Para este post, utilizei a versão 2.6.0.62474-nightly
Para visualizar as versões nightly você precisará adicionar como fonte de pacotes Nuget o endereço: https://www.myget.org/F/xamarinforms-ci/api/v2
 
Package Manager
Tools > Options > Nuget Package Manager > Package Sources
Versão Xamarin

O que será suportado?

De acordo com o PR 1207, o CSS do Xamarin Forms terá suporte a alguns selectores do CSS, descritos na tabela abaixo:
SelectorExampleDescription
.class.classNameSet the StyleClass property on the element. e.g. className
#id#emailEntryChecks StyleId, or fallbacks to x:Name
**For all elements
elemententrySelects all elements of type entry, but not subclasses.
^base^contentpageAny element with this as a base class, including itself. This is the XF specific selector.
element,elementlabel, entrySelecting multiple elements
element elementcontentview labelAny labels inside a ContentView
element>elementcontentview>labelSelects labels, that are a direct child of a ContentView
element+elementlabel+entryAll entry elements that come directly after a label
element~elementlabel~entryAll entries that have a label before it.
Veja também as propriedades que serão suportadas.
Vale lembrar que apesar de estar utilizando CSS, é importante que você siga estas referências para que tudo funcione como esperado.
PropertyApplies toValues (string literals are grayed, while types are italic)Example
background-colorVisualElementcolor (see Colors) | initialbackground-color: springgreen;
background-imagePagestring | initialbackground-image: bg.png;
border-colorButtonFramecolor (see Colors) | initialborder-color: #9acd32;
border-widthButtondouble | initialborder-width: .5;
colorButtonDatePickerEditorEntryLabelPickerSearchBarTimePickercolor (see Colors) | initialcolor: rgba(255, 0, 0, 0.3);
directionVisualElementltr | rtl | inheritinitialdirection: rtl;
font-familyButtonDatePickerEditorEntryLabelPickerSearchBarTimePickerSpanstring | initialfont-family: Consolas;
font-sizeButtonDatePickerEditorEntryLabelPickerSearchBarTimePickerSpandouble | namedsize (see NamedSize) | initialfont-size: 12;
font-styleButtonDatePickerEditorEntryLabelPickerSearchBarTimePickerSpanbold | italic | initialfont-style: bold;
heightVisualElementdouble | initial`min-height: 250;
marginViewthickness (see Thickness) | initialmargin: 6 12;
margin-leftViewthickness (see Thickness) | initialmargin-left: 3;
margin-topViewthickness (see Thickness) | initialmargin-top: 2;
margin-rightViewthickness (see Thickness) | initialmargin-right: 1;
margin-bottomViewthickness (see Thickness) | initialmargin-bottom: 6;
min-heightVisualElementdouble | initial`min-height: 50;
min-widthVisualElementdouble | initial`min-width: 112;
opacityVisualElementdouble | initialopacity: .3;
paddingLayoutPagethickness (see Thickness) | initialpadding: 6 12 12;
padding-leftLayoutPagedouble | initialpadding-left: 3;
padding-topLayoutPagedouble | initialpadding-top: 4;
padding-rightLayoutPagedouble | initialpadding-right: 2;
padding-bottomLayoutPagedouble | initialpadding-bottom: 6;
text-alignEntryEntryCellLabelSearchBarleft | right | center | start | end | initial. It is recommended to avoid left and right in non-ltr environmentstext-align: right;
visibilityVisualElementtrue | visible | false | hidden | collapseinitialvisibility: hidden;
widthVisualElementdouble | initial`min-width: 320;

Criando o arquivo CSS

Você pode adotar a estrutura de organização de arquivos que for melhor para você e seu time. Neste exemplo vou criar uma pasta Styles no projeto .Net Standart para armazenar meu arquivo .css
Crie um novo arquivo css no seu projeto na pasta Styles, eu adicionei o trexo de código abaixo para personlizar meu botão, meu label e meu stacklayout, mas você pode utilizar qualquer personalização que seja suportada nos seletores e tags citados acima.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.botao {
    background-color: #11313F;
    color: white;
    font-size: 16;
    height: 60;
    border: 0;
}
 
#boasVindas {
    color: red;
    font-size: 25;
}
 
stacklayout {
    background-color: yellow;
    height:100;
    width: 100;
    margin: 10;
}
Para que o arquivo CSS seja reconhecido pelo aplicativo em tempo de execução é necessário setar a propriedade Build Action para Embedded resource.

Referenciando o arquivo CSS

Após criado o arquivo CSS e adicionado os estilos, precisamos referencia-lo na página que queremos que seja aplicado. Neste exemplo irei referenciar na própria MainPage.xaml adicionando o seguinte trecho de código após a decalaração da ContentPage
1
2
3
<ContentPage.Resources>
    <StyleSheet Source="Styles/MainView.css" />
</ContentPage.Resources>
Após referenciado os estilos que possuem seletores como ID e Elemento já serão automaticamente aplicados.
Para chamar sua classe CSS em um elemento específico da tela, você pode utilizar a propriedade StyleClass e preenche-la com o nome da classe criada no arquivo CSS referenciado na página. Como no exemplo abaixo:
1
<Button Text="Entrar" StyleClass="botao" />
MainPage.xaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<xml version="1.0" encoding="utf-8">
<ContentPage xmlns="<a class="vglnk" href="http://xamarin.com/schemas/2014/forms" rel="nofollow"><span>http</span><span>://</span><span>xamarin</span><span>.</span><span>com</span><span>/</span><span>schemas</span><span>/</span><span>2014</span><span>/</span><span>forms</span></a>" xmlns:x="<a class="vglnk" href="http://schemas.microsoft.com/winfx/2009/xaml" rel="nofollow"><span>http</span><span>://</span><span>schemas</span><span>.</span><span>microsoft</span><span>.</span><span>com</span><span>/</span><span>winfx</span><span>/</span><span>2009</span><span>/</span><span>xaml</span></a>" xmlns:local="clr-namespace:XamCSS" x:Class="XamCSS.MainPage">
   
    <ContentPage.Resources>
        <StyleSheet Source="Styles/style.css" />
    </ContentPage.Resources>
 
    <ContentPage.Content>
        <StackLayout>
            <Label Text="SEJA BEM VINDO!" x:Name="boasVindas" />
            <Button Text="Entrar" StyleClass="botao" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
É recomendável que você referencie o seu CSS no XAML da página, mas você também pode referenciar o arquivo CSS através do Code-Behind da adicionando o código abaixo:
1
this.Resources.Add(StyleSheet.FromAssemblyResource(this.GetType().Assembly, "css.id"));
Feito isto, basta rodar o app e verificar se seus elementos foram personalizados de acordo com o arquivo CSS.

Conclusão

O recurso de personalização do CSS ainda está em nightly build e por isso ainda não é recomendado utilizar em produção.
A utilização do CSS trará muitos benefícios para a personalização dos aplicativos, seja para criação do estilo ou para manutenção. É um recurso bastante interessante que está sendo implementado, e de acordo com o PR, não deve sofrer muitas alterações na versão final.  Nem tudo do CSS será suportado, o !important por exemplo não será,  por isso é importante utilizar a tabela citada neste post que foi retirada do PR para criação dos estilos.
A utilização do CSS não elimanará a personalização com XAML como já vem sendo feita, você ficará livre para escolher o que for melhor para você e seu time.

O código completo do exemplo deste post está disponível no meu GitHub
#Ubuntu
Referencias

Nenhum comentário:

Postar um comentário