Você provavelmente já precisou usar no seu aplicativo controles específicos que nem sempre são suportados por padrão pelo Xamarin Forms. Um exemplo bastante comum e que a maioria das pessoas que desenvolvem com Xamarin já passaram é precisar usar o CheckBox ou Radio Button.
Como o controle não é suportado em ambas as plataformas, o Xamarin Forms não dá suporte para este controle.
Isto tem mudado nas novas versão do Xamarin Forms, principalmente com a nova sintaxe OnPlataform, clique aqui para ver mais.
Mesmo com as novas versões do Xamarin Forms, ainda não temos disponíveis dentro do Xamarin Forms os controles Radio Button e CheckBox.
Neste post, vamos ver um plugin que contém vários exemplos de controles, além de radio button e check box, que podem ser bastante úteis no desenvolvimento.
O plugin Xamarin.Forms.InputKit
Existem muitos plugin que contém diversos componentes de input de dados já prontos para serem utilizados. Neste post vamos ver um pouco mais do pluigin Xamarin.Forms.InputKit e como ele pode nos ajudar a resolver o problema não ter disponível um controle Radio Button e CheckBox que funcione em ambas plataformas.
O plugin é open source e o código dele está disponível no GitHub do projeto, clique aqui para acessá-lo.
A documentação do plugin é bem completa com diversos exemplos de como utilizar os controles e também imagens dos controles em funcionamento. Dado que a documentação do plugin é bastante completa, não vou me alongar muito neste post, vamos ver apenas os controles Radio Button e CheckBox.
Instalando o plugin
Para instalar o plugin, clique com o botão direito na solution e selecione Manage Nuget Packages For Solution (se a sua versão estiver em português, selecione algo próximo a Gerenciar Pacotes NuGet da Solution)
Busque o pacote Xamarin.Forms.InputKit
Vamos instalar o pacote no projeto .Net Standart e em todas as plataformas.
No projeto Android também precisaremos instalar o plugin Plugin.CurrentActivity. Depois que instalar o plugin, vamos inicia-lo na classe MainActivity.cs no método OnCreate adicionando a linha abaixo:
CrossCurrentActivity.Current.Init(this, savedInstanceState);Pronto, o plugin já está instalado e pronto para ser usado!
No projeto, já temos a página MainPage.xaml, vamos trabalhar nela para adicionar os controles de exemplo.
Para que página MainPage.xaml esteja apta a usar o plugin, vamos precisar adicionar a referencia ao plugin no xaml do página:
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"CheckBox
Este plugin oferece o controle de CheckBox e com alguns opções de personalização.
Podemos por exemplo escolher qual será o ícone que irá representar a seleção do objeto como estrela, o check convencional e até mesmo um quadrado todo pintado (como um box)
Adicione o código fonte abaixo a MainPage.xaml para adicionar alguns CheckBox a tela:
<StackLayout Padding="30,0" Spacing="12">
<input:CheckBox Text="Valor 1" Type="Box" />
<input:CheckBox Text="Valor 2" Type="Check" />
<input:CheckBox Text="Valor 3" Type="Cross" />
<input:CheckBox Text="Valor 4" Type="Star" />
</StackLayout>Veja que mudamos a propriedade Type de controle para controle para alterarmos o ícone de seleção.
Além desta propriedade você também pode personalizar o tamanho o box, a cor do box e outras coisas.
Se você estiver trabalhando com MVVM e quiser deixar na sua View Model se o componente está selecionado ou não, use a propriedade IsChecked
Radio Button
Os Radio Button funcionam de forma parecida ao CheckBox, a diferença principal entre os dois é que o RadioButton permite que apenas um esteja selecionado.
Para isto, o radio button usa um controle para envolver todos os radio buttons que é o radio button group view.
Para adicionar o radio button na MainPage.xaml, vamos adicionar o código abaixo:
<StackLayout Padding="30,0" Spacing="12">
<input:RadioButtonGroupView>
<input:RadioButton Text="Opção 1" />
<input:RadioButton Text="Opção 2" />
<input:RadioButton Text="Opção 3" />
<input:RadioButton Text="Opção 4" />
</input:RadioButtonGroupView>
</StackLayout>Veja que os radio buttons estão dentro da RadioButtonGroupView, que irá permitir que apenas um controle esteja no estado selecionado.
Se você estiver trabalhando com MVVM, você poderia bindar a propriedade Text para um valor da sua View Model.
Para saber quem está selecionado, você teria algumas opções como adicionar um propriedade de sua View Model para a propriedade IsChecked de cada controle, ou na RadioButtonGroupView adicionar a propriedade SelectedItem uma propriedade da sua View Model.
Neste controle também podemos personalizar a cor do elemento, a cor do texto e outras propriedades.
Conclusão
Mesmo com os avanços do Xamarin Forms e com as novas versões que tem sido lançadas pela equipe da Xamarin da Microsoft, alguns componentes continuam precisando de plugins externos para serem implementados de uma forma mais fácil. Claro que ambos os controles citados neste post poderiam ser feitos com Custom Renderers na sua aplicação, mas esta abordagem além de gastar mais tempo, estaria sujeita a diversos bugs. Dado que o plugin aqui citado é open source, podemos acompanhar issues, bugs, versões e tudo mais sobre ele no GitHub do projeto.
—
#Ubuntu
Referências
Comentários