Mit Visual Studio 2013 ist das formals Expression Blend genannte XAML UI Design Werkzeug als Beigabe gratis. Die Nachfrage nach Schulungen zu Blend für Visual Studio 2013 ist nach wie vor vorhanden. Eine Blend Kurs Teilnehmer Frage lautet “Wie kann man eine Mehrzeilige oder mehrspaltige Liste erstellen. Ala einem METRO Gridview.
Im ersten Schritt wird einem WPF Window ein Listbox Steuerelement hinzugefügt. Um Daten anzuzeigen wird eine Sample Data Source erzeugt.
Die Collection wird umbenannt in Sessel (pural und singular ident). Die Eigenschaften werden per Click in den Namen umbenannt und je Property der Typ (Image, String und Number) zugewiesen.
Per Drag und Drop der Sessel Collection auf das Listbox Steuerelement im Blend Designer wird die Bindung (Datacontext) erzeugt. Gleichzeitig wird das Datatemplate für die Darstellung der Listitems erzeugt.
Das Datatemplate lässt visuell editieren. Das Kontext Menü Edit Additional Templates – Edit generated Item Templates- Current wechselt den Editor in den Template Modus.
Dort kann z.B, die orientation des Stackpanels auf horizontal geändert oder das ganze in eine Border mit runden Ecken gruppiert werden.
Etwas diffizieler ist eine mehrspaltige Darstellung. Dazu muss das Template für das Itemspanel per Kontext Menü generiert werden. Edit Additional Templates- Edit Layout of items- edit a copy.
Man erkennt nun das die Liste per VirtualizingStackpanel gebildet wird.
Die vor allem aus Performance Gründen bei langen Listen. Als nächstes wird per Kontext Menü des VirtualizingStackPanels dieses in ein Wrap Panel umgewandelt. Change Layout Type – Wrappanel.
Um die Ergebnisliste von links nach rechts scrollbar zu gestalten, wird die Eigenschaft Orientation des Wrappanels auf vertical geändert.
Bis jetzt sieht die Liste noch aus wie bisher. Das liegt an den Standard Werten der Scrollviewer Einstellungen. Die horizontale Scrollbar ist ausgeblendet und die vertikale sichtbar. Wir brauchen es genau anders herum.
Nun das Ergebnis der laufenden WPF Anwendung. Horizontales Scrollen, auch per Touch.
