HowTo: Databinding in WPF (& Silverlight 2) – Einstieg

In diesem HowTo geht es um den Einstieg in das Thema "Databinding" mit der Windows Presentation Foundation (was so eigentlich auch in Silverlight 2 geht).

Wer Databinding aus ASP.NET her kennt, wird sich in die WPF Databinding Möglichkeiten sicherlich verlieben.

Doch erstmal langsam – was ist eigentlich "Databinding"?

Jeder Entwickler kennt es: Im Code häuft man sich irgendwelche Daten an und versucht diese dann in das Frontend zu bekommen. Wenn nun der Nutzer die entsprechenden Felder im Frontend verändert, muss man ein händisches Mapping zwischen den UI Daten und den eigentlichen Daten vornehmen, damit die Änderungen auch gespeichert werden.

Das ist meist ein sehr mühseeliger Prozess, insbesondere da meist auch noch eine Validation gewünscht ist – darf in dem Feld jetzt ein String stehen? In dem Feld sollte nur eine Postleitzahl stehen etc.

Typische Szenarien – im Web ist dies durch das "zustandslose" HTTP schwierig umzusetzen – in ASP.NET wurde es versucht, allerdings meiner Meinung nach nur mit mäßigem Erfolg. In Windows (oder Silverlight) Applikationen sollte dies doch leichter möglich sein.

Genau darum dreht sich Databinding. Insbesondere in WPF gibt es einige Möglichkeiten und ich will hier nur mal den ersten Eindruck vermitteln.

Schritt 1: WPF Projekt anlegen

Als erstes legen wir ein WPF Projekt an:

image

Notiz am Rande: Das ganze kann man auch mit Expression Blend machen, allerdings werde ich mich hier erstmal nur auf Visual Studio 2008 konzentrieren.

Folgende Projektstruktur wird automatisch angelegt:

image

Wir halten uns vornehmlich in der "Window1.xaml" auf.

Schritt 2: Klassen anlegen

Damit wir in unserem Beispiel etwas machen können, benötigen wir 2 kleine Klassen:

"Person"

image

"Title"

image

Schritt 3: XAML Binding

Um das ganze Thema etwas zu verstehen, legen wir mal ein Binding direkt in der Window1.xaml an. So sieht das Ergebnis aus:

image

Und so der Code dazu:

image

Das sieht erstmal recht komplex aus – aber gehen wir Schritt für Schritt durch.

Wir wollen (in einem StackPanel) ein Label befüllen. Dazu befüllen wir es mit dem Binding Element. Über "Source" greifen wir auf eine "StaticResource" auf unser Element namens "MyTitleElement" zu.

Dabei holen wir uns den Wert des Feldes "Value" ab – was ich aber auch BlaBlub nennen hätte können.

Direkt im "Window.Resources" legen wir ein .NET Objekt der Klasse "Title" an (die wir im vorherigen Schritt angelegt haben) und geben ihm über x:Key einen Namen und über die Property "Value" (wie gesagt, hätte auch BlaBlub heißen können) das was wir rein haben wollen.

image

Der "Path" in dem Binding Element gibt am Ende die eigentliche Quelle an.

Damit wir im XAML solche .NET Objekte anlegen können, müssen wir einen xml Namespace hinzufügen. Über "clr-namespace:…" fügt man .NET Namespaces hinzu.

Um es nochmal hervorzuhebe: Das ganze ohne eine Zeile in der Codebehinde geschrieben zu haben.

Schritt 4: ListBox zur Anzeige von dynamischen Inhalten nehmen.

Um ein etwas komplexeres Beispiel zu zeigen, wollen wir nun mal mehrere "Person" Objekte in einer ListBox anzeigen.

So wird es hinterher aussehen:

image

Ich hatte jetzt keine große Lust mich erst mit der Formatierung rumzuschlagen ;) Primär gehts hier erstmal um Databinding. In einem anderen HowTo machen wir auch "schöne" Sachen.

Hier der Code dazu:

image

Wir legen wieder einen Namen an – damit wir im Codebehinde Zugriff darauf haben – und machen unser ItemTemplate – ein "DataTemplate".

Im Codebehinde reicht dann nur wenige Zeile:

image

Schlussbemerkung

Das ganze Thema Databinding ist natürlich noch um einiges Größer – doch vorerst mach ich hier erstmal Schluss. Das nächste HowTo wird sich dann um das richtige Databinding drehen – mit Dataupdates etc.

Natürlich könnt ihr auch in der MSDN oder hier nachschauen. Für jeden der sich interssiert, würde ich auch die Demos von der VSOne empfehlen.

PS: Ich arbeite mich selber erst in diese Themen ein, daher muss nicht unbedingt alles 100% stimmen. Es hilft mir zum Teil auch, dass ich dies mal aufgeschrieben habe. "Best Practices" sind es also (noch) nicht ;)

[ Download Democode ]

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

6 Responses

  1. Großartiges Tutorial! Vielen Dank. Databinding ist schon eine tolle Sache.

    Grüße Christian

    Reply
  2. Spitzen Tutorial!
    Hab mich grad auf die Seite verirrt…
    Endlich mal jemand, der Databinding kurz und bündig erklärt! Das ist eine gute Ergänzung zu den Hilfen von Microsoft, denn ich hab den Begriff schon oft “überlesen”.
    Das “BlaBlub” wirkt etwas kindisch. Das ist aber gut, denn dadurch merke ich beim lesen, dass im Tutorial nicht bürokratisch jeder unwichtige Aspekt abgehakt wird.
    Ich hab jetzt nen guten Überblick über die Technologie, Danke!

    Reply
  3. In der Tat zeigt dass Tutorial woran viele Microsoft Geschichten kranken. Wunderbar geschrieben und illustriert und ganz ohne WCF, LINQ und co auf einem Haufen ….
    Vielen Dank!

    Reply
  4. Echt Supter Tutorial wir saßen 3Tage daran. Sowas hinzubekommen doch die meisten anderen Tutorials waren viel zu kompliziert. Das hier ist einfach und komplex.
    Danke!

    Reply
  5. Danke, super Tutorial….!

    Reply

Comment on this post

Letzte Posts

  • image_thumb.png
    NuGet Package Restore & Build Server wie z.B. AppVeyor

    NuGet ist ja mittlerweile weit verbreitet, aber eine Frage stellt sich natürlich immer noch: Checkt man die NuGet Packages ein oder nicht? In meinem kleinen Side-Projekt, welches auf GitHub liegt und ich über AppVeyor auch bauen lasse nutze ich das Package Restore Feature von NuGet, d.h. in meinem Repository befindet sich kein NuGet Package mehr, […]

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der “Consumer-Microsoft-Welt”, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das “Live SDK” ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmöglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfängt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitäten – ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt “Contributed”. Was zählt alles zu “Contribution”? Unter “Contribution” läuft eigentlich alles – ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darüber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit ändert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal über das Erstellen einer eigenen ConfigSection geschrieben – im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

Amazon Shop

Facebook