Hello, bound world!

Genauso, wie wir dieses Tutorium mit dem klassischen "Hello, world!"-Beispiel begonnen haben, werden wir Dir mit dem "Hello, bound world!" - Beispiel zeigen, wie einfach es ist, data binding in WPF zu verwenden. Lass uns gleich damit loslegen und ich werde es hinterher erklären.

<Window x:Class="WpfTutorialSamples.DataBinding.HelloBoundWorldSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="HelloBoundWorldSample" Height="110" Width="280">
    <StackPanel Margin="10">
		<TextBox Name="txtValue" />
		<WrapPanel Margin="0,10">
			<TextBlock Text="Value: " FontWeight="Bold" />
			<TextBlock Text="{Binding Path=Text, ElementName=txtValue}" />
		</WrapPanel>
	</StackPanel>
</Window>

Dieses einfache Beispiel zeigt, wie wir den Wert des TextBlock-Steuerelements mit der Text-Eigenschaft der TextBox verknüpfen. Wie im Screenshot dargestellt, wird der TextBlock automatisch aktualisiert, sobald etwas in die TextBox geschrieben wird. Ohne data binding müssten wir dafür ein Ereignis der TextBox abonnieren und anschließend den TextBlock jedes mal aktualisieren, sobald sich der Inhalt der TextBox ändert. Doch mit data binding lässt sich diese Verknüpfung einfach durch Markup realisieren.

Die binding Syntax

Das ganze Geheimnis liegt zwischen den geschweiften Klammern, mit denen in XAML eine Markup Erweiterung gekapselt wird. Für das data binding verwenden wir die Binding-Erweiterung, die es uns erlaubt, eine Verknüpfungsbeziehung für die Text-Eigenschaft zu beschreiben. In seiner einfachsten Form, kann ein Binding so aussehen:

{Binding}

Das gibt einfach den aktuellen Datenkontext wieder (später mehr dazu). Dies kann durchaus nützlich sein, doch in den meisten Fällen, möchte man den Datenkontext einer Eigenschaft mit einer anderen Eigenschaft verknüpfen. Ein entsprechendes Binding Markup würde dann wie folgt aussehen:

{Binding Path=NameDerEigenschaft}

Das Path-Element beschreibt die Eigenschaft, zu der man die Verknüpfung realisieren möchte. Doch weil Path die Standardeigenschaft von Binding ist, kann es auch weggelassen werden, so wie hier:

{Binding NameDerEigenschaft}

Du wirst viele unterschiedliche Beispiele sehen: Bei einigen wurde Path explizit mit angegeben und bei anderen wurde es weggelassen. Am Ende hängt es einfach davon ab, was Dir besser gefällt.

Eine Verknüpfung kann durch verschiedene Eigenschaften erfolgen, unter Anderem die Eigenschaft ElementName, welche wir in unserem Beispiel verwendeten. Dies gibt uns die Möglichkeit direkt an andere UI-Elementen als Quelle zu verknüpfen. Jede Eigenschaft, die wir im Binding setzen, wird mit einem Komma getrennt.

{Binding Path=Text, ElementName=txtValue}

Zusammenfassung

Dies war nur ein kurzer Einblick in die ganzen Möglichkeit von Verknüpfungen in WPF. In den nächsten Kapiteln werden wir mehr davon entdecken und dir zeigen, wie mächtig data binding ist.