O X do Xamarin Forms — Carregando controles de uma forma mais bonita

Thiago Bertuzzi
Feb 5 · 4 min read

Fala galera,

Tudo beleza?

Falando em beleza esse é um ponto que queremos que nosso app tenha ( Ou sera que não? ). Deixar uma interface agradavel pode ser uma tarefa complicada, porque alem da propria interface podemos deixar ate os carregamentos mais agradaveis.

Como assim? Assim :

Sim, é exatamente isso que vamos aprender a utilizar e quem vai nos ajudar é o incrivel Controle Xamarin.Forms.Skeleton. Então bora?

Antes de tudo vamos configurar um pacote de Mocks

Para facilitar a vida eu vou usar um pacote que fiz para meus exemplos, você inclusive pode utilizar ele caso queira fazer Apps de teste. Eu não recomendo utilizar em produção, pois ele é fixo para Mocks.

Vamos ao Nuget instalar o pacote Bertuzzi.Xamarin.Forms.Mocks e instalar no projeto principal , ele nos dara uma BaseViewModel, BasePage e uma Api da PokeApi com um service implementado, assim facilita nosso App de Exemplo :

Para ver a documentação de utilização do mesmo, basta clicar aqui.

Configurando o Controle

Muito bem agora que temos o Mock configurado vamos configurar o Sekeleton. Vamos ao querido Nuget baixar o pacote Xamarin.Forms.Skeleton e instalar em todos os projetos :

Simples assim !

Utilizando o Controle

Vamos criar uma ViewModel e uma View que graças a nosso Mock ficou facil termos dados de testes :

Certo mas e o controle do Sekeleton?

Então é ai que entra a "magica" desse incrivel controle. O Skeleton se integra nos seus controles existentes , so precisamos declarar o Namespace : xmlns:extension=”clr-namespace:Xamarin.Forms.Skeleton;assembly=Xamarin.Forms.Skeleton” em nossa View e podemos usar suas propriedades em nosso ListView , como no exemplo abaixo :

Para ficar mais legal o efeito eu adicionei um Frame na Listview. Notem que nos controles temos as propriedades Skeleton.IsBusy e Skeleton.BackgroundColor , elas determinam se o controle vai exibir o carregamento e a cor que ele deve exibir.

Existe tambem a propriedade Skeleton.Hide=”True” que determina se vai aparecer o efeito de carregamento ou não.

Por fim o extension:Skeleton.Animation que define o tipo de animação e o extension:Skeleton.IsParent que determina o controle pai que vai controlar as animações.

Existem outras propriedades e você pode verificar elas na documentação clicando aqui.

Agora vamos mudar nossa model, a partir da que temos no mock vamos inserir uma nova propriedade chamada Ocupado:

Ela vai nos ajudar para auxliar se o conteudo da ListView esta carregando ou não.

Agora vamos modificar toda nosso ViewModel :

Notem que eu adicionei alguns dados "Falsos" para ja preenche o ListView dando a ideia de que os dados estão sendo carregados.

Para poder ver melhor o efeito eu adicionei um Task.Delay , simulando que a consulta esta demorando um pouco para carregar.

Tanto a Propriedade Ocupado da ViewModel como do meu PokemonModel, serão responsaveis por informar o controle se ele esta carregando ou não.

Em seguida eu preencho com os dados originais e altero o valor da propriedade.

Warning: Eu criei um helper ObjectConverter para facilitar a conversão do retorno da Api para meu objeto PokemonModel. Pode ser uma mão na roda em algumas situações

Agora vamos rodar :

Bem legal não?

Voce pode utilizar o Sekeleton fora do ListView tambem para carregar os controles da sua tela por exemplo.

Existem mais 2 exemplos no repositorio oficial do controle e você pode conferir clicando aqui.

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Thiago Bertuzzi

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

More From Medium

Related reads

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade