Windows-Apps
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Erstellen Ihrer ersten Windows Store-App mit Blend, Teil 1: Masterseite (HTML und JavaScript)

Sie können eine Windows Store-App schneller und effizienter entwickeln, indem Sie die Auflistung von HTML- und CSS-Tools in Blend for Visual Studio verwenden. Bei diesem Lernprogramm erstellen Sie die einfache App, „PickaFlick“, in der Sie eine Liste neuer Filmen durchsuchen können. Diese Liste wird mit einer API von Rotten Tomatoes generiert, und Sie müssen sich registrieren, um einen API-Schlüssel zu erhalten, den Sie in den Code einfügen.



Die Startseite der PickaFlick-App

Erstellen Ihrer ersten Windows Store-App – Blend (HTML)

In Teil 1 dieses Lernprogramms erstellen Sie die Startseite der App. Dabei lernen Sie Folgendes:

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.

Erfahrung mit HTML, CSS oder JavaScript ist nicht erforderlich, um dieses Lernprogramm abzuschließen. Für eine erfolgreiche Verwendung von Blend ist eine gewisse Erfahrung mit HTML, CSS und JavaScript allerdings hilfreich.

Blend und Visual Studio bieten dieselben Projektvorlagen, die Ihnen dabei helfen, mit der Entwicklung einer Windows Store-App zu beginnen. Weitere Informationen zu den von Blend und Visual Studio angebotenen Vorlagen für das Entwickeln anderer Apps finden Sie unter Vorlagen für eine schnelle App-Entwicklung.

So erstellen Sie ein Projekt

  1. Klicken Sie in Blend im Menü Datei auf Neues Projekt.

    Auf der linken Seite des Dialogfelds Neues Projekt wird eine Liste der Projekttypen angezeigt. Wenn Sie auf einen Projekttyp klicken, werden die Projektvorlagen, die diesem Typ zugeordnet sind, auf der rechten Seite angezeigt.

    Dialogfeld "Neues Projekt" in Blend
  2. Klicken Sie in der Liste Projekttypen auf HTML (Windows Store).

  3. Klicken Sie in der Liste der Projektvorlagen auf Leere App.

  4. Geben Sie im Textfeld Name den Namen PickaFlick ein.

  5. Überprüfen Sie im Textfeld Speicherort den Projektspeicherort.

  6. In der Liste Sprache ist JavaScript die einzige Option.

Die visuelle Oberfläche im Standardarbeitsbereich von Blend ermöglicht das Erstellen von Windows Store-Apps: die Entwurfsoberfläche, Bereiche, Arbeitsbereichskonfigurationen, Erstellungsansichten und Menüs. Weitere Informationen finden Sie unter Blend-Arbeitsbereich für Apps (HTML).

Wenn Sie an einem Projekt arbeiten, werden die in einem Bereich der App vorgenommenen Änderungen über die gesamte Schnittstelle hinweg umgesetzt.

Klicken Sie oben links auf die Registerkarte Projekte, um die Ordner und Dateien zu finden, die automatisch generiert werden, wenn Sie ein Projekt mit der Vorlage Leere App erstellen:

  • References   Darin sind schreibgeschützte CSS und die Windows-Bibliotheken für JavaScript enthalten.

  • css   Darin ist die CSS-Datei für die App enthalten.

  • images   Darin sind die Standardimageressourcen für die App enthalten.

  • js   Darin ist die Datei „default.js“ für die App enthalten.

  • default.html   Darin ist die Standardstartseite der App enthalten.

  • package.appxmanifest   Führt den Inhalt dieser App auf und beschreibt ihre Features, (z. B., ob die App auf die Webkamera des Benutzers zugreifen kann). Mit dieser Datei wird auch die Startseite der App angegeben.

Blend – Standardprojektdateien und -ordner (HTML)

Weitere Informationen finden Sie unter Projektbereich (HTML).

Unter dem Bereich Projekte, unten links von der Schnittstelle, befindet sich der Bereich Live-DOM. Im Bereich Live-DOM wird die Struktur von „default.html“ dargestellt. Wenn Sie body erweitern, wird das Element p angezeigt.

Der Bereich Live-DOM liefert eine Ansicht der Objekthierarchie der HTML-Seite, an der Sie arbeiten. Indem Sie direkt im Bereich Live-DOM arbeiten, können Sie die Objekthierarchie schnell und einfach ändern.

Standardprojektbereich in Blend (HTML)

Weitere Informationen finden Sie unter Live-DOM-Bereich (HTML).

Das Element p enthält den Text „Inhalt hier einfügen“, der auf der Entwurfsoberfläche angezeigt wird.

Standardentwurfsoberfläche in Blend (HTML)

In der zugehörigen Dokumentansicht, können Sie Code für „default.html“ und „default.css“ finden. Wenn Sie Elemente ändern, die auf der Entwurfsoberfläche angezeigt werden, werden die verwandten Dokumente automatisch aktualisiert. Wenn Sie Änderungen an JavaScript vornehmen, werden Sie darüber benachrichtigt, dass die Ansicht aktualisiert werden muss. Klicken Sie in der rechten oberen Ecke der App auf Aktualisieren Symbol "Aktualisierung", um die Änderungen an der Entwurfsoberfläche anzuzeigen.

Standardansicht für verknüpfte Dokumente in Blend (HTML)

Weitere Informationen finden Sie unter Ansicht "Verwandte Dokumente" (HTML).

Wenn „default.html“ und „default.css“ nicht angezeigt werden, klicken Sie auf das Ansichtssymbol Teilen  in der rechten oberen Ecke der Entwurfsoberfläche.

In diesem Verfahren entfernen Sie das standardmäßige p-Element aus der Datei „default.html“, fügen body eine Hintergrundfarbe hinzu und überprüfen, ob der Code bei der Arbeit aktualisiert wird.

So ändern Sie die Anzeige von „default.html“

  1. Klicken Sie im Bereich Live-DOM mit der rechten Maustaste auf p, und klicken Sie dann auf Löschen.

  2. Erweitern Sie im Bereich Stilregeln die Option default.css, und klicken Sie dann auf body.

    Beachten Sie, dass der body-Selektor auch in „default.css“ in der entsprechenden Dokumentenansicht aktiviert ist.

  3. Erweitern Sie im Bereich CSS-Eigenschaften die Kategorie Hintergrund.

  4. Klicken Sie neben background-color auf Nicht festgelegt.

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

    Der body-Selektor in „default.css“ enthält jetzt die Stilregel background-color: #D5BF9A.

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. Weitere Informationen finden Sie unter Vorlagen für eine schnelle App-Entwicklung.

Für die PickaFlick-App fügen Sie dem vorhandenen Projekt eine Elementvorlage für HTML-Seiten hinzu. Die Seite enthält den HTML-Code für die Startseite der App.

So fügen Sie eine Elementvorlage für eine HTML-Seite hinzu

  1. Klicken Sie im Menü Datei auf Neues Element.

    Das Dialogfeld Neues Element wird angezeigt.

    Blend – HTML-Seite "Neues Element hinzufügen" (HTML)
  2. Klicken Sie in der Liste von Elementvorlagen auf HTML-Seite.

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

Beachten Sie, dass das Markup für „homepage.html“ in der zugehörigen Dokumentenansicht minimal ist.

Blend – HTML-Standardseite

Da „homepage.html“ in default.html „als Fragment“ angezeigt wird, erbt „homepage.html“ das Format von „default.html“. Sie müssen „homepage.html“ also nicht CSS- oder HTML-Verweise hinzuzufügen.

Fügen Sie der Seite als Nächstes ein div-Element hinzu, und nennen Sie div um. Wenn Sie das div-Element umbenennen, wird ein id-Attribut darauf angewendet, wodurch das div-Element einfacher unter den anderen div-Elemente auf der Seite und in der App identifiziert werden kann.

Sie können der HTML-Seite wie folgt Elemente hinzufügen:

  • Direkte Eingabe im Code-Editor

  • Einfügen des Elements mithilfe des Bereichs Objekte

  • Direktes Einfügen des Elements im Bereich Live-DOM

Die folgende Prozedur zeigt alle drei Methoden zum Hinzufügen eines Elements zur HTML-Seite an. Nachdem Sie das div-Element hinzugefügt haben, fügen Sie ein id-Attribut div hinzu, indem Sie es im Bereich Live-DOM umbenennen.

So fügen der Datei „homepage.html“ ein div-Element hinzu

  1. Im Bereich Live-DOM klicken Sie mit der rechten Maustaste auf body, klicken Sie auf Element einfügen, und klicken Sie dann auf div, oder drücken Sie Ctrl+Shift+=.

    Tipp Tipp

    Der Entwurfsoberfläche in Blend kann wie folgt ein Element hinzugefügt werden:

    • Stellen Sie den Cursor in der entsprechenden Dokumentenansicht in homepage.html zwischen das öffnende und das schließende body-Tag, und geben Sie dann <div> ein. Das Endtag wird automatisch hinzugefügt.

    • Klicken Sie im Bereich Live-DOM auf body, und suchen Sie im Bereich Objekte das Element div, indem Sie im Textfeld Suchen die Zeichenfolge div eingeben. Führen Sie dann eine der folgenden Aktionen aus:

      • Doppelklicken Sie auf div, um der Seite ein div-Element hinzuzufügen.

      • Ziehen Sie div aus dem Bereich Objekte auf die Entwurfsoberfläche.

      • Ziehen Sie div aus dem Bereich Objekte auf den Bereich Live-DOM.

      • Zeichnen Sie div direkt auf der Entwurfsoberfläche.

    Ein neues div-Element im Bereich Live-DOM und im HTML-Code von homepage.html angezeigt wird.

  2. Führen Sie im Bereich Live-DOM eine der folgenden Aufgaben aus, um id auf das neue div-Element anzuwenden:

    • Doppelklicken Sie auf div, und geben Sie in das Textfeld homepageContainer ein.

      Blend – Bereich "Live-Dom" – Umbenennen (HTML)
    • Klicken Sie mit der rechten Maustaste auf div, klicken Sie auf ID bearbeiten, und geben Sie dann homepageContainer ein.

    • Geben Sie im Bereich HTML-Attribute im Feld Id die Zeichenfolge homepageContainer ein.

    In der entsprechenden Dokumentenansicht in „homepage.html“ ein id-Attribut mit dem Wert homepageContainer zum div-Element hinzugefügt wird.

    HompageContainer-ID in Blend (HTML)

In diesem Abschnitt wird Folgendes erläutert:

  • Implementieren des Navigationsmodells für Einzelseiten

  • Zwischen Blend und Visual Studio wechseln, um JavaScript zu ändern

Bei der PickaFlick-App verwenden Sie das Navigationsmodell für Einzelseiten. Dies bedeutet, dass Sie die App auf einer einzigen Seite anzeigen und bei Bedarf Daten von anderen Seiten auf diese Seite laden. Sie unterteilen die Anwendung weiterhin in mehrere Dateien, aber die App lädt andere Seiten als Seitenfragmente in die Standardseite, anstatt von einer Seite zur anderen zu springen (mehrseitige Navigation). Weitere Informationen finden Sie unter Schnellstart: Verwenden der Einzelseitennavigation (Windows Store-Apps mit JavaScript und HTML).

Um den Inhalt von „homepage.html“ in „default.html“ zu laden, müssen Sie den Namespace „Win.JS UI.Fragment“ aufrufen, damit das Seitenfragment in „default.html“ gerendert wird. Sie können die JS-Dateien in Blend ändern, aber Sie können JavaScript leichter hinzufügen, ändern und debuggen, indem Sie die in Visual Studio integrierten Tools verwenden. Weitere Informationen zu diesen Tools finden Sie unter JavaScript IntelliSense.

Beim Bearbeiten eines Projekts können Sie einfach zwischen Blend und Visual Studio wechseln. Eine Projektdatei kann sogar auf dem gleichen Computer gleichzeitig in Blend und in Visual Studio geöffnet sein. Wenn Sie eine Änderung an einer Datei in einem Tool speichern und dann zu dem anderen Tool wechseln, laden Sie die Datei einfach neu, um die Ansicht des Projekts zu aktualisieren.

Hinweis Hinweis

Sie können Code in Blend oder Visual Studio kopieren und einfügen. Doch ist Visual Studio das empfohlene Tool zum Schreiben oder Bearbeiten von JavaScript. In diesem Schritt wird gezeigt, wie Sie zwischen Blend und Visual Studio problemlos wechseln können, wenn Sie an einem einzelnen Projekt arbeiten.

Wenn Sie dem Projekt bei der Arbeit in Visual Studio neue Dateien hinzufügen, müssen Sie das Projekt mit Alles speichern (STRG+UMSCHALT+S) speichern, oder die App erstellen und ausführen, bevor Sie zu Blend wechseln. Wenn Sie zu Blend wechseln, wird eine Meldung angezeigt, mit der Sie gefragt werden, ob Sie das Projekt erneut laden möchten. Klicken Sie auf Ja, und die neuen Dateien werden dem Projekt in Blend hinzugefügt.

Sie können jetzt einen Verweis auf den Windows JavaScript Fragment-Namespace hinzufügen.

So fügen Sie dem WinJS.UI.Fragments-Namespace einen Verweis in „default.js“ hinzu

  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.

  2. Erweitern Sie im Projektmappen-Explorer in Visual Studio den Ordner js, und doppelklicken Sie dann auf "default.js", um sie zu öffnen.

  3. Fügen Sie direkt nach app.start(); den folgenden Code in die Datei ein:

    //add DOMContentLoaded event
        document.addEventListener("DOMContentLoaded", loadInitialPage, false);
    
  4. Fügen Sie den folgenden Code am Ende des Skripts ein.

    //When initial page is loaded, use WinJS.UI.Fragments Namespace to load homePage.html into the body element of default.html
    var target;
    
    function loadInitialPage() {
        target = document.querySelector("body");
        WinJS.UI.Fragments.renderCopy("/homePage.html", target).done();
    }
    
  5. Drücken Sie STRG+UMSCHALT+S, um alle Änderungen zu speichern, und wechseln Sie dann zu Blend.

  6. Klicken Sie auf Erneut laden, wenn Sie aufgefordert werden, das Projekt erneut zu laden. Blend gibt die gerade am Projekt in Visual Studio vorgenommenen Änderungen wieder.

Beachten Sie, dass im Bereich Live DOM nun ein neues homepageContainer-Element angezeigt wird. Klicken Sie oben in der App auf die Registerkarte default.html. Beachten Sie, dass die Hintergrundfarbe für homepageContainer im Bereich Live-DOM eine andere Farbe als der Rest des Live-DOM-Bereichs aufweist. Dies gibt an, dass sie ihren Ursprung auf einer anderen Seite hat. Rechts neben homepageContainer befindet sich das Fragmentsymbol Blend-Fragmentsymbol.

Blend - ein Fragment im LiveDOM-Bereich

Wenn Sie im Bereich Live-DOM auf homepageContainer klicken, wird homepage.html in der verwandten Dokumentenansicht geöffnet. Wenn Sie zusätzlich zu diesen Hinweisen ein Element auswählen, das von „homepage.html“ stammt, während Sie am Anfang der App unter der Registerkarte default.html an „default.html“ arbeiten, wird die Benachrichtigung „Der ausgewählte Inhalt ist Teil von homepage.html“ angezeigt. Anhand dieser Meldung können Sie die Quelle der Objekte oder Elemente identifizieren, die auf der Entwurfsoberfläche angezeigt werden, wenn Sie an default.html, dem Kern des Navigationsmodells für Einzelseiten, arbeiten.

Blend – Meldung zu ausgewähltem Inhalt (HTML)

Die PickaFlick-App wird mit Bildern erstellt, die von einem Grafikdesigner erstellt wurden. Neben dem Hinzufügen von visuellem Reiz, dient das Hühnerbild auch als Schaltfläche, die der Benutzer zum Starten der Anwendung anklickt.

Sie können die Bilder dem Projekt wie folgt hinzufügen:

  • Mithilfe des Befehls Vorhandenes Element hinzufügen im Menü Projekt

  • Kopieren und Einfügen

  • Drag & Drop

In diesem Beispiel werden Sie die Bilder kopieren und einfügen.

So fügen Sie dem Projekt die Bilder hinzu

  1. Die folgenden Bilder sind im Beispielprojekt enthalten:

    • ChickenSprite

    • FilmStrip

    • MainLogo

    • SmallLogo-Huhn

    • TempBoxArt

    Wenn Sie das Beispielprojekt heruntergeladen haben, öffnen Sie den Ordner Assets, drücken Sie STRG+A und dann STRG+C.

  2. Klicken Sie in Blend im Bereich Projekte mit der rechten Maustaste auf den Ordner Bilder, und klicken Sie auf Einfügen.

Sie können die Bilder zum Formatieren der App der Entwurfsoberfläche hinzufügen.

Sie ändern die Darstellung der App hauptsächlich, indem Sie CSS-Stile anwenden. Sie können die Stile mithilfe eines beliebigen Text-Editors bearbeiten. Sie können sie aber leichter mithilfe eines anspruchsvollen CSS-Toolsatzes in Blend erstellen und bearbeiten.

Sie können bestimmte CSS-Eigenschaften in Blend wie folgt festlegen:

  • Direkte Eingabe im Code-Editor.

  • Suchen der zu bearbeitenden Eigenschaft im Bereich CSS-Eigenschaften, entweder visuell oder durch Eingeben des Eigenschaftennamens im Textfeld Suchen oder festlegen, und dem Eingeben des Werts, der im Wert-Editor für diese Eigenschaft verwendet werden soll.

  • Direktes Eingeben der Eigenschaftendeklaration in das Textfeld Durchsuchen oder festlegen und Verwenden der richtigen CSS-Syntax. Wenn Sie die Eigenschaft background-repeat z. B. auf repeat-x festlegen möchten, geben Sie background-repeat: repeat-x im Textfeld Suchen oder festlegen ein, und drücken Sie die EINGABETASTE.

    Sie können auch mehrere Eigenschaften für das gleiche Element eingeben, indem Sie die Eigenschaftennamen und die Werte direkt in das Textfeld Durchsuchen oder festlegen eingeben. Verwenden Sie die richtige CSS-Syntax, und trennen Sie jede Formdefinition mit einem Semikolon (;) von der Nächsten. Sie können die background-repeat-Eigenschaft z. B. auf repeat-x und position-y auf center festlegen, indem Sie background-repeat: repeat-x; position-y: center in das Textfeld Durchsuchen oder festlegen eingeben und die EINGABETASTE drücken.

Sie können Eigenschaften im Bereich CSS-Eigenschaften auf zwei Arten anordnen: nach Kategorie oder nach Name.

Blend - CSS-Eigenschaftenpanel, Option "Anordnen nach"

Wenn Sie Eigenschaften nach Kategorie anordnen, werden die CSS-Eigenschaften nach Kategorie gruppiert angezeigt, wobei die Kategorien alphabetisch angeordnet sind. Wenn Sie die Eigenschaften nach Name anordnen, wird eine alphabetische Liste aller verfügbaren CSS-Eigenschaften angezeigt.

Danach wenden Sie eine height-Eigenschaft auf homepageContainer an. Anschließend fügen Sie die Bilder hinzu und formatieren sie.

So ändern Sie die Höhe des homepageContainer-Elements

  1. Klicken Sie im Bereich Live-DOM mit der rechten Maustaste auf homepageContainer und dann auf Stilregel aus Element-ID erstellen.

    Beachten Sie, dass im Bereich Style Rules nun ein neues #homepageContainer-Element angezeigt wird. Eine grüne Kontur gibt an, dass es das gerade ausgewählte Format ist. Der gelbe Indikator unter #homepageContainer ist die Einfügemarke für neue Formatvorlagen. Sie können die Einfügemarke verschieben, wenn Sie neue Stile an anderer Stelle einfügen möchten. Beachten Sie auch, dass das Element #homepageContainer (default.css) im Bereich CSS-Eigenschaften jetzt im Fenster Angewendete Stile angezeigt wird.

  2. Suchen Sie die Eigenschaft für die Höhe im Bereich CSS-Eigenschaften, indem Sie im Textfeld Suchen oder festlegen die Zeichenfolge height eingeben.

  3. Geben Sie im Wert-Editor für height den Wert 100% ein.

    Wenn die Eigenschaften nach Kategorie angeordnet werden, wird line-height zuerst in der Liste angezeigt. Wenn die Eigenschaften nach Name angeordnet werden, wird height zuerst in der Liste angezeigt.

So fügen Sie das Hintergrundbild hinzu und formatieren es

  1. Klicken Sie im Textfeld Durchsuchen oder festlegen auf das X, um die Auswahl der vorherigen Prozedur zu löschen.

  2. Suchen Sie in der Kategorie Hintergrund des Bereichs CSS-Eigenschaften das Feld Ebenen, klicken Sie auf Hinzufügen Schaltfläche „Hinzufügen“ und dann auf die Schaltfläche „Bildressource“ Schaltfläche für Hintergrundbild in Blend.

  3. Klicken Sie in der Quellliste auf FilmStrip.png.

  4. Legen Sie position-y auf center und repeat dann auf repeat-x fest.

    Blend, FilmStrip.png vorher und nachher (HTML)

So fügen Sie das Hauptlogo hinzu und formatieren es

  1. Klicken Sie im Feld Ebenen auf Hinzufügen Schaltfläche „Hinzufügen“ und dann auf die Schaltfläche „Bildressourcen“ Schaltfläche für Hintergrundbild in Blend.

  2. Klicken Sie in der Quellliste auf MainLogo.png.

    Beachten Sie, dass „MainLogo.png“ nach „filmstrip.png“ angezeigt wird.

  3. Ändern Sie z-index (Ebenenreihenfolge), indem Sie im Feld Ebenen, MainLogo.png auswählen, und dann auf den Aufwärtspfeil klicken, um MainLogo.png in der Liste der Bilder über filmstrip.png zu schieben.

    „MainLogo.png“ wird jetzt oberhalb von „filmstrip.png“ angezeigt.

    Blend MainLogo.png vorher und nachher (HTML)
  4. Legen Sie position-x und position-y auf center und repeat auf no-repeat fest.

    Blend, MainLogo.png (HTML)

In diesem Abschnitt fügen Sie das Hühnerbild hinzu und formatieren es. Das Hühnerbild wird in der Mitte der Masterseite angezeigt. Doch es ändert die Position, wenn Sie darauf zeigen. Dieser Effekt ist eigentlich keine Animation, sondern eine hover-Pseudoklasse, die auf das Bild angewendet wird. Standardmäßig wird nur die Hälfte des Bilds angezeigt. Wenn Sie darauf zeigen, wird der ausgeblendeten Bildbereich sichtbar, ersetzt die Standardansicht und simuliert eine Animation.

Blend, ChickenSprite.png (HTML)

Erstellen Sie zur leichteren Positionierung des Bilds einen flexbox- Layoutcontainer, indem Sie die Eigenschaft display von homepageContainer ändern. Weitere Informationen finden Sie unter Flexible Box-Layout (Flexbox).

So fügen Sie die Flexbox hinzu und formatieren sie

  1. Klicken Sie im Bereich Live-Dom auf homepageContainer.

  2. Öffnen Sie im Bereich Projekte den Ordner images, und doppelklicken Sie dann auf ChickenSprite.png, um der Entwurfsoberfläche das Hühnerbild hinzufügen.

    Wenn Sie auf homepageContainer klicken, haben Sie ChickenSprite.png als untergeordnetes Element von homepageContainer hinzugefügt. Das Element img ist jetzt aktiv, und das Hühnerbild wird auf der Entwurfsoberfläche angezeigt.

    Blend, chickenSprite.png auf der Entwurfsoberfläche (HTML)
  3. Klicken Sie im Bereich Live-DOM auf homepageContainer.

  4. Suchen Sie im Bereich CSS-Eigenschaften die Kategorie Layout, und klicken Sie dann in der Liste display auf flex.

  5. Legen Sie in der Kategorie FlexBox die Option align-items und justify-content auf center fest.

  6. Klicken Sie im Bereich Live-DOM auf das Element img, klicken Sie mit der rechten Maustaste auf Gruppieren in, und klicken Sie dann auf div oder Sie drücken STRG+G.

    Tipp Tipp

    Sie können das Element img auch auf div ziehen.

    Das Bildelement wird jetzt in einem div-Container eingeschlossen.

  7. Klicken Sie auf div und geben Sie im Textfeld spriteContainer ein.

  8. Klicken Sie mit der rechten Maustaste auf spriteContainer, und klicken Sie dann auf Stilregel aus Element-ID erstellen.

  9. Legen Sie im Bereich CSS-Eigenschaften den Wert height auf 180 px fest, und setzen Sie den Wert overflow-y auf hidden.

    Blend, chickenSprite.png vorher und nachher (HTML)
  10. Klicken Sie im Bereich Live-DOM auf img, und geben Sie dann im Textfeld chickenButton ein.

    Tipp Tipp

    Erweitern Sie spriteContainer, wenn das img-Element nicht sichtbar ist.

  11. Klicken Sie im Bereich Stilregeln auf rechts von default.css auf Hinzufügen Schaltfläche „Hinzufügen“.

  12. Klicken Sie im Bereich Stilregeln auf .newStyle, und geben Sie #chickenButton:hover ein, um einen Pseudoselektor für chickenButton zu erstellen.

    Beachten Sie, dass CSS IntelliSense bei der Eingabe die verfügbaren CSS-Verweise bereitstellt, damit das Entwickeln von Formatierungsregeln einfacher wird.

    Blend – Bereich für Stilregeln in CSS für IntelliSense (HTML)
  13. Legen Sie im Bereich CSS-Eigenschaften in der Kategorie Rand den Wert margin-top auf -180px fest.

Drücken Sie F5, um die App zu erstellen und auszuführen, oder drücken STRG+I, um die App im interaktiven Modus in der Vorschau anzuzeigen. Zeigen Sie auf den Hühnerbild, um zu bestätigen, dass das die Zustände des Hühnerbilds gewechselt werden. Drücken Sie ALT+F4, um die App zu schließen.

Sie können nun die Detailseite erstellen. Informationen zum Fortsetzen finden Sie unter Erstellen Ihrer ersten Windows Store-App mit Blend, Teil 2: Detailseite (HTML und JavaScript).

Community-Beiträge

Anzeigen:
© 2016 Microsoft