O X do Xamarin Forms — RatingBar

Thiago Bertuzzi
3 min readJan 22, 2019

--

Fala Galera,

tudo beleza?

Quantas estrelas você daria para esse artigo? Ainda bem que aqui não tem Rating bar para eu ficar triste né? hahahaha

Existem muitos apps que precisam utilizar a famosa Rating bar, seja para dar nota no próprio app ou para alguma funcionalidade especifica.

Mas como implementar uma em Xamarin.Forms? Bem você precisa criar o controle e um custom renderer por plataforma, ja que cada plataforma possui a RatingBar de forma nativa.

Mas seguindo uma dica que vi em uma comunidade de Xamarin (Dica do grande Altevir C. Neto ViCo ) eu conheci um controle que implementa nossa necessidade !

Então depois de utilizar em um projeto na empresa, eu lhes apresento o Forms.Controls , que alem de outros controles possui a RatingBar!

Bora ver como funciona?

Configurando o controle

Vamos ao bom e velho nuget baixar o controle Messier16.Forms.Controls e instalar em todos os nossos projetos :

Perfeito! Agora tanto no iOS como no Android devemos inicializar o componente Messier16.Forms.iOS.Controls.Messier16Controls.InitAll();

iOS Appdelegate.cs :

Android MainActivity.cs:

Pronto ! Vamos utilizar

Utilizando o Controle

Antes de mais nada, vamos adicionar no nosso projeto (utilizei o iOS como exemplo) as imagens que irão aparecer na nossa RatingBar. Você pode utilizar qualquer imagem, respeitando claro o tamanho de cada plataform

Eu criei uma estrela vazia e uma preenchida para todos os tamanhos de tela do iOS.

Em nosso Xaml temos que declarar o namespace : xmlns:messier16=”clr-namespace:Messier16.Forms.Controls;assembly=Messier16.Forms.Controls” e em seguida vamos implementar o controle com o exemplo abaixo :

No controle podemos definir qual a imagem sera a padrão da barra e qual deve aparecer ao selecionar. Alem disso o MaxRating diz qual vai ser o tamanho da nossa barra.

Vamos rodar :

Bem legal né?

Podemos utilizar também as propriedades para obter os valores do controle em nossa ViewModel.

Vamos criar uma ViewModel simples :

E então fazer o binding no controle :

Rodando :

iOS:

Android:

Esse controle é sensacional não ?

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
Thiago Bertuzzi

Written by Thiago Bertuzzi

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Responses (1)