13.8 Projektvorlage Grid
In diesem Abschnitt wird das Projekt MAProjektvorlageGrid mithilfe der Projektvorlage Grid erzeugt. Es kommen wiederum die speziellen Styles für Windows Store-Apps zum Einsatz. Diese Projektvorlage eignet sich zur Anzeige von Elementen, die in verschiedenen Gruppen organisiert sind. Zu jedem Element können dann Detailinformationen angezeigt werden.
Zunächst die Anzeige des Projektmappen-Explorers in Abbildung 13.13.
Abbildung 13.13 Projekt »MAProjektvorlageGrid«, Dateien
In der Projektvorlage wurden drei Seitenvorlagen genutzt:
- Gruppierte Elemente für die Datei GroupedItemsPage.xaml,
- Gruppendetails für die Datei GroupDetailPage.xaml,
- und Elementdetails für die Datei ItemDetailPage.xaml.
Nach dem Start der Anwendung erscheinen zunächst die gruppierten Elemente. Man kann sich hier zum Beispiel mithilfe der Pfeiltasten nach rechts und links durch die verschiedenen Gruppen bewegen. In Abbildung 13.14 sehen Sie Element 5 aus Gruppe 1 sowie die Elemente 1 und 3 aus Gruppe 2. Die Elemente sind innerhalb jeder Gruppe durchnummeriert.
Abbildung 13.14 Projekt »MAProjektvorlageGrid«, Gruppierte Elemente
Nach der Auswahl eines Gruppenkopfs (hier: Group Title 2)werden die Details der betreffenden Gruppe angezeigt. In Abbildung 13.15 sehen Sie Gruppe 2. Links einige Informationen zur Gruppe insgesamt, rechts die Elemente 1 und 2 dieser Gruppe. Über den Zurück-Button würde man wieder auf die vorherige Ansicht gelangen.
Abbildung 13.15 Projekt »MAProjektvorlageGrid«, Gruppendetails
Nach der Auswahl eines bestimmten Elements (hier: Item Title 2) werden die Details des betreffenden Elements angezeigt. In Abbildung 13.16 sehen Sie Element 2 aus Gruppe 2. Mithilfe der Pfeiltasten kann man sich innerhalb des Elements bewegen. Die Pfeile am linken und rechten Rand führen direkt zu den Nachbarelementen, also Element 1 beziehungsweise Element 3 der Gruppe 2.
Abbildung 13.16 Projekt »MAProjektvorlageGrid«, Elementdetails
In der Projektdatei SampleDataSource.vb (siehe auch Abbildung 13.13) finden Sie die Klassen, mit deren Hilfe die angezeigten Beispieldaten erzeugt werden. Falls Sie die Beispieldaten gegen eigene Daten austauschen möchten, die einer ähnlichen Hierarchie folgen, so ist dies die geeignete Stelle. Scrollen Sie in der Datei SampleDataSource.vb zum Konstruktor der Klasse SampleDataSource und ändern Sie zum Beispiel den Code für die Gruppe 3 wie folgt:
...
Dim group3 = New SampleDataGroup("G3",
"G3 Titel",
"G3 Untertitel",
"Assets/MediumGray.tif",
"G3 Beschreibung")
group3.Items.Add(New SampleDataItem("G31",
"G31 Titel",
"G31 Untertitel",
"Assets/MediumGray.tif",
"G31 Beschreibung",
"G31 Inhalt",
group3))
group3.Items.Add(New SampleDataItem("G32",
"G32 Titel",
"G32 Untertitel",
"Assets/MediumGray.tif",
"G32 Beschreibung",
"G32 Inhalt",
group3))
Me.AllGroups.Add(group3)
...
Listing 13.16 Projekt »MAProjektvorlageGrid«, Datei SampleDataSource.vb
Achten Sie beim Auffüllen der Daten darauf, dass der erste Parameter der beiden abgebildeten Konstruktoren eine projektweit eindeutige ID erhält, hier: G3, G31 und G32. Auf der Startseite sieht anschließend das erste Element aus Gruppe 3 aus wie in Abbildung 13.17.
Abbildung 13.17 Projekt »MAProjektvorlageGrid«, geänderte Inhalte
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.