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.png
    Azure AppInsights: Ein mini Google Analytics für Websites

    Seit der Build Konferenz ist das neue Azure Portal für alle freigeschaltet. Durch das neue Portal ist mir ein “Dienst” aufgefallen, den ich bisher nicht gesehen hatte: Azure Application Insights Viel weiss ich nicht über den Dienst, aber wer eine Azure Website hat der sollte mal die “Analytics” Box öffnen. Im Grunde handelt es sich […]

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

Amazon Shop

Facebook