tW& ^ µ o u v - sws.bfh.chamrhein/Skripten/Info2/08.Grids.pdf · ] Á ] Z ] P v > ] v r µ v d o o...

download tW& ^ µ o u v - sws.bfh.chamrhein/Skripten/Info2/08.Grids.pdf · ] Á ] Z ] P v > ] v r µ v d o o v ^ µ r o u v s Á v µ v P ... s Á v µ v P ...

If you can't read please download the document

Transcript of tW& ^ µ o u v - sws.bfh.chamrhein/Skripten/Info2/08.Grids.pdf · ] Á ] Z ] P v > ] v r µ v d o o...

  • 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