If you can't read please download the document
Upload
haanh
View
237
Download
3
Embed Size (px)
Citation preview
WPF Steuerelemente Listbox, ComboBox
WPF Steuerelemente ComboBox, ListView,
Dr. Beatrice Amrhein
berblick
Einfhrung Listen ComboBox Tabellen Tabellen
Nach dem Handbuch der .NET 4.0 2Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
EinfhrungEinfhrung
Nach dem Handbuch der .NET 4.0
EinfhrungEinfhrung
3Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Listen- und Tabellen-Elemente Listen und Tabellen-Elemente sind Steuerelemente, welche eine ganze Liste von Eintrgen (oder Objekten mit Eigenschaften) darstellen knnen. Zum Teil werden diese benutzt, um aus einer Liste von Objekten eines auszuwhlen, zum Teil auch direkt um die Daten (in einer Tabelle) zu manipulieren.
Nach dem Handbuch der .NET 4.0
ElementeElemente sind Steuerelemente, welche eine ganze Liste von Eintrgen (oder Objekten mit Eigenschaften)
Zum Teil werden diese benutzt, um aus einer Liste von Objekten eines auszuwhlen, zum Teil auch direkt um die Daten (in einer
4Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Die wichtigsten Listen- und TabellenSteuer-Element VerwendungListBox Auswahl von einem oder mehreren Elementen aus einer ListeComboBox Auswahl von einem Element aus einer ListeListView Darstellung einer Tabelle (keinDataGrid Darstellung einer Tabelle mit EditierTreeView Darstellung einer Baumstruktur (z.B. fr Auswahl oder Navigation)
Nach dem Handbuch der .NET 4.0
ListBox ComboBox ListView
und Tabellen-Elemente
Auswahl von einem oder mehreren Elementen aus einer ListeAuswahl von einem Element aus einer ListeDarstellung einer Tabelle (kein Editieren mglich)Darstellung einer Tabelle mit Editier-Mglichkeiten
einer Baumstruktur (z.B. fr Auswahl oder Navigation)
5Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
ListView/DataGrid TreeView
Verwendung der ListBoxListBoxVerwendung der ListBoxListBox
6
Erstellen der ListBox im XAML
7Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Code geschehen.
Erstellen der ListBox im XAML
Width="200" Margin="20,10"/>
8Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Code erzeugt, dann bleibt die XAML-braucht dann auf jeden Fall einen Namen (hier listBox1),
Erstellen der ListBox im C#-Codepublic partial class MainWindow : Window{
public MainWindow(){
InitializeComponent();InitListbox();
}private void InitListbox(){
personListBox.Items.Add("Hans-Peter Jung"personListBox.Items.Add("Hans-Peter Jung"personListBox.Items.Add("Katharina Witt"personListBox.Items.Add("Franz HaslerpersonListBox.Items.Add("Rolf UrsprungpersonListBox.Items.Add ("Ulrich Tannenbaum
}}
Nach dem Handbuch der .NET 4.0
Das Fllen der ListBox im C#-Code ist flexibler und erlaubt die Erzeugung der Inhalte zur Laufzeit. Dafr bentigen wir den Namen der
Code
Peter Jung");Peter Jung");Katharina Witt");
Hasler");Ursprung");
Tannenbaum");
9Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Code ist flexibler und erlaubt die Erzeugung der Inhalte zur Laufzeit. Dafr bentigen wir den Namen der Listbox (personListBox).
Erstellen der ListBox im C#-Code
public partial class MainWindow : Window{
public MainWindow(){
InitializeComponent();InitListbox();
}
Eine andere Mglichkeit die Liste zu fllen ist mit Hilfe von C# Listen wie im Beispiel hier.
private void InitListbox(){List data = new List();data.Add("Hans-Peter Jung");data.Add("Katharina Witt");data.Add("Franz Hasler");data.Add("Rolf Ursprung");data.Add("Ulrich Tannenbaum");personListBox.ItemsSource = data;
}}
Nach dem Handbuch der .NET 4.0
CodeEine andere Mglichkeit die Liste zu fllen ist mit Hilfe von C# Listen wie im
>();
10Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Die Daten-Liste ist die ItemsSource (DatenQuelle) der ListBox.
Manipulieren der Elemente in der ber den Namen der ListBox (listBox1) Laufzeit verndert, neue Elemente eingefgt, oder bestehende Elemente aus der Liste gelscht werden.
Nach dem Handbuch der .NET 4.0
Ein Remove-Button kann zum Beispiel zum Lschen des ausgewhlten Elements aus der ListBox implementiert werden.
Manipulieren der Elemente in der ListBox(listBox1) knnen die Inhalte der ListBox zur Laufzeit verndert, neue Elemente eingefgt, oder bestehende Elemente
11Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Button kann zum Beispiel zum Lschen des ausgewhlten Elements
Lschen des selektierten Elements aus der private void btn_Remove(object sender, EventArgs{
int selectedIndex = listBox1.SelectedIndex;try {
listBox1.Items.RemoveAt(selectedIndex}catch { MessageBox.Show("Kein Element ist selektiert"
}
Nach dem Handbuch der .NET 4.0
Der Ereignis-Handler des Remove-Button lscht das ausgewhlte Element aus der ListBox. Falls kein Element ausgewhlt ist, erscheint eine Fehlermeldung.
Lschen des selektierten Elements aus der ListBoxEventArgs e)
= listBox1.SelectedIndex;selectedIndex);
"Kein Element ist selektiert"); }
12Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Verwendung der Verwendung der ComboBoxVerwendung der Verwendung der ComboBox
13
Erstellen der ComboBox
FontSize="12"/>
14Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
funktioniert gleich wie im C# Code gefllt.
Erstellen der ComboBoxusing System;using System.Windows;namespace combobox1{
public partial class MainWindow : Window{
public MainWindow(){
InitializeComponent();InitComboBox();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");
}
Nach dem Handbuch der .NET 4.0
Window
Die ComboBox wird auf die gleiche Weise gefllt wie eine ListBox.
););););););
15Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Erstellen der ComboBoxpublic partial class MainWindow : Window{
public MainWindow(){
InitializeComponent();InitComboBox();fontComboBox.SelectedIndex = 4;
}private void InitComboBox(){{
List data = new List();
16Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Verwendung der ListViewListViewVerwendung der ListViewListView
17
Erstellen der ListView
Width="120"Binding Path=Vorname}" />
="120"Binding Path=Beruf}"/>Width="80"
Binding Path=Jahrgang}" />
Die ListView bentigt zurDarstellung intern einGridView, welches die verschiedenen Spalten derTabelle definiert.
Binding Path=Jahrgang}" />
18Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Initialisieren der Daten der ListViewusing System.Collections.ObjectModel;using System.ComponentModel;using System.Windows;namespace tabelle1{
public partial class MainWindow : Window{public MainWindow(){ InitializeComponent();InitializeComponent();listView1.ItemsSource = CreatePersons(); }
Nach dem Handbuch der .NET 4.0
ListView
Auch die ListView hat eine ItemsSource (Daten-Quelle), welcher den Inhalt der ListView definiert. ();
19Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Auch hier funktioniert die Zuordnung ber den Namen der ListView(listView1).
Initialisieren der Daten der ListView
private ObservableCollection CreatePersons{
ObservableCollection liste = new ObservableCollectionliste.Add(new Person("Curie", "Marie", 1867,liste.Add(new Person("Herwegh", "Georg",1817,liste.Add(new Person("Storm", "Theodor", 1817,
Die Daten der Tabelle werden aus einer Liste (ObservableCollection teilt dem GUI automatisch mit, wenn neue Elemente hinzugefgt oder Elemente gelscht werden.
liste.Add(new Person("Einstein", "Albert", 1879, . . .
return liste;}
Nach dem Handbuch der .NET 4.0
ListView
CreatePersons()ObservableCollection();
, 1867,"Physik, Chemie"));,1817,"Literatur"));, 1817, "Literatur"));
Die Daten der Tabelle werden aus einer Liste (ObservableCollection) geholt. Eine teilt dem GUI automatisch mit, wenn neue Elemente hinzugefgt
, 1879, "Physik"));
20Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
CreatePersons() erzeugt den DatenInhalt der ListView.
Die Klasse Personpublic class Person{
// Konstruktorpublic Person(string n, string v, int j, string{
this.Nachname = n;this.Vorname = v;this.Jahrgang = j;this.Beruf = b;
}// Eigenschaftenprivate string name;public string Nachname{
get { return name; }set { name = value; }
} . . .
Nach dem Handbuch der .NET 4.0
string b )
Person ist eine Klasse mitden EigenschaftenNachname, Vorname, Jahrgang und Beruf (so wiein der Tabelle angezeigt).
21Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Datennderung in der ListViewDie Komponente ListView lsst keine direkte Datennderung zu.Trotzdem knnen die Inhalte der ListViewTextFelder) gendert werden.Dies wird erreicht, wenn die Steuerelemente (die selben Daten gebunden wurden.
Nach dem Handbuch der .NET 4.0
ListViewlsst keine direkte Datennderung zu.ListView (zum Beispiel via separater
Dies wird erreicht, wenn die Steuerelemente (ListView und TextFelder) auf
22Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Datennderung in der ListView
=Vorname}" />=Beruf}"/>=Jahrgang}" />
Binding Path=Nachname}" />
Das Binding ist fr die ListViewund die TextBox jeweilsidentisch zeigt auf die gleichen Daten.
Binding Path=Nachname}" />Binding Path=Vorname}" />
23
Die Klasse Personpublic class Person : INotifyPropertyChanged{ public event PropertyChangedEventHandler PropertyChanged
private string name;public string Nachname{ get { return name; }set {name = value;OnPropertyChanged(new PropertyChangedEventArgsOnPropertyChanged(new PropertyChangedEventArgs}}private string vorname;public string Vorname{ get { return vorname; }set { . . . }}
. . . }
Nach dem Handbuch der .NET 4.0
PropertyChanged;
PropertyChangedEventArgs("Nachname"));
Person muss eine Klasse mitberwachten Eigenschaften(Nachname, Vorname, Jahrgang, Beruf) sein, so dass allflligenderungen an das GUI gemeldetwerden.
PropertyChangedEventArgs("Nachname"));
24Nach dem Handbuch der .NET 4.0-Programmierung, Rolf Wenger, 2012
Datennderung in der ListViewEs knnen auf diese Weise auch Personen gelscht, gendert oder neue Personen eingefgt werden.
private void Btn_Remove(object sender, RoutedEventArgs{
int selectedIndex = listView1.SelectedIndex;try{ liste.RemoveAt(selectedIndex); }catch { MessageBox.Show("Kein Element ist selektiert"}
ListViewEs knnen auf diese Weise auch Personen gelscht, gendert oder neue
Die Daten von bestehenden oder neu hinzugefgten Personen knnen beliebig verndert werden.
RoutedEventArgs e)= listView1.SelectedIndex;
"Kein Element ist selektiert"); }
25
Der Event-Handler des Lschen-Buttons entfernt die aktuell ausgewhlte Person.
Verwendung des DataGridDataGridVerwendung des DataGridDataGrid
26
Datennderung im DataGridIm Unterschied zur ListView knnen die Daten in einem editiert werden.
DataGridknnen die Daten in einem DataGrid direkt
Die Zellen des DataGrid
27
Die Zellen des DataGridsind editierbar.
Erzeugen eines DataGrid: XAML
Das DataGrid wird an die Liste der Personen
28
Das DataGrid wird an die Liste der Personen gebunden. AlternatingRowBackground erzeugt das zeilenweise gestreifte Muster.
Erzeugen des DataGrid Inhalts: C#public partial class MainWindow : Window{
public MainWindow(){
InitializeComponent();dataGrid.ItemsSource = CreatePersons();
}public ObservableCollection CreatePersons{
ObservableCollection persons = ObservableCollection persons = persons.Add(new Person
{ Nachname = "Curie", Vornamepersons.Add(new Person
{ Nachname = "Einstein", Vorname. . .
}
Inhalts: C#-Code
();
CreatePersons()> persons = new ObservableCollection();
Das DataGrid wird mit Persons, einer Liste von Personen gefllt.getPersons() erzeugt diese Liste.
> persons = new ObservableCollection();Vorname = "Marie", Angemeldet = true });
Vorname = "Albert", Angemeldet = true });
29
Darstellung von bool-Werten im public class Person : INotifyPropertyChanged{// Ereignispublic event PropertyChangedEventHandler// Eigenschaftenprivate string nachname;public string Nachname{get { return nachname; }setset{
nachname = value; OnPropertyChanged(}
}. . . protected void OnPropertyChanged(PropertyChangedEventArgs{if (PropertyChanged != null){ PropertyChanged(this, e); }
}}
Werten im DataGridINotifyPropertyChanged
PropertyChangedEventHandler PropertyChanged;
Damit die Daten im Fenster bei nderungen automatisch richtig angezeigt werden, mssen die Eigenschaften der Person berwachteProperties sein.
(new PropertyChangedEventArgs("Name"));
PropertyChangedEventArgs e)
30
Darstellung von bool-Werten im public class Person : INotifyPropertyChanged{
private string name;public string Nachname{get { return name; }set { . . . }
}. . . private bool angemeldet;public bool Angemeldetpublic bool Angemeldet{
get { return angemeldet; }set { . . . }
}. . . }
Werten im DataGridINotifyPropertyChanged
bool-Typen werden im DataGrid automatisch als CheckBox dargestellt. Label haben diese Eigenschaft nicht, weshalb die Ausgabe unterhalb von Selektierte Zeile True lautet.
31