Entwerfen von Windows Store-Apps mit Blend für Visual Studio 2013

Blend for Visual Studio ist eine Sammlung von Entwurfstools, die in Visual Studio 2013 enthalten sind und die Sie für die visuelle Erstellung von Windows Store-Apps mit JavaScript, VB, C# oder C++ verwenden können.

Blend ist installiert, wenn Sie Visual Studio installieren. Um Blend zu suchen, geben Sie Blend in das Feld Suchen ein.

Sie können auch ein Projekt in Blend von Visual Studio aus öffnen. Führen Sie, während das Projekt in Visual Studio geöffnet ist, einen der folgenden Schritte aus:

• Klicken Sie im Menü Ansicht auf In Blend öffnen.

• Klicken Sie mit der rechten Maustaste auf die Projektdatei im Projektmappen-Explorer, und klicken Sie anschließend auf In Blend öffnen.

  

Blend enthält für mit JavaScript erstellte Windows Store-Apps eine Suite von HTML5- und CSS3-Tools, mit denen Sie diverse Aufgaben ausführen können, z. B. schnelles Erstellen von CSS3-Animationen, Definieren und Verwalten von Stilen sowie Debuggen von HTML und CSS. Weitere Informationen finden Sie in "Entwerfen von Windows Store-Apps (HTML)" weiter unten in diesem Artikel.

Informationen zum Erstellen Ihrer ersten Windows Store-App (HTML) mit Blend finden Sie unter Erstellen Ihrer ersten Windows Store-App mit Blend, Teil 1: Masterseite (HTML und JavaScript).

Blend enthält für mit VB, C# oder C++ erstellte Windows Store-Apps eine Suite von XAML-Tools, mit denen Sie diverse Aufgaben ausführen können, z. B. schnelles Anwenden von Stilen auf Steuerelemente, Erstellen und Definieren von Vorlagen sowie Bindung an Beispieldaten. Weitere Informationen finden Sie in "Entwerfen von Windows Store-Apps (XAML)" weiter unten in diesem Artikel.

Informationen zum Erstellen Ihrer ersten Windows Store-App (HTML) mit Blend finden Sie unter Erstellen Ihrer ersten Windows Store-App mit Blend, Teil 1: Masterseite (XAML und C#).

Weitere Informationen zu den Neuheiten in Blend finden Sie unter What’s new for HTML Developers in Blend for Visual Studio 2013 (Neuheiten für HTML-Entwickler in Blend für Visual Studio 2013, möglicherweise in englischer Sprache) und What’s new in Visual Studio 2013 Preview for authoring Windows Store XAML apps (Neuheiten in Visual Studio 2013 (Vorschau) beim Erstellen von Windows Store XAML-Apps, möglicherweise in englischer Sprache) im Visual Studio blog (Visual Studio-Blog, möglicherweise in englischer Sprache).

Verwenden von Blend mit Visual Studio

Visual Studio stellt grundlegende Tools zum Entwickeln von Windows Store-Apps bereit, darunter Entwicklerlizenzverwaltung, Manifest-Designer sowie Tools zum Codieren und Packen für das Senden von Apps zum Windows Store.

Mit Blend in Verbindung mit Visual Studio können Sie das Erscheinungsbild Ihrer App anhand der leistungsstarken HTML- und XAML-Entwurfstools in Blend schnell und einfach anpassen. Sie müssen sich nicht mehr auf die Syntax des Codes konzentrieren, sondern können sich von Grund auf mit der visuellen Erstellung Ihrer Anwendung befassen, einschließlich Struktur, Layout, Datenansichten sowie Aussehen und Verhalten der App.

Weitere Informationen zur Verwendung von Blend mit Visual Studio, einschließlich empfohlener Workflows und bewährter Vorgehensweisen, finden Sie unter Wechseln Sie zu Visual Studio und wieder zurück.

Die in Visual Studio in Blend erstellten Windows Store-App-Projekte sowie die in Blend in Visual Studio erstellten Windows Store-Apps können geöffnet und bearbeitet werden.

Beim Bearbeiten eines Projekts können Sie einfach zwischen Blend und Visual Studio hin- und her wechseln. Um von Visual Studio nach Blend zu wechseln, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und klicken Sie dann auf In Blend öffnen. Um von Blend nach Visual Studio zu wechseln, klicken Sie im Bereich Projekte mit der rechten Maustaste auf das Projekt, und klicken Sie dann auf In Visual Studio bearbeiten.

Entwerfen von Windows Store-Apps (JavaScript und HTML)

Mit Blend können Sie eine neue Windows Store-App mithilfe einer der integrierten HTML-Projektvorlagen erstellen oder eine vorhandene Windows Store-App öffnen, die in Visual Studio erstellt wurde. Wie jede systemeigene Windows-Anwendung verfügt eine mit HTML5, CSS3 und JavaScript erstellte Windows Store-App über direkten Zugriff auf die zugrunde liegende Plattform und ist in der Lage, Informationen gemeinsam mit anderen Anwendungen zu verwenden.

Das Erscheinungsbild der App kann mit einer Reihe von leistungsstarken HTML5- und CSS3-Entwurfstools schnell geändert werden. Diese können für die folgenden Aufgaben verwendet werden:

• Erstellen und Ändern von HTML-Elementen   Ziehen Sie HTML-Elemente und Windows App-Steuerelemente per Drag & Drop aus dem Bereich Objekte auf die Entwurfsoberfläche. Anschließend können Sie direkt auf der Benutzeroberfläche die Hierarchie ändern, die Eigenschaften festlegen und die Stile übernehmen. Weitere Informationen erhalten Sie unter Erstellen und Formatieren einer Elementvorlage.

• Anzeigen des Laufzeitzustands   Verwenden Sie den interaktiven Modus, um in Zuständen, die sonst nur zur Laufzeit verfügbar sind, auf Ihre App zuzugreifen und diese zu ändern. Verwenden des Interaktivmodus.

• Anzeigen von Entwurfszeitdaten   Die Datenbindung und -anzeige in der Windows Store-App ermöglicht ein leichteres Ändern der Datendarstellung zur Laufzeit. Weitere Informationen erhalten Sie unter Binden an die Filmdaten.

• Einbetten von benutzerdefinierten Schriftarten   Verwenden Sie den Schriftfamilien-Manager, um benutzerdefinierte Schriftarten in die Windows Store-App einzubetten. Weitere Informationen finden Sie unter Einbetten von benutzerdefinierten Schriftarten.

• Erstellen von CSS3-Animationen   Erstellen und bearbeiten Sie CSS3-Animationen mithilfe der integrierten Keyframe-Animationszeitachse.

• Definieren und Verwalten von Stilen   Im Bereich Stilregeln können Sie in kürzester Zeit CSS-Stile erstellen, im Bereich CSS-Eigenschaften können Sie anschließend Stildefinitionen anwenden, die CSS-Kaskade für jedes Element anzeigen (die virtuelle Regel Ausschlaggebende Eigenschaften) oder bestimmen, wie Windows 8.1 die CSS-Eigenschaftswerte für jedes Element berechnen soll (die virtuelle Regel Berechnete Werte). Weitere Informationen erhalten Sie unter Definieren von CSS-Stilregeln.

• Debuggen von HTML und CSS    Sie können Ihr HTML und CSS direkt in Blend visuell debuggen, indem Sie im Bereich Ergebnisse angezeigte Fehler ermitteln und beheben.

Weitere Informationen zu den Neuheiten beim Gestalten von Windows Store-Apps, die mit JavaScript in Blend entwickelt wurden, finden Sie im Visual Studio blog (Visual Studio-Blog, möglicherweise in englischer Sprache).

Entwerfen von Windows Store-Apps (VB/C#/C++ und XAML)

Mit Blend können Sie eine neue Windows Store-App mithilfe einer der integrierten XAML-Projektvorlagen erstellen oder eine vorhandene Windows Store-App öffnen, die in Visual Studio erstellt wurde. Wie jede systemeigene Windows-Anwendung verfügt eine mit XAML und VB, C# oder C++ erstellte Windows Store-App über direkten Zugriff auf die zugrunde liegende Plattform und ist in der Lage, Informationen gemeinsam mit anderen Anwendungen zu verwenden.

Das Erscheinungsbild der App kann mit einer Reihe von leistungsstarken XAML-Entwurfstools schnell geändert werden. Diese können für die folgenden Aufgaben verwendet werden:

• Entwerfen eines benutzerdefinierten Layouts   Verwenden Sie leistungsstarke Layout-Tools, darunter Vorlagen, integrierte Steuerelemente, Lineale, Führungslinien und Unterstützung zum Andocken, um benutzerdefinierte Layouts für Ihre Windows Store-App zu entwerfen. Weitere Informationen erhalten Sie unter Die Datenansicht formatieren.

• Erstellen und Formatieren von Steuerelementen   Ziehen Sie Steuerelemente per Drag & Drop auf die Entwurfsoberfläche. Anschließend können Sie diese durch das Ändern von Eigenschaften direkt auf der Benutzeroberfläche formatieren. Formatieren von Bildern und Elementen.

• Erstellen und Bearbeiten von Steuerelementvorlagen   Verwenden Sie die Vorlagenbearbeitungstools, um benutzerdefinierte Steuerelementvorlagen zu erstellen, die projektübergreifend wiederverwendet werden können. Fügen Sie diese zur Steuerelementbibliothek hinzu, um sie in Projekten außerhalb des aktuellen Projekts wiederzuverwenden. Weitere Informationen erhalten Sie unter Aus einem Bild ein Benutzersteuerelement erstellen.

• Erstellen und Bearbeiten von Datenvorlagen   Erstellen Sie Vorlagen, die die Datenanzeige in Ihrer App definieren. Weitere Informationen erhalten Sie unter Erstellen und Formatieren der Datenbindungen.

• Anzeigen von Beispiel- und Entwurfszeitdaten   Die Datenbindung und -anzeige in der Windows Store-App ermöglicht ein leichteres Ändern der Datendarstellung zur Laufzeit. Weitere Informationen erhalten Sie unter Festlegen des DataContext.

• Hinzufügen von Interaktivität mithilfe von Verhaltensweisen   Fügen Sie Ihrer App Interaktivität hinzu, indem Sie ein integriertes Verhalten auf das Objekt der Entwurfsoberfläche ziehen und die Eigenschaften entsprechend Ihren Anforderungen ändern. Weitere Informationen erhalten Sie unter Hinzufügen eines integrierten Verhaltens.

• Bearbeiten von XAML-Markup   Neben den Benutzeroberflächentools, die das einfache Erstellen und Ändern von XAML ohne die Änderung von Code ermöglichen, bietet Blend außerdem einen leistungsstarken XAML-Editor, mit dem Sie direkt im XAML-Markup schnell und einfach Änderungen vornehmen können. Weitere Informationen finden Sie unter Debuggen von XAML in Blend.

Weitere Informationen zu den Neuheiten beim Gestalten von Windows Store-Apps, die mit C#, C++ und VB in Blend entwickelt wurden, finden Sie im Visual Studio blog (Visual Studio-Blog, möglicherweise in englischer Sprache).

Ressourcen

Neben der Blend-Dokumentation im Windows Developer Center werden umfassende Ressourcen bereitgestellt, die Ihnen den Einstieg in das Erstellen und Entwerfen von Windows Store-Apps erleichtern. Hierzu gehört Folgendes:

• Neuheiten in Blend   Weitere Informationen zu den Neuheiten in Blend finden Sie unter What’s new for HTML Developers in Blend for Visual Studio 2013 (Neuheiten für HTML-Entwickler in Blend für Visual Studio 2013, möglicherweise in englischer Sprache) und What’s new in Visual Studio 2013 Preview for authoring Windows Store XAML apps (Neuheiten in Visual Studio 2013 (Vorschau) beim Erstellen von Windows Store XAML-Apps, möglicherweise in englischer Sprache) im Visual Studio blog (Visual Studio-Blog, möglicherweise in englischer Sprache).

• Blog für Windows-App-Entwickler   Ressourcen für das Entwickeln von Windows Store-Apps finden Sie unter Windows App Builder blog (Blog für Windows-App Entwickler, möglicherweise in englischer Sprache).

• Blog zu Visual Studio   Weitere Informationen zum Verwenden von Blend und Visual Studio zum Entwerfen, Erstellen und Verwalten von Apps finden Sie im Visual Studio Blog (Visual Studio-Blog, möglicherweise in englischer Sprache).

• Communityforen   Verbinden Sie sich unter Windows Store-App – Foren mit der Community für technische Fragen und Diskussionen zum Erstellen von Apps für den Windows Store.