{"id":55000286,"date":"2021-10-01T00:00:00","date_gmt":"2022-02-15T13:16:57","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=286"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Navigieren_mit_CollectionViewSource","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Navigieren_mit_CollectionViewSource\/","title":{"rendered":"Navigieren mit CollectionViewSource"},"content":{"rendered":"

Bisher haben wir oft mit Detailansichten von Datensätzen wie beispielsweise für Kunden oder Produkten gearbeitet, die zum Anlegen oder Bearbeiten eines einzelnen Datensatzes geeignet waren. Von Access kennen Sie die Möglichkeit, mit den Navigationsschaltflächen auch in solchen Detailformularen zu navigieren und von einem zum anderen Datensatz zu wechseln, ohne zwischendurch zu einem Übersichtsformular zu wechseln. In diesem Artikel wollen wir zeigen, wie Sie das unter WPF so abbilden können, wie es auch unter Access möglich ist. Dabei nutzen wir die Möglichkeiten der CollectionViewSource. <\/b><\/p>\n

Ziel des Artikels<\/h2>\n

In diesem Artikel wollen wir einer Seite, die eine Detailansicht eines Datensatzes – hier eines Kunden – anzeigt, Navigationsschaltflächen wie von den Formularen von Access bekannt hinzufügen. Die WPF-Seite besteht dabei grob aus einem Grid<\/b>-Element, das wiederum zwei weitere Grid<\/b>-Element aufnimmt. Es definiert außerdem im Element Window.Resources <\/b>ein CollectionViewSource<\/b>-Element, das wir im Code behind mit den anzuzeigenden Daten füllen:<\/p>\n

<Window x:Class=\"MainWindow\" ... Title=\"MainWindow\" Height=\"450\" Width=\"800\">\r\n     <Window.Resources>\r\n         ...\r\n         <CollectionViewSource x:Key=\"kundeViewSource\"><\/CollectionViewSource>\r\n     <\/Window.Resources><\/pre>\n
Danach folgt die Definition des übergeordneten Grid<\/b>-Elements:<\/p>\n
     <Grid>\r\n         <Grid.RowDefinitions>\r\n             <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n             <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n             <RowDefinition Height=\"*\"><\/RowDefinition>\r\n         <\/Grid.RowDefinitions><\/pre>\n
Das erste untergeordnete Grid<\/b>-Element erhält als DataContext <\/b>das als statische Ressource hinterlegte CollectionViewSource<\/b>-Element sowie einige Zeilen für die Anzeige der einzelnen Felder und Spalten zur Aufteilung von Bezeichnungsfeldern und gebundenen Steuerelementen:<\/p>\n
         <Grid DataContext=\"{StaticResource kundeViewSource}\">\r\n             <Grid.RowDefinitions>\r\n                 <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n                 ...\r\n                 <RowDefinition Height=\"*\"><\/RowDefinition>\r\n             <\/Grid.RowDefinitions>\r\n             <Grid.ColumnDefinitions>\r\n                 <ColumnDefinition Width=\"Auto\"><\/ColumnDefinition>\r\n                 <ColumnDefinition Width=\"Auto\"><\/ColumnDefinition>\r\n                 <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\r\n             <\/Grid.ColumnDefinitions><\/pre>\n
Danach folgen die Definitionen für Steuerelemente, die in den einzelnen Zeilen und Spalten angezeigt werden sollen – zum Beispiel für die ID und den Vornamen:<\/p>\n
             <Label Content=\"ID:\" Grid.Column=\"0\" \/>\r\n             <TextBox x:Name=\"txtID\" Grid.Column=\"1\" HorizontalAlignment=\"Left\"                 Text=\"{Binding ID, Mode=TwoWay}\" Width=\"50\" IsEnabled=\"False\" BorderBrush=\"Transparent\" \/>\r\n             <Label Content=\"Vorname:\" Grid.Column=\"0\" Grid.Row=\"2\" \/>\r\n             <TextBox x:Name=\"txtVorname\" Grid.Column=\"1\" Grid.Row=\"2\" Width=\"202\" \r\n                 Text=\"{Binding Vorname, Mode=TwoWay, ValidatesOnDataErrors=True}\" Margin=\"2,2,0,3\" \/>\r\n             ...\r\n         <\/Grid><\/pre>\n
Das zweite untergeordnete Grid<\/b>-Element enthält ein StackPanel<\/b>-Element mit den vier Schaltflächen und dem Textfeld zur Anzeige der Position des  Datensatzzeigers beziehungsweise zur Eingabe des anzuzeigenden Datensatzes, das wir im folgenden Abschnitt beschreiben.<\/p>\n
Aufbau der Navigationssteuerelemente<\/h2>\n
Die Navigationsschaltflächen wollen wir genau wie unter Access abbilden. Das heißt, dass wir von links nach rechts die folgenden Steuerelemente hinzufügen wollen:<\/p>\n