WPF Steuerelemente Listbox, ComboBox, ListView,

Transkript

1 WPF Steuerelemente Listbox, ComboBox, ListView, Dr. Beatrice Amrhein

2 Überblick Einführung Listen ComboBox Tabellen 2

3 Einführung 3

4 Listen- und Tabellen-Elemente Listen und Tabellen-Elemente sind Steuerelemente, welche eine ganze Liste von Einträgen (oder Objekten mit Eigenschaften) darstellen können. Zum Teil werden diese benutzt, um aus einer Liste von Objekten eines auszuwählen, zum Teil auch direkt um die Daten (in einer Tabelle) zu manipulieren. 4

5 Die wichtigsten Listen- und Tabellen-Elemente Steuer-Element Verwendung ListBox Auswahl von einem oder mehreren Elementen aus einer Liste ComboBox Auswahl von einem Element aus einer Liste ListView Darstellung einer Tabelle (kein Editieren möglich) DataGrid Darstellung einer Tabelle mit Editier-Möglichkeiten TreeView Darstellungeiner Baumstruktur (z.b. für Auswahl oder Navigation) ListBox ComboBox ListView/DataGrid TreeView 5

6 Verwendung der ListBox 6

7 Erstellen der ListBox im XAML-Code <Window x:class="listbox1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="200" Width="300" FontSize="14"> <StackPanel Margin="10" Orientation="Horizontal"> <ListBox Name="listBox1" Margin="5" Width="180"> <ListBoxItem>Hans-Peter Jung</ListBoxItem> <ListBoxItem>Katharina Witt</ListBoxItem> <ListBoxItem>Franz Hasler</ListBoxItem> <ListBoxItem>Rolf Ursprung</ListBoxItem> <ListBoxItem>Ulrich Tannenbaum</ListBoxItem> </ListBox> <Button VerticalAlignment="Top" Margin="10">Remove</Button> </StackPanel> </Window> Das Füllen der ListBox kann direkt im XAML-Code geschehen. 7

8 Erstellen der ListBox im XAML-Code <Window x:class="listbox2.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="200" Width="300" FontSize="14"> <StackPanel Margin="10" Orientation="Horizontal"> <ListBox Name="listBox1" Margin="5" Width="180"/> <Button Click="btn_Remove" VerticalAlignment="Top" Margin="10"> Remove</Button> </StackPanel> </Window> Üblicherweise wird die Liste aber im C# -Code erzeugt, dann bleibt die XAML- ListBoxleer. Die ListBoxbraucht dann auf jeden Fall einen Namen (hier listbox1), damit sie im C#-Code gefüllt werden kann. 8

9 Erstellen der ListBox im C#-Code public partial class MainWindow : Window public MainWindow() InitializeComponent(); InitListbox(); private void InitListbox() listbox1.items.add("hans-peter Jung"); listbox1.items.add("katharina Witt"); listbox1.items.add("franz Hasler"); listbox1.items.add("rolf Ursprung"); listbox1.items.add("ulrich Tannenbaum"); Das Füllen der ListBoxim C#-Code ist flexibler und erlaubt die Erzeugung der Inhalte zur Laufzeit. Dafür benötigen wir den Namen der Listbox(listBox1). 9

10 Manipulieren der Elemente in der ListBox Über den Namen der ListBox (listbox1) können die Inhalte der ListBoxzur Laufzeit verändert, neue Elemente eingefügt, oder bestehende Elemente aus der Liste gelöscht werden. Ein Remove-Button kann zum Beispiel zum Löschen des ausgewählten Elements aus der ListBoximplementiert werden. 10

11 Löschen des selektierten Elements aus der ListBox private void btn_remove(object sender, EventArgs e) int selectedindex = listbox1.selectedindex; try listbox1.items.removeat(selectedindex); catch MessageBox.Show("Kein Element ist selektiert"); Der Ereignis-Handler des Remove-Button löscht das ausgewählte Element aus der ListBox. Falls kein Element ausgewählt ist, erscheint eine Fehlermeldung. 11

12 Verwendung der ComboBox 12

13 Erstellen der ComboBox <Window x:class="combobox1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="150" Width="225"> <StackPanel Margin="10"> <ComboBox Name="comboBox1" Margin="5" Width="180"/> <Button Click="btn_Add" VerticalAlignment="Top" Margin="5" Width="90"> Add Item</Button> <Button Click="btn_Remove" VerticalAlignment="Top" Margin="5" Width="90"> Remove Item</Button> </StackPanel> </Window> Das Erzeugen einer ComboBoxfunktioniert genau gleich wie bei einer ListBox. Im Beispiel wird die ComboBox im C# Code gefüllt. 13

14 Erstellen der ComboBox using System; using System.Windows; namespace combobox1 public partial class MainWindow : Window public MainWindow() InitializeComponent(); InitComboBox(); combobox1.selectedindex = 4; private void InitComboBox() combobox1.items.add("arial"); combobox1.items.add("bookman"); combobox1.items.add("calibri"); combobox1.items.add("deja Vu"); combobox1.items.add("elephant"); combobox1.items.add("franklin"); combobox1.items.add("garamond"); Die ComboBoxwird auf die genau gleiche Weise gefüllt wie eine ListBox. 14

15 Erstellen der ComboBox private void btn_remove(object sender, EventArgs e) int selectedindex = combobox1.selectedindex; try combobox1.items.removeat(selectedindex); catch MessageBox.Show("Kein Element ist selektiert"); Auch bei der ComboBoxkönnen zur Laufzeit Elemente eingefügt und gelöscht werden. private void btn_add(object sender, EventArgs e) combobox1.items.add("neues Element"); 15

16 Verwendung der ListView 16

17 Erstellen der ListView <Window x:class="tabelle1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="475"> Die ListView benötigt zur <DockPanel> Darstellung intern ein <ListView Name="listView1" Margin="10"> GridView, welchesdie <ListView.View> verschiedenen Spalten der Tabelle definiert. <GridView> <GridView.Columns> <GridViewColumn Header="Nachname" Width="120" DisplayMemberBinding="Binding Path=Nachname"/> <GridViewColumn Header="Vorname" Width="120" DisplayMemberBinding="Binding Path=Vorname" /> <GridViewColumn Header="Beruf" Width="120" DisplayMemberBinding="Binding Path=Beruf"/> <GridViewColumn Header="Jahrgang" Width="80" DisplayMemberBinding="Binding Path=Jahrgang" /> </GridView.Columns> </GridView> </ListView.View> </ListView> </DockPanel> </Window> 17

18 Initialisieren der Daten der ListView using System.Collections.ObjectModel; using System.ComponentModel; using System.Windows; namespace tabelle1 public partial class MainWindow : Window public MainWindow() InitializeComponent(); listview1.itemssource = CreatePersons(); Die ListView hat einen Datenspeicher ItemsSource, welcherden Inhaltder ListViewenhält. Auch hier funktioniert die Zuordnung über den Namen der ListView (listview1). 18

19 Initialisieren der Daten der ListView Die Daten der Tabelle werden aus einer Liste (ObservableCollection) geholt. Eine ObservableCollection teilt dem GUI automatisch mit, wenn neue Elemente hinzugefügt oder Elemente gelöscht werden. private ObservableCollection<Person> CreatePersons() ObservableCollection<Person> liste = new ObservableCollection<Person>(); liste.add(new Person("Curie", "Marie", 1867,"Physik, Chemie")); liste.add(new Person("Herwegh", "Georg",1817,"Literatur")); liste.add(new Person("Storm", "Theodor", 1817, "Literatur")); liste.add(new Person("Einstein", "Albert", 1879, "Physik"));... CreatePersons() erzeugtden DatenInhalt der ListView. return liste; 19

20 Die Klasse Person public class Person // Konstruktor public Person(string n, string v, int j, string b ) this.nachname = n; this.vorname = v; this.jahrgang = j; this.beruf = b; Person ist eine Klasse mit den Eigenschaften Nachname, Vorname, Jahrgang und Beruf. // Eigenschaften private string name; public string Nachname get return name; set name = value;... 20

21 Datenänderung in der ListView Die Komponente ListView lässt keine direkte Datenänderung zu. Trotzdem können die Inhalte der ListView(zum Beispiel via separater Textfelder) geändert werden. Dies wird erreicht, wenn die Komponenten (ListViewund TextFelder) auf die selben Daten gebunden wurden. 21

22 Datenänderung in der ListView <GridViewColumn Header="Nachname" Width="120" DisplayMemberBinding="Binding Path=Nachname"/> <GridViewColumn Header="Vorname" Width="120" DisplayMemberBinding="Binding Path=Vorname" /> <GridViewColumn Header="Beruf" Width="120" DisplayMemberBinding="Binding Path=Beruf"/> <GridViewColumn Header="Jahrgang" Width="80" DisplayMemberBinding="Binding Path=Jahrgang" /> Das Binding ist für die ListView und die TextBox jeweils identischzeigtauf die gleichen Daten.... <Label Width="80">Nachname</Label> <TextBox Width="100" Margin="3" Text="Binding Path=Nachname" /> <Label Width="80">Vorname</Label> <TextBox Width="100" Margin="3" Text="Binding Path=Vorname" />... 22

23 Die Klasse Person public class Person : INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; private string name; public string Nachname get return name; set name = value; OnPropertyChanged(new PropertyChangedEventArgs("Nachname")); private string vorname; public string Vorname get return vorname; set Person muss dann eine Klasse mit überwachten Eigenschaften (Nachname, Vorname, Jahrgang, Beruf) sein, so dass allfällige Änderungen an das GUI gemeldet werden. 23

24 Datenänderung in der ListView Es können auf diese Weise auch Personen gelöscht, geändert oder neue Personen eingefügt werden. Die Daten von bestehenden oder neu hinzugefügten Personen können beliebig verändert werden. private void Btn_Remove(object sender, RoutedEventArgs e) int selectedindex = listview1.selectedindex; try liste.removeat(selectedindex); catch MessageBox.Show("Kein Element ist selektiert"); Der Event-Handler des Löschen-Buttons entfernt die aktuell ausgewählte Person. 24

25 Verwendung des DataGrid 25

26 Datenänderung im DataGrid Im Unterschied zur ListViewkönnen die Daten in einem DataGriddirekt editiert werden. Die Zellen des DataGrid sind editierbar. 26

27 Erzeugen eines DataGrid: XAML-Code <Window x:class="datagrid1.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="500"> <DockPanel> <DataGrid Name="dataGrid" AlternatingRowBackground="BlanchedAlmond"/> </DockPanel> </Window> Das DataGridwird an die Liste der Personen gebunden. AlternatingRowBackgrounderzeugt das zeilenweise gestreifte Muster. 27

28 Erzeugen des DataGrid Inhalts: C#-Code public partial class MainWindow : Window public MainWindow() InitializeComponent(); datagrid.itemssource = getpersons(); Das DataGridwird mit Persons, einer Liste von Personen gefüllt. getpersons() erzeugt diese Liste. public ObservableCollection<Person> getpersons() List<Person> persons = new List<Person>(); persons.add(new Person Nachname = "Curie", Vorname = "Marie", Jahrgang = 1867, Beruf = "Physik, Chemie" ); persons.add(new Person Nachname = "Einstein", Vorname = "Albert", Jahrgang = 1879, Beruf = "Physik" );... 28

29 Darstellung von bool-werten im DataGrid public class Person : INotifyPropertyChanged private string name; public string Nachname get return name; set private bool angemeldet; public bool Angemeldet get return angemeldet; set bool-typen werden im DataGridautomatisch als CheckBoxdargestellt. Label haben diese Eigenschaft nicht, weshalb die Ausgabe unterhalb von Selektierte Zeile True lautet. 29