Dieser Artikel ist Tag #18 der Serie 31 Tage Mango von Jeff Blankenburg.
Der Originalartikel befindet sich hier: Day #18: Using Sample Data.
Heute werden wir uns anschauen, wie wir mit Expression Blend Beispieldaten für unsere Anwendung erzeugen. Wenn Sie eine Anwendung entwickeln, wollen Sie oft sehen, wie die Daten in der Benutzeroberfläche aussehen würden, ohne auf die echte Datenbank oder den echten Webservice zugreifen zu müssen. Um so etwas zu machen, können wir Expression Blend verwenden.
Da ich Expression Blend schon öfter behandelt habe, sind hier einige „Literaturempfehlungen“:
- 31 Days of Windows Phone | Day #4: System Theming
- 31 Days of Windows Phone | Day #6: Application Bar
- 31 Days of Windows Phone | Day #29: Animations
- Expression Blend Training Kit
In unserem heutigen Artikel legen wir einfach direkt los.
Die Windows Phone Anwendung erstellen
Wie bei den meisten Artikeln dieser Serie habe ich ein kleines Video aufgenommen, um zu demonstrieren, was wir mit diesem Artikel erreichen wollen. Ich werde alles erklären, was in dem Video zu sehen ist. Wenn Sie sich trotzdem lieber erst ein Bild machen wollen, hier ist es:
Wir beginnen, indem wir ein neues Windows Phone Projekt erstellen. Sie haben das hoffentlich schon öfter im Visual Studio 2010 gemacht — diesmal legen wir ein neues Projekt in Expression Blend an.
Wenn das Projekt angelegt ist und Sie die MainPage.xaml Seite offen haben, fügen wir unserer Seite eine ListBox hinzu. Um das zu machen, klicken Sie auf den Pfeil in dem linken Menü-Balken, wählen Controls und dann das ListBox Symbol.
Wenn Sie die ListBox ausgewählt haben, können Sie diese auf die Design-Oberfläche ziehen.
Ich habe die ListBox so gestreckt, dass sie den ganzen Platz im von der Projektvorlage erzeugten ContentPanel Grid einnimmt (das ist der ganze Platz unterhalb des „page name“ Schriftzugs auf der Seite).
Beispieldaten erzeugen
Wenn Sie in die rechte obere Ecke von Expression Blend schauen, sollten Sie einen Reiter mit dem Namen „Data“ sehen. Öffnen Sie diesen Reiter.
Indem Sie auf den Button „New Sample Data“ rechts oben in diesem Reiter klicken, können Sie neue Beispieldaten für unsere Anwendung erzeugen.
Es wird der Dialog „New Sample Data“ geöffnet. Geben Sie den Daten einen Namen (ich habe meine Furniture genannt, um mit dem Video übereinzustimmen).
Sie sehen, dass Sie die Möglichkeit haben, die Daten für das ganze Projekt zu definieren oder für eine spezielle Seite. Ich empfehle die Wahl von „Project“, da hierdurch eine Reihe nützlicher Strukturen im Projekt angelegt werden, die Sie längerfristig verwenden können.
Durch Drücken von OK kommen wir zurück auf den Reiter „Data“, wobei hier jetzt einige Dinge hinzugefügt wurden.
Wir haben jetzt eine Struktur, die jedem vertraut erscheinen sollte, der schon mal mit Datenbanken gearbeitet hat. „Furniture“ repräsentiert unsere Datenbank und „Collection“ ist eine Tabelle in dieser Datenbank. „Property1“ und „Property2“ sind Felder in dieser Tabelle.
Ich werde zwei neue Eigenschaften hinzufügen und die beiden existierenden umbenennen, damit sie etwas aussagekräftiger sind. Aus Collection wird „Chairs“ und wir haben jetzt vier Eigenschaften SKU, Price, Description und Image.
Rechts neben jeder Eigenschaft gibt es ein kleines Symbol, welches den Typ der Eigenschaft repräsentiert. Für Description möchte ich einen String von Wörtern. Wri wählen deshalb hier den „Lorem Ipsum“ String Typ. Dies wird uns zufällige Strings mit 20 Wörtern liefern, wobei keins der Wörter länger als 8 Zeichen lang ist.
Die Eigenschaft Image soll Bilder beinhalten — wir wählen deshalb den Typ Image. Sie können hier Ihre eigene Menge von Bildern angeben und wir werden später im Artikel genau das machen.
Ich setze noch schnell die Eigenschaft Price auf den Typ „String/Price“ und SKU auf Number mit 6 Stellen.
Wenn Sie auf den Button „View Sample Data“ rechts neben dem Titel „Chairs“ drücken, werden Sie eine Tabelle mit zufällig erzeugten Daten für jede unserer Eigenschaften sehen. Indem Sie den Wert in „Number of Records“ verändern, können Sie bestimmen, wie viele Datensätze Sie verwenden möchten.
So weit, so gut. Wir haben Beispieldaten erzeugt. Sie werden sich jetzt vielleicht fragen, woher die Bilder der Stühle kommen. Egal, wie Sie Ihre Datenstruktur benennen: Wenn Sie einen Typ Image verwenden und keine eigene Menge von Bildern angeben, werden immer diese Stühle angezeigt. Das ist also keine Magie, sondern eine auf die Standarddaten von Expression Blend angepasste Demo.
Um die Bilder zu ändern, so dass sie besser zu Ihrer Anwendung passen, können Sie die Definition der Eigenschaft Image noch einmal öffnen und ein Verzeichnis auf Ihrem Computer angeben. Die Beispieldaten werden dann zum Beispiel so wie im folgenden Screenshot aussehen (vorausgesetzt, Sie haben die selben Bilder verwendet).
Jetzt wird es Zeit, die Daten auch zu verwenden.
Beispieldaten in einer Windows Phone App verwenden
Folgendes vorneweg: Die Daten heißen zwar „Sample Data“ — wenn Sie einen kleinen Satz statischer Daten in Ihrer Anwendung verwenden wollen, ist nichts falsches dabei, die Daten zu einem permanenten Bestandteil Ihrer Anwendung zu machen. Wo das gesagt ist, ziehen wir den Knoten „Chairs“ aus dem Data Reiter auf unsere ListBox, um die Daten dort darzustellen (im folgenden Screenshot ist der blaue Kasten meine Maus, wie ich die Daten auf die ListBox ziehe):
Sobald Sie die Maus loslassen, passieren zwei Dinge:
- Ein DataTemplate für das Layout der einzelnen Elemente in der ListBox wird erstellt.
- Ein Binding zwischen den Daten und der ListBox wird erstellt.
In diesem Beispiel befindet sich der DataTemplate direkt in unserer MainPage.xaml und sieht so aus:
<DataTemplate x:Key="ChairsItemTemplate">
<StackPanel>
<TextBlock Text="{Binding Description}"/>
<Image Source="{Binding Image}" HorizontalAlignment="Left" Height="64" Width="64"/>
<TextBlock Text="{Binding Price}"/>
<TextBlock Text="{Binding SKU}"/>
</StackPanel>
</DataTemplate>
Sie werden sehen, dass die ListBox einen ItemTemplate enthält, der diesen DataTemplate verwendet. Die ItemsSource der ListBox verwendet unsere Chairs Daten:
<ListBox Margin="8,8,0,8" ItemTemplate="{StaticResource ChairsItemTemplate}" ItemsSource="{Binding Chairs}"/>
Um das Erscheinungsbild des DataTemplate zu bearbeiten, können wir wieder Expression Blend verwenden. Klicken Sie mit rechts auf die ListBox und wählen Sie „Edit Additional Templates > Edit Generated Items (ItemTemplate) > Edit Current
Dadurch haben sich einige Dinge in der Benutzeroberfläche geändert. Erstens sehen wir oberhalb der Designoberfläche, dass wir gerade das ItemTemplate der ListBox bearbeiten.
Zweitens achten Sie auf den Bereich Objects and Timeline. Dieser bezieht sich jetzt nur noch auf den Inhalt des ItemTemplate, welcher 3 TextBlocks und ein Image Control enthält.
Wri können die Elemente unseres ItemTemplates wieder direkt in der Designoberfläche verändern. Ich habe zum Beispiel das Bild des ersten Eintrags etwas größer gemacht. Da wir den Template verändern, werden die Bilder aller anderen Einträge natürlich ebenfalls größer.
Im nächsten Screenshot sehen Sie, dass ich den TextBlock Description an den unteren Rand des Templates geschoben habe und alle TextBlocks rechts ausgerichtet habe. Der TextBlock für Price hat zudem eine größere Schriftgröße bekommen und die Vordergrundfarbe ist jetzt grün.
Sie haben jetzt bereits eine funktionsfähige Anwendung (außer Sie wollen die Liste noch schöner machen). Wenn Sie den Emulator starten, werden Sie eine Anwendung mit einer scrollenden ListBox sehen. Mit den von mir gemachten Änderungen wir diese etwa so aussehen:
Wo sind die ganzen Beispieldaten?
Wir können die Anwendung im Emulator ausführen, die Daten erscheinen dort und wir können damit arbeiten. Sie fragen sich jetzt vielleicht, wo die Daten in unserer Anwendung eigentlich stecken.
Wenn Sie einen Blick auf die Projektstruktur werfen, werden Sie einen Ordner mit dem Namen SampleData sehen.
In diesem Ordner befindet sich eine Datei Furniture.xaml, die unsere generierten Daten enthält. Der Inhalt dieser Datei sieht beispielsweise so aus:
<!--
********* DO NOT MODIFY THIS FILE *********
This file is regenerated by a design tool. Making
changes to this file can cause errors.
-->
<SampleData:Furniture xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.Furniture" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<SampleData:Furniture.Chairs>
<SampleData:ChairsItem SKU="366413" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day1-EmulatorTools.png" Description="Nam aliquam sed dis cras class duis integer maecenas praesent" />
<SampleData:ChairsItem SKU="420965" Price="$29.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day10-NetworkInformation.png" Description="Accumsan aenean quisque bibendum mauris curae nullam donec vivamus est aliquam" />
<SampleData:ChairsItem SKU="727463" Price="$249.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day11-LiveTiles.png" Description="Nunc aliquet blandit aptent auctor hac congue dictumst eleifend amet etiam ante fusce leo commodo facilisi cursus conubia dictum" />
<SampleData:ChairsItem SKU="549249" Price="$1000" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day12-BetaTesting.png" Description="Lectus cubilia libero arcu dapibus lorem mus faucibus diam habitant egestas" />
<SampleData:ChairsItem SKU="829031" Price="$2.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day13-MarketplaceTestKit.png" Description="Euismod inceptos nec eget interdum non elit morbi feugiat nulla ligula gravida lobortis iaculis litora" />
<SampleData:ChairsItem SKU="758558" Price="$300" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day14-OData.png" Description="Proin enim lacinia laoreet augue nascetur natoque erat dolor per posuere" />
<SampleData:ChairsItem SKU="342996" Price="$10,999" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day15-ProgressBar.png" Description="Fames sed sem felis sit eros vel nam ipsum justo sed nibh" />
<SampleData:ChairsItem SKU="604077" Price="$49.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day16-IsolatedStorageExplorer.png" Description="Nisi potenti pretium dis pharetra nisl placerat pulvinar luctus lacus est hac sagittis nunc lorem magnis rhoncus leo sodales" />
<SampleData:ChairsItem SKU="673946" Price="$25.34" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day17-LocalDatabase.png" Description="Viverra odio orci mattis mus magna massa pede quam aliquam senectus metus nec morbi" />
<SampleData:ChairsItem SKU="177653" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day17-WindowsAzure.png" Description="Non mauris sociosqu integer suscipit quisque torquent mollis quis per ultrices vehicula sed neque" />
<SampleData:ChairsItem SKU="788040" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day18-ExpressionBlendSampleData.png" Description="Aenean nam cras maecenas duis class nunc aliquam sed amet praesent dis mauris" />
<SampleData:ChairsItem SKU="547641" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day19-AddingTiltEffects.png" Description="Integer ante arcu diam accumsan bibendum est nullam dictumst eleifend curae aptent eget donec quisque elit facilisi faucibus" />
<SampleData:ChairsItem SKU="401054" Price="$29.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day2-DeviceStatus.png" Description="Enim habitant vivamus auctor etiam fusce congue aliquam erat inceptos" />
<SampleData:ChairsItem SKU="256092" Price="$249.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day20-Ringtones.png" Description="Interdum lobortis aliquet blandit commodo hac conubia lorem cubilia leo nascetur eros pharetra cursus" />
<SampleData:ChairsItem SKU="852495" Price="$1000" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day21-Sockets.png" Description="Dapibus nibh placerat nisi mus nec morbi nulla nisl proin egestas non euismod" />
<SampleData:ChairsItem SKU="657020" Price="$2.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day22-AppConnect.png" Description="Per pulvinar feugiat dictum sed gravida sem iaculis sagittis sit lectus lacinia nunc laoreet odio" />
<SampleData:ChairsItem SKU="450567" Price="$300" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day23-ExecutionModel.png" Description="Augue senectus vel nam sed orci sociosqu dis libero dolor natoque pede ligula fames posuere felis est potenti quam" />
<SampleData:ChairsItem SKU="546952" Price="$10,999" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day24-ProfilerTool.png" Description="Litora luctus hac ipsum suscipit magnis torquent pretium rhoncus leo quis justo sodales urna mus ultrices lacus lorem viverra nec" />
<SampleData:ChairsItem SKU="481783" Price="$49.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day25-BackgroundAgents.png" Description="Mattis cras aliquam duis nunc amet magna mauris massa ante integer mollis non per sed quisque" />
<SampleData:ChairsItem SKU="200702" Price="$25.34" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day26-BackgroundFileTransfers.png" Description="Metus morbi sem neque sit netus vel nam arcu vehicula sed volutpat nulla porta diam" />
<SampleData:ChairsItem SKU="536695" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day27-MicrophoneAPI.png" Description="Dis purus montes vivamus eget maecenas aliquam elit nostra est risus velit" />
<SampleData:ChairsItem SKU="275101" Price="$29.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day28-MediaLibrary.png" Description="Ornare vitae platea class aliquet hac curae primis praesent enim erat accumsan leo eros blandit bibendum donec nibh rutrum mus" />
<SampleData:ChairsItem SKU="979319" Price="$249.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day29-Globalization.png" Description="Nec dictumst commodo nisi etiam nisl eleifend conubia cubilia nunc sapien fusce dapibus non semper sociis egestas" />
<SampleData:ChairsItem SKU="234379" Price="$1000" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day3-Reminders.png" Description="Taciti odio euismod facilisi faucibus lorem habitant per tellus tempor sed orci inceptos feugiat pede morbi quam" />
<SampleData:ChairsItem SKU="248085" Price="$2.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day30-ConnectionSettings.png" Description="Nulla tempus tortor proin interdum augue quis gravida iaculis lacinia turpis lobortis urna sem varius sit cras laoreet vel" />
<SampleData:ChairsItem SKU="982403" Price="$300" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day31-PromotingYourApplication.png" Description="Nascetur nam sed aenean pharetra dis natoque posuere potenti mauris pretium dolor fames placerat nullam aptent" />
<SampleData:ChairsItem SKU="106433" Price="$10,999" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day4-Compass.png" Description="Est pulvinar duis rhoncus sodales felis nunc hac viverra amet ante ipsum auctor congue" />
<SampleData:ChairsItem SKU="203433" Price="$49.99" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day5-Gyroscope.png" Description="Leo cursus mus arcu dictum nec diam sagittis aliquam eget non integer lectus elit per enim erat senectus" />
<SampleData:ChairsItem SKU="660918" Price="$25.34" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day6-Motion.png" Description="Libero justo ligula sed sociosqu sem eros lacus suscipit sit torquent litora quisque nibh nisi nisl lorem" />
<SampleData:ChairsItem SKU="734363" Price="$100" Image="/Day18_BlendSampleData;component/SampleData/Furniture/Furniture_Files/Day7-RawCamera.png" Description="Nunc magna vel massa luctus odio nam orci ultrices vivamus sed" />
</SampleData:Furniture.Chairs>
</SampleData:Furniture>
Die tatsächliche Struktur dieser Daten ist in der Datei Furniture.xaml.cs definiert. Diese enthält alle Klassen und Eigenschaften, die wir definiert hatten, als wir unsere Beispieldaten erstellt haben. Sie sehen, dass alle von uns definierten Eigenschaften vorhanden sind, ebenso wie die Verweise auf die Bild-Dateien.
// ********* DO NOT MODIFY THIS FILE *********
// This file is regenerated by a design tool. Making
// changes to this file can cause errors.
namespace Expression.Blend.SampleData.Furniture
{
using System;
// To significantly reduce the sample data footprint in your production application, you can set
// the DISABLE_SAMPLE_DATA conditional compilation constant and disable sample data at runtime.
#if DISABLE_SAMPLE_DATA
internal class Furniture { }
#else
public class Furniture : System.ComponentModel.INotifyPropertyChanged
{
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
}
}
public Furniture()
{
try
{
System.Uri resourceUri = new System.Uri("/Day18_BlendSampleData;component/SampleData/Furniture/Furniture.xaml", System.UriKind.Relative);
if (System.Windows.Application.GetResourceStream(resourceUri) != null)
{
System.Windows.Application.LoadComponent(this, resourceUri);
}
}
catch (System.Exception)
{
}
}
private Chairs _Chairs = new Chairs();
public Chairs Chairs
{
get
{
return this._Chairs;
}
}
}
public class ChairsItem : System.ComponentModel.INotifyPropertyChanged
{
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
}
}
private double _SKU = 0;
public double SKU
{
get
{
return this._SKU;
}
set
{
if (this._SKU != value)
{
this._SKU = value;
this.OnPropertyChanged("SKU");
}
}
}
private string _Price = string.Empty;
public string Price
{
get
{
return this._Price;
}
set
{
if (this._Price != value)
{
this._Price = value;
this.OnPropertyChanged("Price");
}
}
}
private System.Windows.Media.ImageSource _Image = null;
public System.Windows.Media.ImageSource Image
{
get
{
return this._Image;
}
set
{
if (this._Image != value)
{
this._Image = value;
this.OnPropertyChanged("Image");
}
}
}
private string _Description = string.Empty;
public string Description
{
get
{
return this._Description;
}
set
{
if (this._Description != value)
{
this._Description = value;
this.OnPropertyChanged("Description");
}
}
}
}
public class Chairs : System.Collections.ObjectModel.ObservableCollection<ChairsItem>
{
}
#endif
}
Schließlich haben Sie noch den Ordner Furniture_Files, welcher unsere verwendeten Beispielbilder beinhaltet. Da wir zuerst die Bilder der Stühle und dann die eigenen Beispielbilder verwendet haben, befinden sich möglicherweise beide Mengen von Bildern in diesem Ordner. Wie in den Code-Kommentaren angegeben, sollten Sie diese Dateien nicht direkt bearbeiten, da sie bei der nächsten Bearbeitung in Expression Blend überschrieben werden würden. Es sind generierte Dateien und sollten entsprechend behandelt werden.
Zusammenfassung
Sie haben jetzt eine Anwendung, die Beispieldaten verwendet. Die Daten haben wir mit Expression Blend erzeugt diese unter Verwendung eines DataTemplate in einer ListBox angezeigt. Es gibt für diese Technik viele praktische Anwendungsgebiete. Denken Sie daran, wenn Sie statische Datensätze haben und nicht eine aufwändigere Datenquelle (wie Webservices oder Datenbanken) benutzen müssen.
Wenn Sie die komplette Windows Phone Anwendung mit den Beispieldaten herunterladen möchten, klicken Sie auf den Download Code Button.
Morgen wird Doug Mair zeigen, wie wir den Tilt Effekt für unsere XAML Elemente verwenden können. Damit bekommt der Anwender interaktives Feedback auf seine Touch Gesten.
Bis dahin!