WPF Kachel Liste

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.

image

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.

image

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.

image

Das Datatemplate lässt visuell editieren. Das Kontext Menü Edit Additional Templates – Edit generated Item Templates- Current wechselt den Editor in den Template Modus.

image

Dort kann z.B, die orientation des Stackpanels auf horizontal geändert  oder das ganze in eine Border mit runden Ecken gruppiert werden.

image

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.

image

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.

image

Nun das Ergebnis der laufenden WPF Anwendung. Horizontales Scrollen, auch per Touch.

image

Kommentare sind geschlossen