WPF Databinding – deel 1

WPF Databinding – deel 1

Dit artikel is het eerste artikel in een reeks korte artikelen waarin we gaan kijken naar databinding binnen het Microsoft.NET WPF framework. Dit eerste artikel zal gaan over het ‘WAT’ van databinding. In de vervolg artikelen zullen we aan de hand van een eenvoudige WPF-applicatie ingaan op het ‘HOE’ van databinding binnen WPF.

Waarom databinding?
Voordat we ingaan op het ‘WAT’ van databinding, zullen we eerst even het ‘WAAROM’ trachten te beantwoorden.
Databinding is een concept (mechanisme) dat ons leven als ontwikkelaar gewoon een stukje makkelijker maakt. Zonder databinding bestaat er geen relatie tussen de UI elementen en de bron van de data. Dit betekent dat het UI element niet weet waar zijn data vandaan komt en waar de eventuele wijzigingen van deze data naar toe gestuurd moeten worden. Dit betekent dat we code moeten gaan schrijven die voor elke eigenschap van het UI-element waar brondata aan toegewezen is, bijhoudt wat de wijzigingen in de data zijn en deze wijzigingen doorzetten naar de juiste bronklas en vice versa.
Door gebruik te maken van databinding hoeven we deze custom code niet zelf te schrijven, dit is reeds voor ons geïmplementeerd in het WPF framework.
Hierdoor kan je dus op een effectieve manier een binding (relatie) leggen tussen UI elementen en data bronnen (klassen) en de wijzigingen in deze data ook monitoren en op een juiste wijze weer doorgeven aan de bron. Hierdoor verkeren, zowel bron als doel altijd in een zelfde staat zonder dat dit enige custom code van de ontwikkelaar vereist.
Nu we het WAAROM hebben beantwoord gaan we verder met het WAT (is databinding).

Wat is databinding?
Databinding is het proces waarbij een koppeling voorzien wordt tussen de gebruikersinterface van de applicatie en de onderliggende business laag. Hierbij wordt een binding opgezet tussen de UI componenten en de CLR componenten (klassen) in de business of presentatie laag. Deze binding draagt zorg voor het doorvoeren van wijzigingen in de data van bron naar doel object of van doel object naar het bron object.
Onafhankelijk van het soort UI element dat gebruikt wordt in de binding, volgt de binding altijd de volgende conventie:

Afbeelding 1 Binding conventie

In bovenstaande afbeelding zien we een ‘Binding Target’ en een ‘Binding Source’. De binding target is een UI element welke dient te beschikken over 1 of meerdere ‘dependency properties’ en de binding source is het CLR object met 1 of meerdere eigenschappen.
Dependency object: De DependencyObject klas activeert de Windows Presentation Foundation (WPF) eigenschap systeem services op zijn vele afgeleide klassen.
Dependency property: Vertegenwoordigt een eigenschap welke gezet kan worden door middel van methodes, zoals opmaak, databinding, animatie en overerving

Manieren van databinding
Databinding kan op de volgende manieren worden gerealiseerd:
• One way (van source naar target)
• Two way (van source naar target en van target naar source)
• One way to source (van target naar source)

Afbeelding 2 Manieren van databinding

Aan de hand van de volgende class definitie en WPF-scherm, zullen we de verschillende manieren van databinding beschrijven.

Class definitie:

WPF formulier:

One way binding
Bij gebruik van een ‘one way’ binding worden veranderingen in de brondata gepropageerd naar het doelobject. Veranderingen in de target data zullen niet worden gepropageerd naar de bron data.
In ons voorbeeld betekent dit dat als we van de class Team de eigenschap Name met een ‘one way’ binding hebben gekoppeld aan het invoerveld ‘Team’ van het WPF scherm, dat indien we de tekst in het invoerveld aanpassen, deze nieuwe waarde NIET wordt doorgestuurd naar de ‘Name’ property van de Team class. Echter wanneer door uitvoering van de applicatie de waarde van de eigenschap ‘Name’ van de ‘Team’ class verandert naar bijvoorbeeld ‘Red Bull Racing’, dan zal de verandering WEL zichtbaar zijn in het invoerveld ‘Team’ van het WPF scherm.

Two way binding
Bij gebruik van een ‘two way’ binding wordt de bron data bijgewerkt bij aanpassingen in de doeldata en bij aanpassingen in de brondata zal de doeldata worden bijgewerkt.
In ons voorbeeld betekent dit dat indien er door de applicatie aanpassing worden gedaan aan de eigenschap ‘Name’ van het ‘Team’ object dit zal worden gereflecteerd door het invoerveld in het WPF scherm. Tevens zullen aanpassingen in het invoerveld worden doorgevoerd naar de ‘Name’ property van het ‘Team’ object.
OneWayToSource binding
Bij ‘OneWayToSource’ binding zullen enkel de wijzigingen vanuit het invoerveld worden doorgevoerd naar de eigenschap ‘Name’ van het ‘Team’ object. Wijzigingen aan de eigenschap ‘Name’ van het ‘Team’ object welke door de applicatie code worden gedaan zullen NIET worden doorgezet naar het invoerveld in het WPF scherm.

Triggering updates
Om de wijzigingen in data te kunnen registreren zijn er mechanismes welke geïmplementeerd dienen te worden. Dit geldt voor het bronobject als ook voor het doelobject. Voor de UI objecten worden deze mechanismes geleverd door het WPF framework. Voor de CLR classes dienen we dit zelf te implementeren.

Trigger voor bron object
Het meest gangbare mechanisme voor het registreren van data wijzigingen op een CLR class is de INotifyPropertyChanged interface. Deze interface bevat enkel de eventhandler ‘PropertyChangedEventHandler PropertyChanged’. Dit event dient afgevuurd te worden op het moment dat een waarde van een eigenschap van de class verandert. Hieronder zie je een voorbeeld van een implementatie van de INotifyPropertyChanged interface op onze Team class.

Deze afgevuurde events worden door het WPF framework opgevangen en op de juiste manier verwerkt.
De UI elementen (doel objecten) hebben verschillende triggerimplementaties waarmee het framework op de hoogte gesteld kan worden van veranderingen in de doeldata. De dependency properties van de WPF UI elementen hebben een UpdateSourceTrigger eigenschap welke 1 van de volgende waarden kan hebben: