WPF Bindung. Dr. Beatrice Amrhein

Transkript

1 WPF Bindung Element- und Daten-Bindung Dr. Beatrice Amrhein

2 Überblick Element-Bindung via Eigenschaften-Editor Grenzen des Eigenschaften Editors Die C# Klasse Binding Bindung an C# Objekte 2

3 Einführung 3

4 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) sein Element-Bindung. Oder eine Daten-Bindung, das heisst die Daten-Quelle ist ein C# Objekt eine Auflistung, eine Datenbank, eine XML-Datei.... 4

5 Element-Bindung via Eigenschaften Editor 5

6 Inhalt des Labels an die TextBox binden <Window x:class="ueb5.mainwindow" xmlns=" xmlns:x=" 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> </StackPanel> </Window> Den Fokus auf das «leere» Label setzen 6

7 Inhalt des Labels an die TextBox binden Im Eigenschaftenfenster von Label die kleine Box rechts von «Content» auswählen. Menu-Punkt «Datenbindung erstellen» auswählen 7

8 Inhalt des Labels an die TextBox binden Datenquelle ElementName auswählen Element textbox1 auswählen (vgl. Name im XAML - Code!) 8

9 Inhalt des Labels an die TextBox binden Pfad Text auswählen Mit OK bestätigen 9

10 Inhalt des Labels an die TextBox binden <Window x:class="ueb5.mainwindow" xmlns=" xmlns:x=" Title="Einfache Elementbindung" Height="230" Width="300"> <StackPanel> <Label FontSize="18">Bindungs-Beispiel</Label> <Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center" </Label> Content="{Binding Text, ElementName=textBox1}"> <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. 10

11 Das Resultat <Window x:class="ueb5.mainwindow" xmlns=" xmlns:x=" Title="Einfache Elementbindung" Height="230" Width="300"> <StackPanel> <Label FontSize="18">Bindungs-Beispiel</Label> <Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center"> <Binding ElementName="textBox1" Path="Text"/> </Label> <TextBox Margin="10,0" Name="textBox1" FontSize="14"> </TextBox> </StackPanel> </Window> Beim Selber-Schreiben, bietet es sich an, die einfachere Element-Notation zu verwenden. 11

12 Label an ListBox binden 12

13 Ausgangspunkt <Window x:class="ueb5.mainwindow" </Window> xmlns=" xmlns:x=" Title="Einfache Elementbindung" Height="230" Width="300"> <StackPanel> <Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center"> </Label> <ListBox Margin="10,0" Name="listBox1" FontSize="14"> <ListBoxItem>Andrea</ListBoxItem> <ListBoxItem>Benno</ListBoxItem> <ListBoxItem>Corinne</ListBoxItem> <ListBoxItem>David</ListBoxItem> <ListBoxItem>Eva</ListBoxItem> <ListBoxItem>Felix</ListBoxItem> <ListBoxItem>Gabi</ListBoxItem> <ListBoxItem>Hannes</ListBoxItem> </ListBox> </StackPanel> Die Verknüpfung mit einer Auswahl-Liste wird vom Editor nur teilweise unterstützt. 13

14 Eigenschaften-Editor <Window x:class="ueb5.mainwindow" </Window> xmlns=" xmlns:x=" Title="Einfache Elementbindung" Height="230" Width="300"> <StackPanel> <Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center"> </Label> <ListBox Margin="10,0" Name="listBox1" FontSize="14"> <ListBoxItem>Andrea</ListBoxItem> <ListBoxItem>Benno</ListBoxItem> <ListBoxItem>Corinne</ListBoxItem> <ListBoxItem>David</ListBoxItem> <ListBoxItem>Eva</ListBoxItem> <ListBoxItem>Felix</ListBoxItem> <ListBoxItem>Gabi</ListBoxItem> <ListBoxItem>Hannes</ListBoxItem> </ListBox> </StackPanel> Die Verknüpfung mir einer Auswahl-Liste wird vom Editor nur teilweise unterstützt. 14

15 Was der Eigenschaften-Editor erzeugt <Window x:class="ueb5.mainwindow" xmlns=" xmlns:x=" Title="Einfache Elementbindung" Height="230" Width="300"> <StackPanel> <Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center" Content="{Binding SelectedItem, ElementName=listBox1}"> </Label> <ListBox Margin="10,0" Name="listBox1" FontSize="14"> <ListBoxItem>Andrea</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> Der erzeugte Code ist nicht vollständig und muss von Hand ergänzt werden. 15

16 .Content ergänzen <Window x:class="ueb5.mainwindow" xmlns=" xmlns:x=" Title="Einfache Elementbindung" Height="230" Width="300"> <StackPanel> <Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center" Content="{Binding SelectedItem.Content, ElementName=listBox1}"> </Label> <ListBox Margin="10,0" Name="listBox1" FontSize="14"> <ListBoxItem>Andrea</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> 16

17 Element Schreibweise <Window x:class="ueb5.mainwindow" xmlns=" xmlns:x=" Title="Einfache Elementbindung" Height="230" Width="300"> <StackPanel> <Label Height="25" Margin="10" FontSize="14" HorizontalAlignment="Center"> </Label> <Binding ElementName="listBox1" Path="SelectedItem.Content"/> <ListBox Margin="10,0" Name="listBox1" FontSize="14"> <ListBoxItem>Andrea</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> Auch hier bietet es sich an, die einfachere Notation zu verwenden. 17

18 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"; label.setbinding(label.contentproperty, binding); Statt im XAML-Code kann die Datenbindung auch im C# Code definiert werden. 18

19 Daten-Bindung Die C# Klasse Binding 19

20 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 20

21 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 erzeugt Binding b =new Binding(...). 21

22 Die Eigenschaften der C# Klasse Binding ElementName Path Mode Converter Source UpdateSourceTrigger Gibt den Namen des Steuerelements (vom GUI) an, welches als Datenquelle dient. Path ist die Eigenschaft (Property) an welche die Daten gebunden werden (Value, Text, Content, ) Definiert den Bindungsmodus (Aktualisierungsmodus) fest. Dieser kann einseitig (OneWay) oder beidseitig (TwoWay) zwischen GUI und Datenobjekt sein. Default ist TwoWay. Gibt das Objekt an, welche als Converter (Übersetzer) verwendet werden soll. Legt das Objekt fest, welches als Quelle der Datenbindung dient. Definiert, wann die Datenquelle aktualisiert werden soll (z.b. jedesmal wenn sich die die Daten ändern). 22

23 Datenbindung an C# Person Objekt 23

24 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; } public String Name { get { return name; } set { name = value; } } Die Klasse Person, mit Name und IDNummer. Konstruktor Zugriffsmethoden (get/set) für alle Eigenschaften (Properties) } public int IDNummer { get { return idnummer; } set { idnummer = value; } } 24

25 Erstellen des Person Objekts und setzen als Datenquelle // MainWindow.xaml.cs using System.Windows; namespace bindung { public partial class MainWindow : Window { public Person p = new Person("Meier", 2423); public MainWindow() { InitializeComponent(); Person p ist die Datenquelle für die XAML-Seite } } } DataContext = p; 25

26 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"/> </TextBox> <Label> <Binding Path="Name" Mode="OneWay"/> </Label> <Label> <Binding Path="IDNummer" Mode="OneWay"/> </Label> </UniformGrid> </DockPanel> Zweiseitige Datenbindung (lesen und schreiben) Da das Person Objekt die Datenquelle ist, kann direkt auf die Eigenschaften (Properties) Name und IDNummer von Person zugegriffen werden. 26

27 Datenbindung für das Einschreibe-Formular 27

28 Die Klasse Einschreibung public class Einschreibung { private String name; private String vorname; private String fach; private int semester; Jedes Feld des Formulars erhält hier eine Eigenschaft (eine Property). } public String Name { get { return name; } set { name = value; } }.... public int Semester { get { return semester; } set {semester = value; } } Für jede Property müssen die Zugriffsmethoden (get/set) implementiert werden. 28

29 Die Klasse Einschreibung public partial class MainWindow : Window { einschreibung erzeugen Einschreibung einschreibung = new Einschreibung("Muster", "Peter", "Maschinentechnik",2); } public MainWindow() { InitializeComponent(); DataContext = einschreibung; } einschreibung als Datenquelle festlegen. 29

30 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">... </DockPanel> <TextBox Width="173" Margin="2"> </TextBox> <Binding Path="Name" Mode="TwoWay"/> <TextBox Width="173" Margin="2"> <Binding Path="Vorname" Mode="TwoWay"/> </TextBox> <TextBox Width="173" Margin="2"> </TextBox> <Binding Path="Fach" Mode="TwoWay"/> einschreibung /DataContext im Fenster benutzen 30