Recursos Usados

• Visual Studio 2017 Community
• Xamarin

Criando o projeto no VS 2017

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_DemoCSS:

A seguir selecione a Plataforma, eu marquei somente Android, e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto nosso projeto já esta criado. ( Atualmente(08/2018) a versão mais atual estável é a 3.1.0)

Definindo uma página de Login simples

Vamos definir na página MainPage.xaml , que é a nossa página principal o leiaute da página de Login sem usar estilos.

Para isso vamos usar os elementos básicos presentes em uma página de Login: Label, Button, Entry.

Abra o arquivo MainPage.xaml e inclua o código abaixo:

Abaixo veja o resultado exibido no emulador Android:

Nada animador não é mesmo !!!!

Então bora aplicar uns estilos e mudar a cara desse leiaute...

Criando e aplicando estilos CSS

Vamos criar uma nova pasta no projeto .NET Standard chamada Estilos e nesta pasta incluir um arquivo CSS com o nome Login.css.

A seguir vamos definir os estilos que iremos aplicar à página de Login.

Se você já esta familiarizado com CSS, o código usado no Xamarin Forms é bem parecido. Existem algumas diferenças e uma delas é a adição da sintaxe para permitir acesssar tipos de objetos no Xamarin Forms usando o ^(acento circunflexo):

Assim, no código CSS acima temos que qualquer página herdada de ContentPage vai obter a cor de fundo definida para preenchimento.

Continuando vamos agora aplicar um estilo nas view Label :

E como fazemos para aplicar esses estilos à nossa página de Login definida em MainPage.xaml.

Para isso basta incluir a diretiva abaixo que vai aplicar os estilos definidos no arquivo Login.css na pasta Estilos :

Veja o resultado obtido até agora:

Ficou um pouco melhor... mas vamos continuar...

Vamos agora aplicar um recurso que é usado nas folhas de estilos que é a capacidade de atribuir identificadores a elementos e direcioná-los diretamente aos seus estilos.

Vamos então atribuir o identificador ao contâiner ao redor do formulário definindo um StyleId ao StackLayout do formulário:

<StackLayout StyleId="LoginForm">

E agora definir o estilo que se aplica a esse contâiner usando o símbolo (#) :

Veja o resultado abaixo:

Perceba que temos uma separação entre o fundo aplicado na página e a cor aplicada à área dos elementos do formulário.

Vamos agora definir um estilo base para todas as views Entry e Button da página definindo os estilos a seguir:

Agora todos os elementos Entry serão maiores com uma pequena margem superior e os botões terão uma cor diferente e uma pequena margem superior própria.

Vamos agora aplicar um novo estilo para um botão específico usando um recurso também usado na CSS. Vamos adicionar um atributo StyleClass ao botão de login:

 <Button Text="Login" StyleClass="primary"/>

A seguir vamos definir um estilo que vai se aplicar a esse Button:

Agora teremos o seguinte resultado final:

Não é a oitava maravilha, mas é um pouco melhor que o leiaute inicial (eu acho...).

O código completo do arquivo Login.css é visto abaixo:

Pegue o código do projeto .NET Standard aqui :  XF_DemoCSS.zip (sem as referências)

Até o próximo artigo.

"Com o ouvir dos meus ouvidos ouvi, mas agora te vêem os meus olhos.
Por isso me abomino e me arrependo no pó e na cinza. "
Jó 42:5,6