WPF Bindung - sws.bfh.chamrhein/Skripten/Info2/05.DataBinding.pdf · In XAML wird die Bindung erstellt durch: also zum Beispiel

WPF Bindung

Element- und Daten-BindungElement- und Daten-Bindung

Dr. Beatrice Amrhein

Überblick

� Element-Bindung via Eigenschaften-Editor

� Grenzen des Eigenschaften Editors

� Die C# Klasse Binding

� Bindung an C# Objekte� Bindung an C# Objekte

2Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012

EinführungEinführung


Einführung

� Bindungen werden zwischen zwei Elementen definiert.

� Datenquelle �� Datenziel.

� Im Datenziel wird eine oder mehrere Eigenschaften an eine Datenquelle verbunden.

� Die Datenquelle kann

� Die Eigenschaft eines anderen Elements (z. B. eines Steuerelement) � Die Eigenschaft eines anderen Elements (z. B. eines Steuerelement) sein � Element-Bindung.

� Oder eine � Daten-Bindung, das heisst

� die Daten-Quelle ist ein C# Objekt

� eine Auflistung,

� eine Datenbank,

� eine XML-Datei.

� . . . 4

Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012

Element-Bindung via Element-Bindung via Eigenschaften Editor


Inhalt des Labels an die TextBox binden

<Window x:Class="ueb5.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Einfache Elementbindung" Height="230" Width="300">

<StackPanel>

<Label FontSize="18">Bindungs-Beispiel</Label>

<Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center">

</Label>

<TextBox Margin="10,0" Name="textBox1" FontSize="14">

</TextBox></TextBox>

</StackPanel>

</Window>


Den Fokus auf das «leere» Label setzen


Im Eigenschaftenfenster von Label die kleine Box rechts von «Content» auswählen.


Menu-Punkt«Datenbindung erstellen»auswählen


Datenquelle ElementName auswählen

Element textBox1 auswählen

(vgl. Name im XAML - Code !)


XAML - Code !)


Pfad Text auswählen


Mit OK bestätigen






<StackPanel>


<Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center"

Content="{Binding Text, ElementName=textBox1}">

</Label>

<TextBox Margin="10,0" Name="textBox1" FontSize="14"><TextBox Margin="10,0" Name="textBox1" FontSize="14">

</TextBox>

</StackPanel>

</Window>


Natürlich ist es auch möglich, diese

Element-Bindung (viel schneller) von

Hand zu schreiben.

Das Resultat





<StackPanel>



<Binding ElementName="textBox1" Path="Text"/>

</Label>

<TextBox Margin="10,0" Name="textBox1" FontSize="14"><TextBox Margin="10,0" Name="textBox1" FontSize="14">

</TextBox>

</StackPanel>

</Window>


Beim Selber-Schreiben, bietet es sich

an, die einfachere Element-Notation

zu verwenden.

Label an ListBoxLabel an ListBoxbinden


Ausgangspunkt





<StackPanel>


</Label>

<ListBox Margin="10,0" Name="listBox1" FontSize="14">

<ListBoxItem>Andrea</ListBoxItem>

<ListBoxItem>Benno</ListBoxItem><ListBoxItem>Benno</ListBoxItem>

<ListBoxItem>Corinne</ListBoxItem>

<ListBoxItem>David</ListBoxItem>

<ListBoxItem>Eva</ListBoxItem>

<ListBoxItem>Felix</ListBoxItem>

<ListBoxItem>Gabi</ListBoxItem>

<ListBoxItem>Hannes</ListBoxItem>

</ListBox>

</StackPanel>

</Window>


Die Verknüpfung mit einer

Auswahl-Liste wird vom

Editor nur teilweise

unterstützt.

Eigenschaften-Editor





<StackPanel>


</Label>


<ListBoxItem>Andrea</ListBoxItem>

<ListBoxItem>Benno</ListBoxItem><ListBoxItem>Benno</ListBoxItem>







</ListBox>

</StackPanel>

</Window>


Die Verknüpfung mir einer

Auswahl-Liste wird vom

Editor nur teilweise

unterstützt.

Was der Eigenschaften-Editor erzeugt





<StackPanel>


Content="{Binding SelectedItem, ElementName=listBox1}">

</Label>


<ListBoxItem>Andrea</ListBoxItem><ListBoxItem>Andrea</ListBoxItem>

<ListBoxItem>Benno</ListBoxItem>







</ListBox>

</StackPanel>

</Window>


Der erzeugte Code ist

nicht vollständig und muss

von Hand ergänzt

werden.

.Content ergänzen





<StackPanel>


Content="{Binding SelectedItem.Content, ElementName=listBox1}">

</Label>










</ListBox>

</StackPanel>

</Window>


Element Schreibweise





<StackPanel>


<Binding ElementName="listBox1" Path="SelectedItem.Content"/>

</Label>










</ListBox>

</StackPanel>

</Window>


Auch hier bietet es sich an,

die einfachere Notation zu

verwenden.

Beispiel 2: Bindung via C# Code

namespace ueb5

{

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

Binding binding = new Binding("SelectedItem.Content");

binding.ElementName = "listBox1";binding.ElementName = "listBox1";

label.SetBinding(Label.ContentProperty, binding);

}

}

}


Statt im XAML-Code kann die

Datenbindung auch im C#

Code definiert werden.

Daten-Bindung

Die C# Klasse Binding

19

Die Klasse Binding

� Dient als Verbindung zwischen

− Ziel-Objekten (normalerweise WPF-Elemente) und

− einer Datenquelle (z. B. eine Datenbank, eine XML-Datei oder ein beliebiges Objekt mit Daten)


Bindung

Die Klasse Binding

Bindung


Eine Bindung besteht aus einem Bindungsziel, (mit einer Abhängigkeits-Eigenschaft), einer Bindungsquelle sowie dem Pfad zum konkreten Wert in der Bindungsquelle. Diese kann im XAML oder im C# Code erzeugt werden.

In XAML wird die Bindung erstellt durch: <Binding .../>also zum Beispiel <Binding ElementName=" . . . " Path=" . . . "/>

In C# wird ein Bindungsobjekt durch einen Konstruktor erzeugtBinding b = new Binding(. . .).

Die Eigenschaften der C# Klasse Binding

ElementNameGibt den Namen des Steuerelements (vom GUI) an, welches als Datenquelle dient.

PathPath ist die Eigenschaft (Property) an welche die Daten gebunden werden (Value, Text, Content, …)

ModeDefiniert den Bindungsmodus (Aktualisierungsmodus) fest. Dieser kann einseitig (OneWay) oder beidseitig (TwoWay) zwischen GUI Mode kann einseitig (OneWay) oder beidseitig (TwoWay) zwischen GUI und Datenobjekt sein. Default ist TwoWay.

ConverterGibt das Objekt an, welche als Converter (Übersetzer) verwendet werden soll.

Source Legt das Objekt fest, welches als Quelle der Datenbindung dient.

UpdateSourceTriggerDefiniert, wann die Datenquelle aktualisiert werden soll (z.B. jedesmal wenn sich die die Daten ändern).


Datenbindung an C# Datenbindung an C# Person Objekt


Die Daten-Quelle: Die Klasse Person

public class Person

{

private String name;

private int idNummer;

public Person(String n, int id)

{

this.name = n;

this.idNummer = id;

}

Die Klasse Person, mit Name und IDNummer.

Konstruktor

public String Name

{

get { return name; }

set { name = value; }

}

public int IDNummer

{

get { return idNummer; }

set { idNummer = value; }

}

}


Zugriffsmethoden (get/set) für alle Eigenschaften (Properties)

Erstellen des Person Objekts und setzen als Datenquelle

// MainWindow.xaml.cs

using System.Windows;

namespace bindung

{


{

public Person p = new Person("Meier", 2423);

public MainWindow()Person p ist die

public MainWindow()

{


DataContext = p;

}

}

}


Person p ist die Datenquelle für die XAML-Seite

Verbindung (Binding) im XAML Code

<DockPanel Width="230">

<Label DockPanel.Dock="Top" Width="190">Personen-Angaben</Label>

<Button Content="OK" DockPanel.Dock="Bottom" Margin="50,5"/>

<UniformGrid Columns="2" Height="80">

<Label>Name</Label>

<TextBox >

<Binding Path="Name" Mode="TwoWay"/>

</TextBox>

<Label>ID-Nummer</Label>

<TextBox>

<Binding Path="IDNummer" Mode="TwoWay"/>

Zweiseitige Datenbindung (lesen und schreiben)

<Binding Path="IDNummer" Mode="TwoWay"/>

</TextBox>

<Label>

<Binding Path="Name" Mode="OneWay"/>

</Label>

<Label>

<Binding Path="IDNummer" Mode="OneWay"/>

</Label>

</UniformGrid>

</DockPanel>


Da das Person Objekt die Datenquelle ist, kann direkt auf die Eigenschaften (Properties) Name und IDNummer von Person zugegriffen werden.

Datenbindung für das Einschreibe-Formular


Einschreibe-Formular

Die Klasse Einschreibung

public class Einschreibung

{

private String name;

private String vorname;

private String fach;

private int semester;

public String Name

{

get { return name; }


Jedes Feld des Formulars erhält hier eine Eigenschaft (eine Property).


}

. . . .

public int Semester

{

get { return semester; }

set {semester = value; }

}

}


Für jede Property müssen die Zugriffsmethoden (get/set) implementiert werden.

Die Klasse Einschreibung


{

Einschreibung einschreibung =

new Einschreibung("Muster", "Peter", "Maschinentechnik",2);

public MainWindow()

{


einschreibung erzeugen

einschreibung als Datenquelle InitializeComponent();

DataContext = einschreibung;

}

}


Datenquelle festlegen.

Der XAML Code

<DockPanel>

<Label DockPanel.Dock="Top" Content="Anmeldung" FontSize="20" Margin="20"/>

<UniformGrid DockPanel.Dock="Bottom Rows="1" Margin="40,5">

<Button Content="Abbrechen" Margin="5" Width="80" IsCancel="True"/>

<Button Content="Speichern" Margin="5" Width="98" IsDefault="True"/>

</UniformGrid>

<Grid Width="300">

. . . Labels definieren . . .

<StackPanel Grid.Row="0" Grid.Column="1">

<TextBox Width="173" Margin="2">

einschreibung /DataContextim Fenster benutzen


<Binding Path="Name" Mode="TwoWay"/>

</TextBox>


<Binding Path="Vorname" Mode="TwoWay"/>

</TextBox>


<Binding Path="Fach" Mode="TwoWay"/>

</TextBox>

. . .

</DockPanel>


Documents

WPF Bindung - sws.bfh.chamrhein/Skripten/Info2/05.DataBinding.pdf · In XAML wird die Bindung erstellt durch: also zum Beispiel