Xamarin Forms – Data Binding entre controles

Xamarin Forms – Data Binding entre controles

Aprenda fazer Data Binding entre seus componentes de sua View no Xamarin Forms

Fala galera, beleza?
Como alguns de vocês já sabem, depois de passar um tempo estudando aplicações híbridas com Ionic, eu lancei aqui no blog um cursinho grátis de como começar a desenvolver para ionic. Hoje eu começo minha nova jornada, mas em cima do Xamarin Forms e como de costumo pretendo compartilhar meus conhecimentos com vocês.

Para quem ainda nunca ouviu falar, Xamarin é uma ferramenta que nos permite desenvolver aplicações nativas com C#, isso mesmo, você desenvolve em C# e o Xamarin faz todo o trabalho para converter seu código em linguagem nativa de cada plataforma.

Xamarin nos permite ter um reaproveitamento de código absurdo, não só de nosso negócio, mas como de nossa View também caso use o Xamarin Forms.

Bom vamos ao artigo!

Realizando Data Binding entre os componentes na tela.

Neste nosso primeiro artigo iremos aprender como ligar nossos controles da tela usando Data Binding, sem utilizar uma ViewModel ou Codigo C#.

Crie um projeto Xamarin Xaml Portable e crie os 3 controles abaixo:

– Slider
– ProgressBar
– 1 Label

O objetivo é ao interagir com o Slider, a ProgressBar e Label serem alteradas automaticamente através do Data Binding.

O primeiro passo é criamos nossos controles no XAML.

Como podemos ver acima, criamos 3 controles dentro do StackLayout, um Slider, uma Label e um ProgressBar.

Agora para conectarmos os controles iremos usar a propriedade BindingContext com a referencia do controle que queremos acessar.

Como podemos ver acima, no controle Label foi adicionada a propriedade BindingContext e dentro dela adicionamos uma referencia ao objeto que queremos acessar. Ficando assim BindingContext=”{x:Reference Name=sldNota}”, depois que fizemos essa referencia, podemos acessar as propriedades do objeto Slider através do Binding, como podemos ver na propriedade Text da Label, ficando assim Text=”{Binding Value}”.

Como podemos ver é bem simples, agora basta fazer a mesma coisa no ProgressBar, ficando assim BindingContext=”{x:Reference Name=sldNota}” Progress=”{Binding Value}”.

Sua tela deverá aparecer como está no Android.

Ao interagir com o objeto Slider a Label e ProgressBar são alterados automaticamente.

Como podemos ver, nem sempre somos obrigados a criar métodos que irá manipular nossa ViewModel para depois fazer o Bind na tela, da pra fazer diretamente desta forma também, é questão de bom senso.

 

Até a próxima pessoal!

Previous Primeiras impressões do Visual Studio para o Mac
Next Xamarin - Como consumir uma api local que roda no IIS Express no emulador

About author

Paulo Rogério
Paulo Rogério 152 posts

Sou apaixonado por tecnologia e adoro criar aplicações desktop, web e mobile. Adoro aprender e compartilhar conhecimento, meu hobby é ajudar as pessoas.

You might also like

Mobile 0 Comments

Curso Ionic em português – Aula 7 – Gerando nosso APK

Share this on WhatsAppVeja como geramos nosso apk para por o app no celular Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos realizar a

Curso completo e gratuito de Angular 2!

Share this on WhatsAppAprenda agora mesmo tudo sobre Angular 2 gratuitamente Sabemos que o Angular JS é um framework javascript mantido pela gigante Google e que cresce cada vez mais

Mobile 0 Comments

Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados

Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply