{"id":55000068,"date":"2016-12-01T00:00:00","date_gmt":"2020-03-27T19:24:02","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=68"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"EDM_Kunden_verwalten_mit_Ribbon","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/EDM_Kunden_verwalten_mit_Ribbon\/","title":{"rendered":"EDM: Kunden verwalten mit Ribbon"},"content":{"rendered":"

Bisher haben wir in diesem Magazin nur einzelne Beispiele zur Darstellung von Daten aus Tabellen geliefert. Diesmal wollen wir einen Schritt weiter gehen: Wir erstellen eine WPF-Anwendung, die ein eigenes Ribbon enthält und mit diesem die Steuerung einiger Funktionen zur Auflistung von Kunden sowie zum Bearbeiten, Hinzufügen und Löschen von Kundendatensätzen ermöglicht. Dabei nutzen wir als Container für die angezeigten Seiten mit der Kundenliste und den Kundendetails ein Frame-Objekt. Damit können wir, wenn mehrere Benutzer geöffnet sind, sogar durch die entsprechenden Seiten navigieren.<\/b><\/p>\n

Dabei wollen wir zunächst eine Kundenübersicht und später eine Seite zum Anlegen eines neuen Kunden über entsprechende Ribbon-Steuerelemente sichtbar machen. Eine weitere Schaltfläche soll den aktuell in der Kundenübersicht markierten Kunden löschen.<\/p>\n

Das heißt, dass wir zunächst ein Ribbon im Fenster MainWindow <\/b>unserer Beispielanwendung benötigen, das drei Schaltflächen für die gewünschte Navigation in den Kundendatensätzen und eine Schaltfläche zum Schließen des Fensters enthält. Dies sollte später so wie in Bild 1 aussehen.<\/p>\n

\"Erster<\/p>\n

Bild 1: Erster Entwurf des Ribbons<\/span><\/b><\/p>\n

Um dies zu realisieren, legen Sie zunächst ein neues Projekt des Typs Visual C#|WPF-Anwendung <\/b>namens NavigationMitRibbons <\/b>an. Um die Ribbons zu definieren, benötigen Sie einen neuen Verweis, den Sie über den Verweis-Manager <\/b>(Menü-Eintrag Projekt|Verweise<\/b>) hinzufügen. Der Verweis heißt System.Windows.Controls.Ribbons<\/b>.<\/p>\n

Da wir dem Window<\/b>-Element im Kopf ein Ribbon und darunter die Steuerelemente zur Anzeige der Artikel- und der Kundenübersicht hinzufügen wollen, legen wir zunächst ein Grid mit zwei Zeilen an. Diese definieren wir wie folgt:<\/p>\n

<Grid.RowDefinitions>\r\n     <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n     <RowDefinition><\/RowDefinition>\r\n<\/Grid.RowDefinitions><\/pre>\n
Anschließend fügen wir dem Grid ein Ribbon<\/b>-Element mit zwei Schaltflächen in verschiedenen Gruppen hinzu, das wir über das Attribut Grid.Row=”0″ <\/b>der ersten Ribbonzeile zuweisen (siehe Listing 1). Diesem fügen wir ein RibbonTab<\/b>-Element mit zwei RibbonGroup<\/b>-Elementen hinzu. Die erste Gruppe statten wir mit drei RibbonButton<\/b>-Elementen aus und die zweite mit einem RibbonButton<\/b>-Element. Die Schaltflächen versehen wir mit Attributen, die auf die jeweiligen Ereignismethoden verweisen. Außerdem legen wir mit der Eigenschaft LargeImageSource <\/b>den Namen jeweils einer Bilddatei fest, die im Ribbon für die jeweilige Schaltfläche angezeigt werden soll. Diese Bilder legen wir in einem Unterordner namens images <\/b>im Projektmappen-Explorer ab.<\/p>\n
<Ribbon Name=\"rbnMain\" Title=\"Beispielribbon\" Grid.Row=\"0\">\r\n     <RibbonTab Name=\"Tab1\" Header=\"Stammdaten\" KeyTip=\"A\">\r\n         <RibbonGroup Header=\"Kunden\">\r\n             <RibbonButton Name=\"btnKundenuebersicht\" Label=\"Kundenübersicht\" Click=\"btnKundenuebersicht_Click\" \r\n                 LargeImageSource=\"images\\users.png\"><\/RibbonButton>\r\n             <RibbonButton Name=\"btnNeuerKunde\" Label=\"Neuer Kunde\" Click=\"btnNeuerKunde_Click\" \r\n                 LargeImageSource=\"images\\user_add.png\"><\/RibbonButton>\r\n             <RibbonButton Name=\"btnKundeLoeschen\" Label=\"Kunde löschen\" Click=\"btnKundeLoeschen_Click\" \r\n                 LargeImageSource=\"images\\user_delete.png\" IsEnabled=\"false\"><\/RibbonButton>\r\n         <\/RibbonGroup>\r\n         <RibbonGroup Header=\"Allgemein\">\r\n             <RibbonButton Name=\"btnSchliessen\" Label=\"Schließen\" Click=\"btnSchliessen_Click\" \r\n                 LargeImageSource=\"images\\close.png\"><\/RibbonButton>\r\n         <\/RibbonGroup>\r\n     <\/RibbonTab>\r\n<\/Ribbon><\/pre>\n
Listing 1: Code für ein Ribbon mit Schaltflächen in verschiedenen Gruppen<\/span><\/b><\/p>\n
Seiten erstellen<\/h2>\n
Nun wollen wir die beiden Seiten erstellen, die durch einen Mausklick auf die beiden Ribbon-Einträge angezeigt werden sollen. Dazu legen Sie zunächst ein erstes neues Page<\/b>-Element an und nennen es Kundenuebersicht<\/b> (Strg + Umschalt + A<\/b>, dann Seite (WPF) <\/b>auswählen und den Namen unten angeben) – siehe Bild 2.<\/p>\n
\"Hinzufügen<\/p>\n
Bild 2: Hinzufügen eines Page-Elements<\/span><\/b><\/p>\n
Das Ergebnis ist ein transparentes, rechteckiges Objekt, für das weder Höhe noch Breite mit den üblichen Attributen Height <\/b>oder Width <\/b>festgelegt sind. Stattdessen finden wir die beiden Attribute d:DesignHeight <\/b>und d:DesignWidth<\/b>. Aber was sind das für Eigenschaften Eigenschaften, die mit d: <\/b>beginnen, sind Eigenschaften für die Design-Ansicht, die nur die Größe des Page<\/b>-Elements für die Entwurfsansicht markieren.<\/p>\n
Zur Laufzeit wird das Page<\/b>-Element ja ohnehin in das Frame<\/b>-Element eingebettet und nimmt dessen Größe an. Dementsprechend finden Sie im Page<\/b>-Element die beiden Eigenschaften d:DesignHeight <\/b>und d:DesignWidth<\/b>. Das Attribut mc:Ignorable=”d” <\/b>gibt dem Interpreter zu verstehen, dass Attribute mit führendem d <\/b>nicht interpretiert werden sollen:<\/p>\n
<Page x:Class=\"NavigationMitRibbons.Kundenuebersicht\" \r\n     ...\r\n     mc:Ignorable=\"d\" \r\n     d:DesignHeight=\"300\" d:DesignWidth=\"300\"\r\n     Title=\"Kundenuebersicht\"><\/pre>\n
Datenquelle<\/h2>\n
Als Datenquelle für dieses Beispiel verwenden wir wieder die Datenbank Bestellverwaltung<\/b>, die Sie bereits in weiteren Artikeln in diesem Magazin kennen gelernt haben. Dazu haben wir wieder ein Entity Data Model namens BestellverwaltungEntities <\/b>angelegt.<\/p>\n
Page mit Kunden füllen<\/h2>\n
Damit das Page<\/b>-Element die Kunden in einer entsprechenden Liste, hier in Form eines DataGrid<\/b>-Elements, anzeigt, stellen wir zunächst eine entsprechende Datenquelle in Form eines List<\/b>-Objekts in der Code behind-Datei Kundenuebersicht.xaml.cs <\/b>zur Verfügung, die wir innerhalb der Konstruktor-Methode der Klasse füllen (siehe Listing 2).<\/p>\n
public partial class Kundenuebersicht : Page {\r\n     BestellverwaltungEntities dbContext;\r\n     private List<Kunde> kunden;\r\n     public List<Kunde> Kunden {\r\n         get {\r\n             return kunden;\r\n         }\r\n         set {\r\n             kunden = value;\r\n         }\r\n     }\r\n     public Kundenuebersicht(int kundeID = 0) {\r\n         InitializeComponent();\r\n         dbContext = new BestellverwaltungEntities();\r\n         kunden = new List<Kunde>(dbContext.Kunden);\r\n         DataContext = this;\r\n         if (kundeID != 0) {\r\n             Kunde currentKunde = dbContext.Kunden.Find(kundeID);\r\n             dgKunden.SelectedItem = currentKunde;\r\n             dgKunden.ScrollIntoView(currentKunde);\r\n         }\r\n     }\r\n}<\/pre>\n
Listing 2: Code behind-Datei der Page-Klasse Kundenuebersicht.xaml<\/span><\/b><\/p>\n
In der Konstruktor-Methode der Klasse Kundenuebersicht <\/b>wird zunächst die Methode InitializeComponent<\/b> ausgeführt, um das Fenster entsprechend der XAML-Definition aufzubauen. Danach erstellen wir das Entity Data Model-Objekt dbContext <\/b>auf Basis der Klasse BestellverwaltungEntities<\/b>. Die Liste kunden<\/b>, die wir zuvor als privates List<\/b>-Objekt deklariert haben, füllen wir dann mit der Auflistung Kunden <\/b>des dbContext<\/b>-Objekts:<\/p>\n
kunden = new List<Kunde>(dbContext.Kunden);<\/pre>\n
Danach weisen wir dem Page<\/b>-Objekt mit der DataContext<\/b>-Eigenschaft als Datenherkunft die Code behind-Klasse selbst zu. Damit die Seite nun auf die Kunden-Liste aus der Variablen kunde<\/b> zugreifen kann, stellen wir diese noch mit einer öffentlichen Variablen namens Kunden<\/b> zur Verfügung:<\/p>\n
public List<Kunde> Kunden {\r\n     ...\r\n}<\/pre>\n
Desweiteren haben Sie sicher bemerkt, dass wir einen optionalen Parameter namens kundeID <\/b>für die Konstruktormethode angelegt haben. Diese wird in der if<\/b>-Bedingung interessant: Ist kundeID <\/b>nämlich nicht 0<\/b>, was geschieht, wann immer eine Kunden-ID übermittelt wird, dann liest die Methode den Kunden mit dieser ID in die Variable currentKunde <\/b>ein. Dieser wird dann im DataGrid als aktueller Kunde markiert. Die Methode ScrollIntoView<\/b> sorgt dann noch dafür, dass dieser Datensatz auch noch in den sichtbaren Bereich verschoben wird. Letzteres ist für Access\/VBA-Programmierer natürlich ein Traum – dort waren für eine solche Aktion durchaus größere Verrenkungen nötig.<\/p>\n
DataGrid-Element in Page anlegen<\/h2>\n
Schließlich wollen wir ein DataGrid<\/b>-Element im Page<\/b>-Element anlegen, das wie in Listing 3 definiert wird. Die Seite hat ja als Datenherkunft bereits die Code behind-Klasse erhalten. Damit brauchen wir für das DataGrid<\/b>-Element namens dgKunden <\/b>nur noch das Attribut ItemsSource <\/b>auf den Wert {Binding Kunden} <\/b>einzustellen.<\/p>\n
<Page x:Class=\"Bestellverwaltung.Kundenuebersicht\" ...  xmlns:local=\"clr-namespace:Bestellverwaltung\"\r\n       mc:Ignorable=\"d\" d:DesignHeight=\"300\" d:DesignWidth=\"300\" Title=\"Kundenuebersicht\">\r\n     <Grid>\r\n         <DataGrid x:Name=\"dgKunden\" ItemsSource=\"{Binding Kunden}\" AutoGenerateColumns=\"false\">\r\n             <DataGrid.Columns>\r\n                 <DataGridTextColumn Binding=\"{Binding Path=ID}\" Header=\"ID\"  \/>\r\n                 <DataGridTextColumn Binding=\"{Binding Path=Firma}\" Header=\"Firma\" \/>\r\n                 <DataGridTextColumn Binding=\"{Binding Path=Vorname}\" Header=\"Vorname\"  \/>\r\n                 <DataGridTextColumn Binding=\"{Binding Path=Nachname}\" Header=\"Nachname\" \/>\r\n             <\/DataGrid.Columns>\r\n         <\/DataGrid>\r\n     <\/Grid>\r\n<\/Page><\/pre>\n
Listing 3: Code für die Definition des Page-Elements zur Anzeige der Kundenübersicht<\/span><\/b><\/p>\n
Es verwendet dann die Auflistung Kunden <\/b>aus der Klasse Kunden-uebersicht.xaml.cs <\/b>als Datenquelle. Die Spalten sollen nicht automatisch erstellt werden, daher erhält AutoGenerateColumns <\/b>den Wert false<\/b>. Die Spalten legen wir unterhalb des Elements DataGrid.Columns <\/b>an, und zwar als DataGridTextColumn<\/b>-Elemente. Hier erhalten diese per Binding <\/b>eine Verknüpfung zum jeweiligen Feld der Datenherkunft sowie per Header<\/b> eine Spaltenüberschrift. Das Ergebnis soll anschließend wie in Bild 4 aussehen.<\/p>\n
\"Das<\/p>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t
\n\n\t\t\n\t\t