Erstellen Sie Ihre erste Windows Phone 7-App

  • Erforderliche Kenntnisse: Allgemeines C # und grundlegende XAML
  • Benötigt: Visual Studio 2010 Express, Windows 7-Betriebssystem, Windows Phone 7 SDK
  • Projektzeit: Zwei bis vier Stunden, abhängig von der Geschwindigkeit Ihrer Internetverbindung und Ihres Computers
  • Support-Datei

Ob einer von uns es zugeben möchte oder nicht, Mobile ist hier. Es war und ist eine Kernkompetenz, die jeder Entwickler nutzen muss. Aber wie beginnt jemand, der neu in mobilen Anwendungen ist, mit der Entwicklung mobiler Software? Besser noch, was ist, wenn Sie bereits mobile Anwendungen auf einer Plattform erstellt haben und den Prozess des Erstellens einer Anwendung auf einer anderen Plattform sehen möchten? Dies ist das Ziel dieses Artikels. Machen Sie alle mit der Entwicklung ihrer ersten Windows Phone 7-Anwendung von Anfang bis Ende vertraut.

Heute werden wir mit der Entwicklung von Anwendungen für die Windows Phone 7-Plattform beginnen. Egal, ob dies Ihre erste Reise in die Entwicklung mobiler Anwendungen ist oder Sie nur neugierig sind, wie die Entwicklung einer Anwendung auf der Windows Phone 7-Plattform aussieht, dieser Artikel ist genau das Richtige für Sie. Wir werden zunächst die Tools herunterladen, die zum Erstellen von Windows Phone 7-Anwendungen erforderlich sind, dann direkt in den Code eintauchen und eine einfache, aber funktionale Anwendung entwickeln. Lass uns weitermachen und loslegen.

01. Herunterladen der Tools

Bevor wir mit der Entwicklung für die Plattform beginnen können, müssen wir verschiedene Tools herunterladen und installieren. Im Folgenden sind die erforderlichen Tools sowie einige Extras aufgeführt, um Ihren Entwicklungsprozess zu beschleunigen.



  • Windows Phone Software Development Kit (SDK) 7.1 : Dies ist der einzige erforderliche Download und bietet Ihnen alle Tools, die Sie zum Entwickeln von Anwendungen und Spielen für Windows Phone 7-Geräte benötigen. Mit dem Download können Sie Visual Studio 2010 Express (die IDE) installieren, das Anwendungsvorlagen für Telefonprojekte sowie Produktivitätsverbesserungen wie einen App-Profiler und einen verbesserten Emulator enthält.
  • Windows Phone SDK-Dokumentation: Beim Erstellen von Windows Phone-Apps verweisen Sie häufig auf Seiten dieser Site. Es enthält Dokumentation für die gesamte API sowie viel Beispielcode.
  • Codebeispiele für Windows Phone: Nachdem Sie über die Tools und die Dokumentation verfügen, sollten Sie einige Beispielanwendungen herunterladen. Auf dieser Seite werden alle von Microsoft bereitgestellten Beispielanwendungen aufgelistet. Es ist nach Funktionen unterteilt, sodass Sie die gesuchte Seite schnell und einfach finden können.

02. Unsere erste Windows Phone-Anwendung

Twitter ist überall. Es ist das neue „Hello World“ -Projekt für alle, die aus gutem Grund eine neue Plattform lernen. Es erfordert eine Art Eingabesteuerung, Ereignis- und Fehlerbehandlung, Webanforderung und Antworten, um die Daten in Ihrer Anwendung richtig zu formatieren. In dieser App erstellen wir eine Twitter-Anwendung, mit der der Benutzer einen Twitter-Benutzernamen eingeben und die Tweets in einem einfachen und leicht lesbaren Format abrufen kann.

03. Der Bau beginnt

Anmerkung des Autors: Die unten aufgeführten Screenshots wurden mit Visual Studio 2010 Ultimate aufgenommen. Wenn Sie Visual Studio 2010 Express für Windows Phone verwenden, können geringfügige Abweichungen bei Menübefehlen oder Fenstern auftreten. Die Basisfunktionalität bleibt jedoch gleich.

Nachdem wir die Tools heruntergeladen und installiert haben, ist es Zeit, mit unserem ersten Projekt zu beginnen. Öffnen Sie Visual Studio und wählen Sie Datei -> Neues Projekt . Erweitern Sie die Visual C # -Vorlagen und wählen Sie Silverlight für Windows Phone . Schließlich wählen Sie Windows Phone-Anwendung und geben Sie ihm einen Namen wie unten gezeigt.

Neue Projektvorlage für Windows Phone 7-Anwendungen

Neue Projektvorlage für Windows Phone 7-Anwendungen

Klicken Sie nun auf OK und Sie sehen dieses Dialogfeld:

Dialogfeld, in dem der Benutzer gefragt wird, auf welche Telefonplattform er abzielen möchte

Dialogfeld, in dem der Benutzer gefragt wird, auf welche Telefonplattform er abzielen möchte

Wir haben hier zwei Möglichkeiten:

  • Windows Phone OS 7.1 : Dies gilt für Mango-Anwendungen und enthält einen zusätzlichen Satz von APIs für die Arbeit mit Windows Phone. Dies ist die Standardeinstellung und sollte künftig für neue Anwendungen verwendet werden.
  • Windows Phone OS 7.0 : Dies gilt für die Originalversion des Windows Phone-Betriebssystems und sollte nur in seltenen Fällen verwendet werden.

Lassen Sie uns fortfahren und auswählen Windows Phone OS 7.1 und auswählen OK .

Visual Studio 2010 mit einer neuen Windows Phone 7-Anwendung geladen

Visual Studio 2010 mit einer neuen Windows Phone 7-Anwendung geladen

Nach dem Laden von Visual Studio 2010 wird der obige Bildschirm angezeigt.

wie man Mangaseiten digital färbt
  1. Das Werkzeugkasten enthält Windows Phone-Steuerelemente, die Sie Ihrer Anwendung hinzufügen können. Beispiele sind: TextBox, Schaltflächen, Bilder und mehr.
  2. Das Designansicht Zeigt an, wie Ihre Windows Phone 7-Anwendung beim Erstellen der Anwendung in Echtzeit aussieht.
  3. Das XAML-Ansicht Zeigt die aktuelle XAML an, aus der der in # 2 gezeigte Bildschirm besteht.
  4. Das Projektmappen-Explorer Zeigt alle Dateien an, aus denen Ihre Anwendung besteht. Dies umfasst normalerweise Bilder und Projektdateien.
  5. Das Eigenschaftenfenster Mit dieser Option können Sie bestimmte Eigenschaften der Steuerelemente ändern, die der Telefonanwendung hinzugefügt wurden.

04. Ändern Sie den vorhandenen App-Namen und den Seitentitel

Das erste, was wir ändern müssen, ist die Standardeinstellung Anwendungsname und Seitentitel zu unseren eigenen. Navigieren Sie in Ihrem MainPage.xaml (In Abbildung 3, Punkt 3 dargestellt) und ändern Sie die Text Eigenschaften von jedem Textblock Wie nachfolgend dargestellt:





Wenn Sie sich jetzt das Designerfenster ansehen, sehen Sie die folgende Abbildung:

Das Designerfenster wurde aktualisiert, als der Anwendungstitel und der Seitentitel geändert wurden

Das Designerfenster wurde aktualisiert, als der Anwendungstitel und der Seitentitel geändert wurden

05. Layout anpassen und Steuerelemente hinzufügen

Als nächstes möchten wir das Layout anpassen, damit unsere Steuerelemente den Bildschirm ausfüllen können.

Bewegen Sie die Maus auf den Designer und klicken Sie mit der linken Maustaste auf den Punkt, der im folgenden Grab angezeigt wird. Dadurch können wir diesen Raum mit a füllen Textfeld und Taste .

Anpassen des Rasterlayouts in einer Windows Phone 7-Anwendung

Anpassen des Rasterlayouts in einer Windows Phone 7-Anwendung

Sobald dies geschehen ist, möchten wir a ziehen und ablegen Textfeld , Taste und ListBox von der ToolBox auf das Designerfenster wie hier gezeigt:

Was machen diese Schaltflächen?

  • Das Textfeld ist ein Benutzereingabesteuerelement, mit dem unser Benutzer einen Twitter-Benutzernamen eingeben kann.
  • Das Taste wird gedrückt, wenn der Benutzer bereit ist, Tweets des in die TextBox eingegebenen Benutzers nachzuschlagen.
  • Das ListBox enthält das Benutzerbild sowie den Tweet des Benutzers.

Nehmen wir die folgenden Änderungen vor MainPage.xaml Datei. Suche nach Kennzeichnen und ersetzen Sie den Code durch Folgendes:


















wie man eine benutzerdefinierte Textur in Illustrator hinzufügt

Sie werden hier einige Unterschiede feststellen, wenn Sie dieses Code-Snippet mit dem vergleichen, was Sie bereits hatten.

  • Textfeld : Wir haben ihm einen Namen gegeben und das gelöscht Text Eigentum. Auf diese Weise können wir auf die TextBox verweisen, wenn der Benutzer die Taste drückt.
  • Taste : Wir haben ihm auch einen Namen gegeben und das geändert Inhalt Eigenschaft zu suchen. Wir haben endlich eine hinzugefügt Klicken Ereignishandler, der ausgelöst wird, wenn der Benutzer die Taste drückt.
  • ListBox : Dieses Steuerelement hatte die drastischsten Änderungen, wir haben einen Namen und dann einen hinzugefügt ListBox.ItemTemplate . Die ItemTemplate bestimmt das Layout jedes Elements in der Liste. Sie verbinden dann DataTemplates mit diesen Datenelementen definieren, welche UI-Elemente zum Rendern verwendet werden.

In diesem Fall verwenden wir a StackPanel welches Elemente in einer Richtung stapelt. Wir stapeln ein Bild und einen TextBlock horizontal, um das Bild des Benutzers und seinen Tweet anzuzeigen.

06. Zeit zum Codieren

Nachdem wir XAML zu unserem Projekt hinzugefügt haben, ist es an der Zeit, unserer Seite Code hinzuzufügen, damit die Anwendung funktioniert.

Beginnen wir mit dem Hinzufügen eines Verweises auf eine vorhandene Datei, die von Microsoft erstellt wurde, um das von der von uns verwendeten Twitter-API zurückgegebene XML zu analysieren.

Rechtsklick auf Verweise und auswählen Füge Referenz hinzu . Scrollen Sie durch die Liste, bis Sie zu System.Xml.Linq gelangen, und wählen Sie OK, wie hier gezeigt:

Dialogfeld

Dialogfeld 'Verweise hinzufügen' zum Windows Phone 7-Projekt

Nachdem wir die richtige Bibliothek eingerichtet haben, werden wir eine neue Klasse hinzufügen, die die Twitter-Elemente enthält.

Klicken Sie mit der rechten Maustaste auf Ihr Projekt und wählen Sie Hinzufügen , dann Klasse . Geben wir ihm den Namen TwitterItem und drücken Sie die Eingabetaste. Innerhalb dieser Klasse fügen wir wie unten gezeigt zwei Eigenschaften hinzu, die unsere ImageSource und Message enthalten.

öffentliche Klasse TwitterItem
{
öffentliche Zeichenfolge ImageSource {get; einstellen; }}
öffentliche Zeichenfolge Nachricht {get; einstellen; }}
}}

Die ImageSource bezieht sich auf den Speicherort des Bildes im Web.

Die Nachricht enthält den Tweet des Benutzers.

Gehen Sie vor und doppelklicken Sie auf die MainPage.xaml.cs Datei und fügen Sie im folgenden Code-Snippet direkt nach dem Hauptseite() Erbauer:

private void btnLookupUser_Click (Objektabsender, RoutedEventArgs e)
{
WebClient twitter = neuer WebClient ();
twitter.DownloadStringCompleted + = neuer DownloadStringCompletedEventHandler (twitter_ DownloadStringCompleted);
twitter.DownloadStringAsync (neuer Uri ('http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=' + txtUserName.Text));
}}


void twitter_DownloadStringCompleted (Objektabsender, DownloadStringCompletedEventArgs e)
{
if (e.Error! = null)
Rückkehr;

XElement xmlTweets = XElement.Parse (e.Result);

lstTwitter.ItemsSource = von Tweet in xmlTweets.Descendants ('Status')
neues TwitterItem auswählen
{
ImageSource = tweet.Element ('user'). Element ('profile_image_url'). Value,
Nachricht = tweet.Element ('text'). Wert
};
}}

Wofür wird ein Leuchtkasten verwendet?

Der erste Ereignishandler wird aufgerufen btnLookupUser_Click und es wird ausgeführt, sobald der Benutzer auf das klickt Nachschlagen Taste. Wir verwenden das eingebaute WebClient Klasse, da sie allgemeine Methoden zum Senden und Empfangen von Daten an eine Ressource bietet. In diesem Fall übergeben wir den aktuellen Benutzernamen an eine von Twitter bereitgestellte API, die eine XML-Datei mit den angeforderten Daten zurückgibt.

Das twitter_DownloadStringCompleted event verwendet LINQ, um das von der API zurückgegebene XML zu analysieren und die Bild-URL und die Nachricht auszuwählen.

Falls Sie sich fragen, was LINQ ist: LINQ basiert vollständig auf allgemeinen Sprachfunktionen, von denen einige neu in C # 3.0 und Visual Basic 9.0 sind. Jede dieser Funktionen verfügt über ein eigenes Dienstprogramm. Zusammen bieten diese Funktionen jedoch eine erweiterbare Möglichkeit, Abfragen und abfragbare APIs zu definieren.

07. Startbereit

Nachdem wir unsere Anwendung erstellt haben, ist es Zeit, sie zu starten und in Aktion zu sehen. Als erstes müssen wir sicherstellen, dass das Ziel wie hier gezeigt auf Windows Phone Emulator eingestellt ist:

Festlegen des Zieltyps auf Windows Phone Emulator

Festlegen des Zieltyps auf Windows Phone Emulator

Hinweis: Wenn Sie ein Windows Phone-Gerät und eine App Hub-Mitgliedschaft hatten, können Sie die Dropdown-Liste in Windows Phone-Gerät ändern.

Sobald die Anwendung geladen ist, wird der folgende Bildschirm angezeigt:

Die Windows Phone-Anwendung beim ersten Start

beste interne Festplatte für MacBook Pro
Die Windows Phone-Anwendung beim ersten Start

Gehen Sie voran und wählen Sie die Textfeld und Sie sehen die Software-Tastatur. Sie können optional die Seite nach oben drücken, um die Tastatur Ihres Computers zum Tippen zu verwenden. Geben Sie einen gültigen Twitter-Benutzernamen ein und wählen Sie Nachschlagen . Die Anwendung gibt die Tweets des angegebenen Benutzers wie hier gezeigt zurück:

Die endgültige Anwendung, die Tweets von einem von einem Benutzer angegebenen Benutzernamen zurückgibt

Die endgültige Anwendung, die Tweets von einem von einem Benutzer angegebenen Benutzernamen zurückgibt

Ihre Benutzer können auch zu dem im Einstellungsmenü von Windows Phone 7 integrierten Light-Thema wechseln, und die Farben der Anwendung werden automatisch angepasst, wie unten gezeigt.

Das Lichtthema zeigt unsere von uns erstellte Anwendung an

Das Lichtthema zeigt unsere von uns erstellte Anwendung an

Es ist wichtig zu beachten, dass diese Beispielanwendung zusätzliche Fehlerbehandlung enthalten sollte. Ich habe sie aus Lerngründen von der Demo ausgeschlossen.

08. Fazit

In nur wenigen Stunden haben wir die Tools heruntergeladen, uns mit der IDE vertraut gemacht und unsere erste Windows Phone 7-Anwendung erstellt. Natürlich haben wir kaum die Oberfläche der Möglichkeiten von Windows Phone 7 zerkratzt. Ich empfehle Ihnen, ein paar Bücher zu lesen, sich die Beispiele anzusehen und zu sehen, was die Community mit der Plattform macht. Ich kann Ihnen versichern, dass Sie überrascht sein werden. Wie immer, danke fürs Lesen und wenn Sie Fragen / Kommentare haben, lassen Sie diese bitte unten.

Mochte dies? Lese das!