Erstellen Ihrer ersten Windows Store-App mit Blend, Teil 2: Detailseite (XAML und C#)

Sie können eine Windows Store-App schneller und effizienter entwickeln, indem Sie die Auflistung von XAML-Entwurfstools in Blend for Visual Studio verwenden. Während Sie sich mit diesem Lernprogramm befassen, erstellen Sie eine einfache App, "PickaFlick", in der Sie neue Kinofilmen in einer Liste suchen können, die von einer API von "Rotten Tomatoes" generiert wird.

Wenn Sie dieses Projekt aus der Beispielgalerie herunterladen, können Sie nicht nur den Code überprüfen, sondern auch alle dessen Objekte, sodass Sie alles nachvollziehen können und dabei zugleich das Projekt erstellen können.

In Teil 1 dieses Lernprogramms haben Sie die PickaFlick-Homepage erstellt. In Teil 2 lernen Sie folgende Aufgaben:

• Add an item template to your project

• Switch to Visual Studio and back again

• Set the DataContext

• Create a view of the data

• Create and style the data bindings

• Preview for different device displays

• Add a built-in behavior

Hinzufügen einer Elementvorlage zum Projekt

Zusätzlich zu den Projektvorlagen bieten Blend und Visual Studio Elementvorlagen, die häufig verwendeten Code enthalten. Sie können einem Projekt eine Vorlage problemlos hinzufügen, um die App-Entwicklung zu beschleunigen. Siehe Vorlagen für eine schnelle App-Entwicklung.

Für die PickaFlick-App fügen Sie dem vorhandenen Projekt eine Elementvorlage für eine leere Seite hinzu. Die Seite ist die Filmanzeigeseite der App.

So fügen Sie eine Elementvorlage für leere Seiten hinzu

1. Klicken Sie im Bereich Projekte mit der rechten Maustaste auf die Projektdatei, und klicken Sie dann auf Neues Element.

   Das Dialogfeld Neues Element wird angezeigt.

   

2. Klicken Sie in der Liste von Elementvorlagen auf Leere Seite.

3. Geben Sie im Textfeld Name die Zeichenfolge MovieDisplay.xaml ein, und klicken Sie auf OK, um die Elementvorlage hinzuzufügen.

Jetzt ändern Sie den Hintergrund von MovieDisplay.xaml.

So ändern Sie den Hintergrund von MovieDisplay.xaml

1. Klicken Sie im Bereich Objekte und Zeitachsen auf Raster.

2. Klicken Sie im Bereich Eigenschaften in der Kategorie Pinsel auf das Symbol Pinsel mit Volltonfarbe.

3. Geben Sie im Textfeld Farbtonwert den Wert #D5BF9A ein und drücken Sie anschließend die EINGABETASTE.

   

   Das Tag Grid in der Codeansicht enthält jetzt das Attribut Background="#FFD5BF9A" (als Alpha-Wert wird standardmäßig 100 % oder FF verwendet), und die neue Hintergrundfarbe wird in der Entwurfsoberfläche angezeigt.

Wechseln zu Visual Studio und wieder zurück

Die PickaFlick-App benötigt einen JSON-Serialisierer, um JSON in .NET-Objekte zu konvertieren, die von mit C# erstellten Windows Store-Apps verwendet werden können. Sie können Ihren eigenen JSON-Serialisierer schreiben oder einen solchen mithilfe des NuGet-Paket-Managers in Microsoft Visual Studio herunterladen. Sie können einfach von Blend aus zu Visual Studio wechseln, um dies zu erreichen.

Bei diesem Vorgang wechseln Sie zu Visual Studio, um Json.NET, einen JSON-Serialisierer, herunterzuladen. Dann speichern Sie die Änderungen und wechseln zurück zu Blend, um mit Ihrer Arbeit fortzufahren.

So installieren Sie Json.NET mithilfe des NuGet-Paket-Managers

1. Klicken Sie im Bereich Projekte mit der rechten Maustaste auf PickaFlick und dann auf In Visual Studio bearbeiten.

   Visual Studio öffnet das PickaFlick-Projekt. Wenn Sie aufgefordert werden, die Dateien erneut zu laden, klicken Sie auf Alles neu laden.

   Tipp

   Da Sie Visual Studio bereits in Teil 1 dieses Lernprogramms geöffnet haben, ist es möglicherweise hinter Blend ausgeblendet, nachdem Sie auf Bearbeiten in Visual Studio klicken.

2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektdatei, und klicken Sie anschließend auf NuGet-Pakete verwalten.

   

3. Geben Sie im Dialogfeld NuGet-Pakete verwalten im Textfeld Suchen die Zeichenfolge Json.Net ein. Drücken Sie die EINGABETASTE.

4. Klicken Sie in der Liste Ergebnisse auf die Schaltfläche Installieren rechts von Json.NET.

   

5. Nach Abschluss der Installation des Pakets klicken Sie auf Schließen.

   Die Json.NET-Startseite wird im Dokumentfenster angezeigt, und ein Verweis auf Newtonsoft.Json wird im Verzeichnis Verweise im Projektmappen-Explorer angezeigt.

Ihrem Projekt den PickaFlick-Code hinzufügen

Der Code für die PickaFlick-App bezieht die Daten von der Website Rotten Tomatoes und erstellt .NET-Objekte aus den abgerufenen Daten, die Sie dann direkt in Ihrer App verwenden können.

So fügen Sie dem Projekt Code hinzu

1. Klicken Sie mit der rechten Maustaste auf Projektmappen-Explorer, klicken Sie dann auf Hinzufügen und anschließend auf Neuer Ordner.

   

2. Klicken Sie im Projektmappen-Explorer auf den neuen Ordner, und geben Sie dann die Zeichenfolge DataModel ein.

   

3. Klicken Sie mit der rechten Maustaste auf den Ordner DataModel, zeigen Sie auf Hinzufügen, und klicken Sie dann auf Neues Element, oder drücken Sie STRG+UMSCHALT+A.

4. Klicken Sie im Dialogfeld Neues Element hinzufügen auf Klasse, und geben Sie dann die Zeichenfolge MovieData.cs ein. Klicken Sie auf Hinzufügen.

5. Ersetzen Sie in MovieData.cs den Code class MovieData {} durch folgenden Code:

   // This class represents a movie. It contains properties the describe the movie.
       public class MovieData
       {
           public MovieData(string title, string summary, string image)
           {
               this.Title = title;
               this.Summary = summary;
               this.Image = image;
   
           }
           public string Title { get; set; }
           public string Summary { get; set; }
           public string Image { get; set; }
       }
   

6. Drücken Sie STRG+UMSCHALT+A. Vergewissern Sie sich, dass Klasse ausgewählt ist. Klicken Sie im Dialogfeld Neues Element hinzufügen auf Klasse, und geben Sie dann die Zeichenfolge PickaFlickQuery.cs ein. Klicken Sie auf Hinzufügen.

7. Fügen Sie in PickaFlickQuery.cs den folgenden Code nach using System.Threading.Tasks; hinzu:

   using System.IO;
   using System.Runtime.InteropServices.WindowsRuntime;
   using Windows.Foundation;
   using Windows.Foundation.Collections;
   using System.Collections.ObjectModel;
   using System.Net;
   using System.Net.Http;
   using Newtonsoft.Json;
   using System.IO.Compression;
   

8. Ersetzen Sie den Code class PickaFlickQuery {} durch folgenden Code:

       public class PickaFlickQuery
       {
           protected Uri Uri { get; private set; }
           // A collection class used to store a list of MovieData objects.
           public ObservableCollection<MovieData> results = new ObservableCollection<MovieData>();
           private bool hasExecutedQuery;
   
           public PickaFlickQuery(Uri uri)
           {
               this.Uri = uri;
           }
   
           // Executes a query to obtain information about movies.
           // This property also stores the movies in a collection class.
           public ObservableCollection<MovieData> Results
           {
               get
               {
                   if (!hasExecutedQuery)
                   {
                       this.ExecuteQuery();
                   }
   
                   return this.results;
               }
           }
   
           // Calls a service to obtain a list of movies. This method stores each movie
           // in a collection object.
           private async void ExecuteQuery()
           {
               try
               {          
                   HttpClient httpClient = new HttpClient();
   
                   var response = await httpClient.GetAsync(this.Uri);
   
                   string responseText = "";
   
                   IEnumerable<string> headerValues = Enumerable.Empty<string>();
   
                   if (response.Content.Headers.TryGetValues("Content-Encoding", out headerValues))
                   {
                       foreach (string headerValue in response.Content.Headers.GetValues("Content-Encoding"))
                       {
                           if (headerValue == "gzip")
                           {
                               using (var responseStream = await response.Content.ReadAsStreamAsync())
                               using (var decompressedStream = new GZipStream(responseStream, CompressionMode.Decompress))
                               using (var streamReader = new StreamReader(decompressedStream))
                               {
                                   responseText = streamReader.ReadToEnd();
                               }
                           }
                       }   
                   }
                   if (responseText == "")
                   {
                       var stream = await response.Content.ReadAsStreamAsync();
                       var streamReader = new StreamReader(stream);
                       responseText = streamReader.ReadToEnd();
                   }
   
               
                   // Convert the stream to JSON so that it is easier to iterate through
                   // each item in the stream.
                   dynamic myObj = JsonConvert.DeserializeObject(responseText);
                   dynamic movies = myObj.movies;
   
                   // Iterate through the collection of JSON objects to obtain information
                   // each movie in the collection.
                   foreach (dynamic movie in movies)
                   {
                       string title = movie.title;
                       string summary = movie.synopsis;
                       string image = movie.posters.detailed;
   
                       // Create a Moviedata object by using movie information and add 
                       // that object to a collection.
                       results.Add(new MovieData(title, summary, image));
                    }
                
                   hasExecutedQuery = true;
               }
               catch (Exception)
               {
                   hasExecutedQuery = false;
                   showErrorMessage();
               }
           }
           private async void showErrorMessage()
           {
               var msg = new Windows.UI.Popups.MessageDialog
                   ("The service is unavailable or there was a problem with the service.");
   
               msg.Commands.Add(new Windows.UI.Popups.UICommand("Try again?"));
   
               msg.Commands.Add(new Windows.UI.Popups.UICommand("I'll try again later."));
   
               msg.DefaultCommandIndex = 0;
               msg.CancelCommandIndex = 1;
   
               var results = await msg.ShowAsync();
   
               if (results.Label == "I'll try again later.")
               {
                   hasExecutedQuery = true;
                   this.Results.Clear();
               }
               else
               {
                   hasExecutedQuery = false;
                   this.Results.Clear();
               }
   
   
           }
   
       }
   

9. Drücken Sie STRG+UMSCHALT+A. Vergewissern Sie sich, dass Klasse ausgewählt ist. Klicken Sie im Dialogfeld Neues Element hinzufügen auf Klasse, und geben Sie dann die Zeichenfolge PickaFlickViewModel.cs ein. Klicken Sie auf Hinzufügen.

10. Ersetzen Sie in PickaFlickViewModel.cs den Code class PickaFlickViewModel {} durch folgenden Code:

    // Provides an object that returns movie data. You can bind to this class in the designer.
        // For example, by referencing this class in the ItemSource property of a GridView control. 
        public class PickaFlickViewModel
        {
    // A Rotten Tomatoes API key is required. See https://go.microsoft.com/fwlink/?LinkId=313841 
            private static readonly string apikey = "Insert API Key Here";
            private static readonly string baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
            private static readonly string moviesSearchUrl = baseUrl + "/lists/movies/box_office.json?apikey=" + apikey;
    
            private static readonly Uri uri = new Uri(moviesSearchUrl);
    
            private readonly PickaFlickQuery query = new PickaFlickQuery(uri);
            
            // Property that returns a collection of MovieData objects. 
            public PickaFlickQuery Query
            {
                get
                {
                    return this.query;
                }
            }
        }
    

    Wichtig

    Wenn Sie einen Rotten Tomatoes-API-Schlüsse haben, ersetzen Sie den Text "API-Schlüssel hier einfügen" mit dem Schlüssel.Die App wird ohne den Schlüssel nicht wie erwartet ausgeführt.

11. Drücken Sie STRG+UMSCHALT+S, um alle Änderungen zu speichern, und wechseln Sie dann zu Blend.

12. In Blend, wenn Sie gefragt werden, ob Sie das Projekt erneut laden möchten. Klicken Sie auf Ja.

    

Festlegen des DataContext

Indem Sie den DataContext festlegen, geben Sie die Quelldaten für die Objekte an, die in der App angezeigt werden.

So legen Sie den DataContext fest

1. Drücken Sie STRG+B, um das Projekt zu erstellen, sodass die von Ihnen in Visual Studio vorgenommenen Änderungen in Blend zur Verfügung stehen.

2. Achten Sie darauf, dass MovieDisplay.xaml geöffnet ist, indem Sie auf die Registerkarte MovieDisplay.xaml oben im Dokumentfenster klicken. Klicken Sie im Bereich Objekte und Zeitachsen auf Raster.

3. Klicken Sie im Bereich Eigenschaften rechts von DataContext auf Neu.

   

4. Klicken Sie im Dialogfeld Objekt auswählen auf PickaFlickViewModel. Klicken Sie auf OK.

   Tipp

   Deaktivieren Sie das Kontrollkästchen Alle Assemblys anzeigen (in der unteren linken Ecke des Dialogfelds), wenn die Liste nicht zu lang ist, um leicht angezeigt zu werden.

   

Erstellen einer Ansicht der Daten

Sie können einfach eine datengebundene GridView erstellen, die die Daten für Ihre Film-App anzeigt, indem Sie den Knoten Results vom Abschnitt DataContext des Bereichs Daten auf die Entwurfsoberfläche ziehen. Die GridView und eine damit in Zusammenhang stehende DataTemplate wird automatisch erstellt, und die Daten werden auf der Entwurfsoberfläche angezeigt.

Die PickaFlick-App verwendet kein GridView-Steuerelement. Sie verwendet ein FlipView-Steuerelement, mit dem Sie leicht durch Elemente in einer Liste blättern können. Sie können diese Ansicht schnell erstellen, indem Sie Ihrem Projekt eine FlipView hinzufügen und dann den Knoten Ergebnisse direkt auf die FlipView im Bereich Objekte und Zeitachse ziehen.

So erstellen Sie eine Ansicht der Daten mithilfe eines FlipView-Steuerelements

1. Klicken Sie im Bereich Objekte auf Steuerelemente, und doppelklicken Sie dann auf FlipView.

   

2. Klicken und ziehen Sie dann im Abschnitt Datenkontext des Bereichs Daten auf Ergebnisse : (MovieData), und legen Sie es dann im Steuerelement FlipView im Bereich Objekte und Zeitachse ab.

   Tipp

   Wenn der Knoten Ergebnisse nicht sichtbar ist, erweitern Sie die Knoten im Abschnitt Datenkontext, bis Sie ihn finden.

   

   Das Daten werden jetzt auf der Entwurfsoberfläche innerhalb des FlipView-Steuerelements angezeigt. Nun können Sie das Layout mit der Daten anpassen.

   

   Tipp

   Wenn eine nicht autorisierte Ausnahme ausgelöst und auf der Entwurfsoberfläche angezeigt wird, doppelklicken Sie auf den API-Schlüssel, und achten Sie darauf, dass er im Code korrekt eingegeben wird.

Formatieren der Datenansicht

Die Flipview ist an Ort und Stelle, und die Daten wurden geladen, aber die Filmanzeige sieht nicht ganz richtig aus. Sie können die erzeugte Datenvorlage so formatieren, dass ihr Aussehen Ihren Wünschen entspricht, und dann können Sie die Datenbindungen verfeinern.

Anpassen der Datenvorlage

Während Sie den Bereich Ergebnisse auf die FlipView zogen, wurden eine Datenvorlage automatisch generiert. Sie können die Vorlage ändern, indem Sie sie so anpassen, das sie den Daten, die in der fertig gestellten Beispiel-App angezeigt werden, mehr ähnelt.

So bearbeiten Sie eine generierte Vorlage

1. Klicken Sie im Bereich Objekte und Zeitachse mit der rechten Maustaste auf FlipView, zeigen Sie auf Zusätzliche Vorlagen bearbeiten, zeigen Sie dann auf Generierte Elemente bearbeiten (ItemTemplate), und klicken Sie dann auf Aktuelle bearbeiten.

   

2. Drücken Sie im Panel Objekte und Zeitachse die STRG-TASTE, und klicken Sie dann auf Rahmen und auf StackPanel. Klicken Sie mit der rechten Maustaste, und klicken Sie dann auf Löschen.

3. Klicken Sie im Bereich Objekte und Zeitachsen auf Raster. Klicken Sie im Bereich Eigenschaften in der Kategorie Layout rechts neben Breite auf Auf automatisch festlegen. Wiederholen Sie diesen Schritt für Höhe.

4. Klicken Sie rechts neben Rand auf Erweiterte Optionen und dann auf Zurücksetzen.

Nun können Sie mit dem Entwerfen der benutzerdefinierten Vorlage beginnen.

Erstellen des Layoutrasters

Der Grid-Layoutbereich ist der Standardbereich für Blend-Projekte. Indem Sie die Entwurfsrichtlinien für Windows Store-Apps in Verbindung mit dem Grid-Layoutbereich befolgen, können Sie eine App formatieren, die sich an die Windows 8-Stilrichtlinien hält. Weitere Informationen zu den Richtlinien finden Sie unter Layout einer App-Seite.

Gemäß den Richtlinien beträgt die Grundmaßeinheit für eine Windows Store-App 20 x 20 Pixel, und jede Einheit wird weiter unterteilt in Untereinheiten von 5 x 5 Pixeln. Das Layout basiert auf einem Raster, das durch einen Header, einen linken Rand und einen Inhaltsbereich definiert wird. Gemäß den Richtlinien sind die Hauptelemente des Rasters:

• Seitenheader   Die Basislinie des Seitenheaders sollte 5 Einheiten oder 100 Pixel von oben betragen.

• Linker Rand   Der linke Rand sollte 6 Einheiten oder 120 Pixel vom linken Rand betragen.

• Inhaltsbereich   Der obere Rand sollte 7 Einheiten oder 140 Pixel von oben betragen.

Sie können Objekte mithilfe von Funktionsindikatoren ändern. Dies sind Ziehpunkte, die angezeigt werden. Objektfunktionsindikatoren werden an den Ecken und in der Mitte von Objektkonturen angezeigt. Funktionsindikatoren werden auch an den Enden von Führungslinien und Rasterlinien. Wenn Sie ein Raster erstellen, können Sie einen Einfügungsfunktionsindikator verwenden, um die Rasterlinie dort zu platzieren, wo Sie es möchten.

Es stehen drei verschiedene Optionen für die Größenanpassung von Zeilen und Spalten in einem Raster zur Verfügung, und jede dieser Optionen wirkt sich auf die Anordnung der Objekte innerhalb des Rasters aus. Die Größenanpassungsoptionen sind:

• Pixel   Verwendet Pixelwerte, um feste Größen festzulegen.

• Stern (*)   Verwendet Sternwerte und ähnelt den prozentualen Breiten.

• Auto   Verwendet eine relative Breite. Das bedeutet, dass die Objekte im Raster ihre Größe anpassen, wenn sich die Größe des übergeordneten Objekts ändert.

Das Layoutraster verwendet sowohl Spalten mit Pixelbreiten und Sternbreiten.

So erstellen Sie die Layoutrasterspalten

1. Die Originalvorlage besteht aus zwei Spalten (diese werden durch einen Rasterspaltenfunktionsindikator identifiziert) und einer Zeile. Klicken Sie auf den Rasterspaltenfunktionsindikator, und ziehen Sie ihn nach rechts.

   

2. Klicken Sie im Wert-Editor, der angezeigt wird, auf den Dropdown-Pfeil, um die Liste zu öffnen, und klicken Sie dann auf Pixel.

   

3. Geben Sie im numerischen Wert-Editor die Zahl 120 ein.

   

4. Zeigen Sie auf das obere Ende des Rasters links vom ersten Funktionsindikator, den Sie erstellt haben, und klicken Sie dann auf den orangefarbenen Einfügungsfunktionsindikator. Wiederholen Sie diesen Vorgang zwei weitere Male.

   Jetzt haben sie fünf Spalten.

5. Geben Sie im Wert-Editor für die zweite Spalte die Zahl 1 ein. Behalten Sie für die Option Größenanpassung die Einstellung Stern (*) bei.

6. Geben Sie im Wert-Editor für die dritte Spalte die Zahl 40 ein. Legen Sie für die Option Größenanpassung die Einstellung Pixel fest.

7. Geben Sie im Wert-Editor für die vierte Spalte die Zahl 1 ein. Behalten Sie für die Option Größenanpassung die Einstellung Stern (*) bei.

8. Geben Sie im Wert-Editor für die fünfte Spalte die Zahl 120 ein. Legen Sie für die Option Größenanpassung die Einstellung Pixel fest.

So erstellen Sie die Layoutzeilen

1. Zeigen Sie in der Entwurfsoberfläche auf die gepunktete blaue Linie am linken Ende des Rasters, und klicken Sie dann auf den orangefarbenen Einfügungsfunktionsindikator, der angezeigt wird.

   

2. Klicken Sie im Wert-Editor, der angezeigt wird, auf den Dropdown-Pfeil, um die Liste zu öffnen, und klicken Sie dann auf Pixel. Geben Sie im numerischen Wert-Editor die Zahl 100 ein.

3. Zeigen Sie auf den Ort unter der Rasterlinie, die sie gerade erstellt haben, und klicken Sie dann auf den orangefarbenen Einfügungsfunktionsindikator, der angezeigt wird.

4. Öffnen Sie die Werteditorliste, und klicken Sie dann auf Pixel. Geben Sie im numerischen Wert-Editor die Zahl 40 ein.

   Mit dieser Einstellung wird die zweite Rasterlinie 40 Pixel unterhalb der ersten Rasterlinie an der 140-Pixel-Marke platziert.

Jetzt sollten sie fünf Spalten und drei Zeilen haben.

Sie sind nun bereit, damit zu beginnen, dem Raster Inhalt hinzuzufügen. Das erste Objekt, das sie hinzufügen, ist das Logo.

So fügen Sie das Logo hinzu und formatieren es

1. Stellen Sie sicher, dass Raster weiterhin im Bereich Objekte und Zeitachse ausgewählt ist. Doppelklicken Sie im Bereich Projekte im Ordner Objekte auf SmallLogo-Chicken.png, um es der Entwurfsoberfläche hinzuzufügen.

2. Legen Sie im Bereich Eigenschaften in der Kategorie Layout die Eigenschaften HorizontalAlignment auf Zentriert und VerticalAlignment auf Unten fest.

3. Klicken Sie rechts neben Rand auf Erweiterte Optionen und dann auf Zurücksetzen.

4. Legen Sie in der Kategorie Allgemein die Option Strecken auf Kein fest.

   

Erstellen und Formatieren der Datenbindungen

Um die Vorlage abzuschließen, fügen Sie der Vorlage weiterhin Objekte hinzu, und dann binden Sie Daten an diese Objekte. Sie können dann die Anzeige der Objekte ändern, sodass die Daten so aussehen, wie sie es möchten. Der Typ von Objekten, den sie verwenden, wird dadurch bestimmt, was für Arten von Daten sie an diese binden möchten. Das Filmposterbild wird beispielsweise an ein Image-Steuerelement gebunden, während der Filmtitel und die Zusammenfassung an TextBlock-Steuerelemente gebunden werden.

So fügen Sie den Filmtitel hinzu und positionieren ihn

1. Bei Auswahl von Raster im Bereich Objekte und Zeitachse doppelklicken Sie im Bereich Objekte auf TextBlock, um ihn der Entwurfsoberfläche hinzuzufügen.

   Ein neues Textblock-Objekt wird in der linken oberen Ecke der Entwurfsoberfläche hinzugefügt. Drücken Sie auf Esc, um den Textbearbeitungsmodus zu beenden.

2. Um die Position des Textblock in der Spalte und Zeile des Rasters zu definieren, wo sie es haben möchten, legen Sie in der Kategorie Layout des Bereichs Eigenschaften Folgendes fest:

   • Zeile   0

     Damit wird der Textblock in der obersten Zeile positioniert.

   • RowSpan   1

     Der Titel sollte nicht länger als eine einzige Zeile sein.

   • Spalte   1

     Da die Spalten- und Zeilennummerierung bei 0 anfängt, wird mit dieser Einstellung der Textblock in der zweiten Spalte positioniert.

   • ColumnSpan   3

     Durch das Erstrecken auf mehrere Spalten wird gewährleistet, dass längere Titel in einer einzigen Zeile angezeigt werden.

   Der TextBlock wird jetzt oben rechts in der zweiten Spalte angezeigt.

3. Um den TextBlock innerhalb der Zeile dort zu positionieren, wo Sie ihn haben möchten, legen Sie VerticalAlignement auf Unten  fest.

Sie können nun den Text im TextBlock formatieren. Beim nächsten Vorgang legen Sie die Schriftart und die Größe des Texts fest, und dann ändern Sie die Farbe des Texts.

So formatieren Sie den Text im TextBlock

1. Gemäß den Richtlinien für Schriftarten (Windows Store-Apps), sollte beim Header für eine Windows 8-App Segoe UI Light mit 42 Pt verwendet werden.

   Wählen Sie in der Kategorie Text des Bereichs Eigenschaften den Eintrag Segoe UI Light aus der Liste Schriftart aus.

2. Für die Größe können Sie den Wert entweder aus der Liste rechts von der Liste Schriftart auswählen oder ihn direkt in den Wert-Editor eingeben. Für den Header geben Sie 42 Pt ein, und drücken Sie dann die EINGABETASTE.

   

3. Beachten Sie, dass das untere Ende der Zeichen über der Basislinie des Textblocks gleitet.

   

   Dieser zusätzliche Platz ist für Unterlängen bestimmt (die Unterlänge des Kleinbuchstabens g zum Beispiel). Sie möchten, dass die Basis des Haupttexts auf der Basislinie ruht, wobei für Unterlängen, die möglicherweise zu einem Titel gehören, unterhalb der Basislinie Platz ist. Um die Basislinie anzupassen, legen Sie in der Kategorie Layout den unteren Rand auf – 18 fest.

   Der Text ruht nun auf der Basislinie.

   

4. Klicken Sie in der Kategorie Pinsel des Bereichs Eigenschaften auf die Farbpipette .

   

   Zeigen Sie auf das Hühnerbild oben links auf der Entwurfsoberfläche. Beachten Sie, dass sich die Farbe des Texts im TextBlock ändert, abhängig davon, auf welchen Teil des Hühnerbilds Sie zeigen. Wenn Sie eine Rotton finden, den Sie mögen, klicken Sie auf das Bild, um die Schriftfarbe festzulegen.

   

Nun können Sie die Filmtiteldaten an den TextBlock binden.

So binden Sie die Filmtiteldaten an das TextBlock-Objekt

1. Klicken Sie in der Kategorie Allgemein rechts von Text auf Erweiterte Eigenschaften , und klicken Sie dann auf Datenbindung erstellen.

2. Im Dialogfeld Datenbindung für [TextBlock].Text erstellen klicken Sie auf Titel, und klicken Sie dann auf OK.

   

Anschließend fügen Sie die Filmkunst hinzu und formatieren diese.

So fügen Sie die Filmkunst hinzu und positionieren diese

1. Bei Auswahl von Raster im Bereich Objekte und Zeitachse doppelklicken Sie im Bereich Projekte im Ordner Objekte auf Temp.png, um die Datei der Entwurfsoberfläche hinzuzufügen.

   Ein neues Image-Objekt mit Temp.png als Quelle wird der Entwurfsoberfläche hinzugefügt.

2. Legen Sie in der Kategorie Layout im Bereich Eigenschaften die folgenden Werte fest:

   • Zeile   3

   • RowSpan   1

   • Spalte   1

   • ColumnSpan   1

3. Legen Sie HorizontalAlignment auf Zentriert  und VerticalAlignment auf Oben fest.

4. Klicken Sie rechts neben Rand auf Erweiterte Optionen und dann auf Zurücksetzen.

Machen Sie sich keine Gedanken über das Größenverhältnis des temporären Bilds. Nachdem Sie das Filmbild an das Image-Objekt gebunden haben, berichtigen Sie die Anzeige.

So binden Sie die Filmkunst an das Image-Objekt

1. Klicken Sie in der Kategorie Allgemein rechts von Quelle auf Erweiterte Eigenschaften , und klicken Sie dann auf Datenbindung erstellen.

2. Im Dialogfeld Datenbindung für [Image].Source erstellen klicken Sie auf Bild, und klicken Sie dann auf OK.

   

3. Klicken Sie in der Kategorie Allgemein in der Liste Strecken auf Einheitlich.

Anschließend fügen Sie die Zusammenfassung hinzu und formatieren diese. Einige Filmzusammenfassungen sind möglichweise ziemlich lang und erstrecken sich über die Höhe des Bildschirms hinaus. Um den Bildlauf bei der Zusammenfassung zu aktivieren, fügen Sie der Vorlage ein ScrollViewer-Objekt hinzu, und dann fügen Sie ein TextBlock dem ScrollViewer hinzu, um den Text anzuzeigen.

So fügen Sie die Filmzusammenfassung hinzu und positionieren sie

1. Bei Auswahl von Raster im Bereich Objekte und Zeitachse doppelklicken Sie im Bereich Objekte auf ScrollViewer, um ihn der Entwurfsoberfläche hinzuzufügen.

   Ein neues ScrollViewer-Objekt wird in der linken oberen Ecke der Entwurfsoberfläche hinzugefügt.

2. Bei Auswahl von ScrollViewer im Bereich Objekte und Zeitachse in der Kategorie Layout rechts von Breite klicken Sie auf Auf automatisch festlegen . Wiederholen Sie diesen Schritt für Höhe.

3. Um den Textblock in der Kategorie Layout des Bereichs Eigenschaften zu positionieren, legen Sie folgende Werte fest:

   • Zeile   2

   • RowSpan   1

   • Spalte   3

   • ColumnSpan   1

   Der ScrollViewer wird jetzt oben links in der dritten Zeile in der vierten Spalte angezeigt.

4. Bei Auswahl von ScrollViewer im Bereich Objekte und Zeitachse doppelklicken Sie im Bereich Objekte auf TextBlock, um einen zweiten TextBlock der Entwurfsoberfläche hinzuzufügen.

   Ein neues ScrollViewer-Objekt wird dem Textblock-Objekt hinzugefügt. Drücken Sie auf Esc, um den Textbearbeitungsmodus zu beenden.

Es wird einfacher sein, den Text zu formatieren, nachdem Sie das TextBlock-Element an die Filmzusammenfassungsdaten gebunden haben.

So binden Sie die Filmzusammenfassungsdaten an das TextBlock-Objekt

1. Klicken Sie in der Kategorie Allgemein rechts von Text auf Erweiterte Eigenschaften , und klicken Sie dann auf Datenbindung erstellen.

2. Im Dialogfeld Datenbindung für [TextBlock].Text erstellen klicken Sie auf Zusammenfassung, und klicken Sie dann auf OK.

   

Sie können nun den Zusammenfassungstext formatieren.

So formatieren Sie den Text im TextBlock

1. Die Richtlinien für Schriftarten (Windows Store-Apps) empfehlen die Verwendung von Segoe UI Semilight als Textschriftart für eine Windows 8-App.

   Wählen Sie in der Kategorie Text des Bereichs Eigenschaften den Eintrag Segoe UI Semilight aus der Liste Schriftart aus.

2. Für die Größe können Sie den Wert entweder aus der Liste rechts von der Liste Schriftart auswählen oder innerhalb des Wert-Editors klicken und dann die Pfeile nach oben oder unten verwenden, um die Schriftgröße auszuwählen. Drücken Sie die EINGABETASTE. Wählen Sie eine Schriftgröße, die Ihnen gefällt, indem Sie die Anzeige auf der Entwurfsoberfläche überprüfen.

3. Klicken Sie in der Kategorie Pinsel im Bereich Eigenschaften auf die Farbpipette , um eine Farbe aus der Anzeige auszuwählen, oder klicken Sie innerhalb des Farb-Editors, um eine Farbe aus der Palette auszuwählen.

   

Vorschau für verschiedene Geräteanzeigen

Weil Blend eine Live-Ansicht Ihrer App anzeigt, können Sie sehen, ob sie so aussieht, wie Sie es möchten, ohne sie ausführen zu müssen. Mithilfe des Bereichs Gerät ist auch eine Vorschau möglich, die zeigt, wie Ihre App in verschiedenen Geräteanzeigen aussieht.

So aktivieren Sie Anzeige im Gerätebereich

• Um die Option Anzeige zu aktivieren, beenden Sie den Vorlagenbearbeitungsmodus, indem Sie auf Bereich auf "{...}" zurücksetzen  klicken.

Hinzufügen eines integrierten Verhaltens

Wenn Sie Ihre App ausführen, wird die Hauptseite angezeigt, und das Hühnerschaltflächenbild ändert sich, wenn Sie mit dem Zeiger darauf zeigen. Wenn Sie auf die Schaltfläche klicken, geschieht nichts, denn es wurde kein Klickereignisauslöser für das Steuerelement definiert. Sie können ein integriertes Verhalten verwenden, um der Schaltfläche ein NavigateToPageAction-Verhalten hinzuzufügen, das sie zur Filmanzeigeseite führt.

Hinzufügen eines NavigateToPageAction-Verhaltens zum Schaltflächensteuerelement

1. Wechseln Sie zu MainPage.xaml. Bei Auswahl von Schaltfläche im Bereich Objekte und Zeitachse doppelklicken Sie im Bereich Objekte in der Kategorie Verhalten auf NavigateToPageAction, um die Datei der Schaltfläche hinzuzufügen.

   Ein EventTriggerBehavior und eine NavigateToPageAction werden im Bereich Objekte und Zeitachse angezeigt.

   

2. In Bereich Eigenschaften wird die Kategorie Allgemein angezeigt. Klicken Sie in der Dropdownliste TargetPage auf MovieDisplay.xaml.

   

   Tipp

   Alternativ können Sie auf EventTriggerBehavior im Bereich Objekte und Zeitachse klicken, und klicken Sie dann im Bereich Eigenschaften auf die Schaltfläche Aktionen (Auflistung).Klicken Sie im Dialogfeld DependencyObjectCollection-Editor: Aktionen im Abschnitt Eigenschaften auf MovieDisplay in der Dropdownliste TargetPage.

Drücken Sie F5, um die App zu erstellen und auszuführen. Klicken Sie auf die Hühnerschaltfläche, um die Filmdetailseite zu öffnen. Klicken Sie sich durch die neuen Versionen mithilfe der Pfeile rechts und links der Seite hindurch.

Drücken Sie ALT+F4, um die App zu schließen.

Nächste Schritte

Wenn dies eine wirkliche App wäre, wäre der nächste Schritt, Ihre App zu veröffentlichen. Weitere Informationen zum Veröffentlichen der App im Windows Store finden Sie unter Übersicht über das Veröffentlichen einer App im Windows Store.