Xamarin Forms  -  Usando Material Design
 Neste artigo veremos como usar o Material Design no Xamarin Forms.

A Google criou em 2014 uma nova metodologia de design que foi chamada de Material Design.

O Material Design tem como objetivo sintetizar os conceitos clássicos de um bom design com a inovação e possibilidades trazidas com a tecnologia e a ciência.

O Material Design foi introduzido no Xamarin.Forms na versão 3.6 e prescreve o tamanho, a cor, o espaçamento e outros aspectos de como as Views e os layouts devem se parecer e se comportar.

No Android, os renderizadores do Material exigem uma versão mínima de 5.0 (API 21) ou superior e um TargetFramework da versão 9.0 (API 28).

Além disso, o projeto da sua plataforma requer as bibliotecas de suporte do Android 28.0.0 ou superior, e seu tema precisa herdar de um tema de Componentes do material ou continuar a herdar de um tema do AppCompat.

Os renderizadores do Material estão atualmente incluídos nos seguintes controles :

  1. Button
  2. Entry
  3. Frame
  4. ProgressBar
  5. DatePicker
  6. TimePicker
  7. Picker
  8. ActivityIndicator
  9. Editor
  10. Slider
  11. Stepper

Para mais informações sobre Material visite :  http://www.google.com/support

Recursos usados:

Criando o projeto no Visual Studio 2019 Community

Abra o  VS 2019 Community e clique em Create New Project e a seguir escolha:

Clique em Next e informe o nome XF_MaterialDesign;

A seguir clique no botão Create :

A seguir selecione o template Blank e a plataforma Android e clique no botão OK:

Pronto, nosso projeto já esta criado.

Vamos incluir o pacote Xamarin.Forms.Visual.Material em todos os projetos da solução via menu Tools:

Após instalar o pacote temos que fazer os seguintes ajustes nos projetos Android e iOS.

1 - No projeto Android abra o arquivo MainActivity e inclua a linha de código que inicializa o FormsMaterial.Init();

        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);
            LoadApplication(new App());
        }

 

Se estiver usando também a plataforma iOS abra o arquivo AppDelegate e atualize o arquivo :

    public override bool FinishedLaunching(UIApplication app, NSDictionary options)  
     {  
                global::Xamarin.Forms.Forms.Init();  
                global::Xamarin.Forms.FormsMaterial.Init();  
                LoadApplication(new App());  
                return base.FinishedLaunching(app, options);  
     }

Agora por padrão será exibida o visual  normal que estamos já acostumados, para habilitar o visual do material basta usar a tag 'Visual" para quaisquer um dos componentes que suportam o Material.

Assim no arquivo MainPage.xaml inclua o código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_MaterialDesign.MainPage">
    <StackLayout>
        <StackLayout>
            <Label Text="Bem-Vindo ao Material Design!"  />
            <Button Text="Botão normal "/>
            <Button Text="Botão com Material" Visual="Material"/>
        </StackLayout>
    </StackLayout>
</ContentPage>

Veja o resultado abaixo:

Podemos obter o mesmo resultado usando a tag Visual="Default".

Na verdade a propriedade Visual pode ser definida para qualquer tipo que implemente a interface IVisual, com a classe VisualMaker fornecendo as  seguintes propriedades IVisual:

Assim notamos que o Material possui um sistema de herança, onde você pode declarar o Visual em qualquer layout, ContentPage ou até mesmo no nível do aplicativo, e ele se tornará cascata para todos os controles filho.

Em outro artigo veremos um exemplo mais prático de como usar o Material no Xamarin Forms.

"Bem-aventurado o homem que não anda segundo o conselho dos ímpios, nem se detém no caminho dos pecadores, nem se assenta na roda dos escarnecedores.
Antes tem o seu prazer na lei do Senhor, e na sua lei medita de dia e de noite."
Salmos 1:1,2

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti