O X do Xamarin Forms — Puxe para atualizar a tela (PullToRefreshLayout)

Fala Galera,

Tudo beleza?

Atualizar um Listview "puxando para baixo" é uma tarefa simples com Xamarin.Forms, afinal o controle tem essa funcionalidade. Mas e se eu quiser atualizar a tela inteira?

Como assim? Imagine que você possui 3 controles em uma tela, cada um com um "source" próprio e você quer atualizar todos ao mesmo tempo, quando o usuário arrastar para baixo. Agora complicou né?

Felizmente existe um controle sensacional que nos ajude, o PullToRefreshLayout feito pelo James Montemagno ! Bora ver como usar e como ele resolve nossa vida!

Configurando o Plugin

Para começar vamos ao Nuget instalar em todos os projetos o Plugin Refractored.XamForms.PullToRefresh :

Em Seguida precisamos inicializar o controle PullToRefreshLayoutRenderer.Init() ;

No Android no MainActivity.cs :

E no iOS no AppDelegate.cs :

Pronto! Agora vamos utilizar :D

Utilizando o Controle

Para demonstrar a funcionalidade primeiro vamos criar uma ViewModel bem simples de exemplo. Com um command, um isBusy, umas propriedades, e uma Lista :

Para simular que teve um atraso no carregamento ou no retorno de uma API vamos colocar um Task.Delay.

Certo! Agora vamos implementar o controle em Nossa View :

Oficialmente o controle suporte hoje :

  • ListView
  • ScrollView

Então dentro de um ScrollView vamos implementar o controle, para isso precisamos do namespace : xmlns:pull=”clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh” :

Beleza ! Vamos rodar :

Bem legal não ? Claro que é um exemplo bem simples ,mas imagine oque não da para fazer com isso ?

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!