UX Entwicklung ohne Echtdaten in Windows 8.1

Für den Einstieg in eine Oberflächen Entwurfssprache ist es immer leichter mit einem Designer zu starten. Bekannt auch aus Visual Studio. Button aus Werkzeugleiste auf das Formular ziehen und doppelclicken und Ereignis Programmcode tippen. ( gerne als Pixelschupser bezeichnet). Nicht mehr ganz so leicht ist das mit z.B. Listensteuerelementen. Wenn die Struktur bekannt ist, im Sinne streng typisiert, dann kann ein Designer noch den Header und Dummy Zeilen darstellen. ASP.NET Webforms oder auch Winforms gehen diesen Weg. Für XAML stehen schon seit einer Weile sogenannte Entwurfszeit (Design Time Daten) zur Verfügung. Man bindet an die Eigenschaften und stellt je nach Umgebung echte Daten oder Fake Daten ( auch Mock genannt) bereit. Dafür gibt es einen Weg im Konstruktor mit einer Logikverzweigung per DesignMode.DesignModeEnabled zu verzweigen.

Spannend ist aber, was sich die Microsoft Entwickler einfallen haben lassen. Schon länger gibt es den Ansatz im XAML per d: für den Editor Alternative Datenbindungen einzugehen. Bisher wurden diese Daten aber gerne per Code erzeugt (meist SampledataSource.cs oder .vb). Jetzt nehmen Sie XAML.

Schritt für Schritt

Zuerst wird ein einfaches ViewModel erstellt. Eine Liste von Banane.

   1:  Public Class bananeVM
   2:      Property bananen As List(Of banane)
   3:      Public Sub New()
   4:          bananen = New List(Of banane)
   5:      End Sub
   6:  End Class

Dann ruft man Expression Blend aus dem Windows 8.1 Store Projekt (in Visual Studio 2013) auf

image

Dort kann man im Reiter Daten das Icon clicken und aus einer vorhanden Klasse die Beispieldaten generieren lassen.

image

Der nachfolgende Dialog sieht so aus

image

Wenns gut gelaufen ist, sollte rechts im Daten Reiter die Liste und ihre Propertys auftauchen.

image

Wie kommen nun diese Daten ins Formular? Man kann es im XAML Tippen oder per Drag und Drop (hier Bananen) ins Formular ziehen.

Da wird dann leider ein Standard DataTemplate aus dem Gridview verwendet, das selten wirklich passt. Aber das spannende ist, die generierte Zuweisung des Datacontextes.

   1:   <Grid d:DataContext="{d:DesignData /SampleData/bananeVMSampleData.xaml}" 

Wir haben nun zwei Datacontexte. Auf den normalen DataContext, der in der Regel auf das Viewmodel verweist und den D: der die DummyDaten aus der XAML Datei zieht. Natürlich kann auch der Visual Studi Designer das korrekt als WYSIWYG Ansicht darstellen.

Das ganze klappt, weil man in XAML Objekte deklarativ als  instanziieren kann. Wem die Daten zu realitätsfern sind, der kann sich am XAML direkt vergreifen.

   1:  <sampleData:bananeVM xmlns:sampleData="using:sampleData">
   2:      <sampleData:bananeVM.bananen>
   3:          <sampleData:banane ID="24" Name="Curabitur aliquam nam vestibulum cras" 
geschaelt="22" lang="323.07"/>
   4:          <sampleData:banane ID="62" Name="Integer quisque vivamus sed" geschaelt="83" 
lang="384.76"/>

Die Idee für das entscheidende Attribut d: DesignData stammt vermutlich aus Silverlight. In Windows 8 WinRT klappt das nicht. Soweit ich bisher gesehen habe, gibt es keine Möglichkeiten eine geänderte Klasse als Refresh in die Entwurfsdaten zu bringen. 

Kommentare sind geschlossen