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 148 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

Veja como criar aplicação web, desktop e mobile com um único código

Share this on WhatsAppAndré Baltieri disponibiliza curso que leva AngularJS pra todo lado Esta semana nosso parceiro e amigo André Baltieri disponibilizou um curso muito interessante onde ele irá mostrar

Mobile 0 Comments

Curso Ionic em português – Aula 5 – Salvando e obtendo dados do localStorage

Share this on WhatsAppVeja como salvar e obter dados do localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como salvar contatos no localStorage

Mobile 0 Comments

Curso criando aplicativo Uber com Ionic 2

Share this on WhatsAppAprenda criar um aplicativo igual do Uber com Ionic 2 Fala galera, um tempo atrás um sujeito chegou até a mim e me pediu para criar um

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply