Dieser Artikel wurde maschinell übersetzt.

Entwurf und UX

Erstellen von Windows Store-Apps in Blend

Christian Schormann

 

Blend für Visual Studio 2012 ist eine leistungsfähige visuelle authoring-Tool zum Erstellen von Windows-Store apps mithilfe von XAML oder HTML erstellt. Mischung ist im Lieferumfang von Visual Studio 2012, und es ist direkt aus dem Startbildschirm verfügbar.

Wenn Sie mit dem Erstellen von XAML-Anwendungen für Windows Presentation Foundation (WPF), Silverlight oder Windows Phone vertraut sind, werden Sie schnell zu Hause fühlen. Diese Version von Blend bietet Tools, ähnlich wie bei früheren Versionen, aber es enthält auch Unterstützung für die Windows 8 XAML-Plattform. Darüber hinaus bietet Blend neue, innovative visuelle authoring-Tools zum Erstellen von Windows-Store apps mit HTML, CSS und JavaScript.

Ich werde zuerst einen kurzen Blick auf die Neuerungen für die Erstellung von Windows-Store apps mit XAML nehmen und dann eine eingehendere Erforschung der Blend-Tools zum Erstellen von Windows-Store apps mit HTML zu tun.

Verwendung von Blend Windows Store Apps mit XAML zu erstellen

Windows 8 bietet eine neue XAML-Plattform für app Entwicklung zu unterstützen. Die Plattform unterstützt nicht nur traditionelle verwalteten Sprachen (c#- und Visual Basic), sondern auch Entwicklung systemeigener C++. Die XAML-Feature-Set ist ähnlich wie in WPF und Silverlight und enthält eine Reihe von Windows 8-spezifische Steuerelemente und Eigenschaften der Ziel-Geräte Blend unterstützt. Darüber hinaus verwenden die XAML-Designer in Visual Studio 2012 und Blend jetzt die gleiche Code-Basis, was zu viel bessere Kompatibilität als vor. (Insgesamt 2012 für Visual Studio und Blend bieten einen großen, integrierten Workflow. Sie können dasselbe Projekt in beide Tools zur gleichen Zeit geöffnet und reibungslos wechseln. Ich Code in Visual Studio nutzen, die große Code-Editor und Debugger, zu entwerfen, Autor und Stil-UX in Blend schreiben.)

Hier sind einige der Highlights von Windows 8 Funktionen zum Erstellen von Windows-Store apps mit XAML in Blend.

Integrierte Unterstützung für Windows 8 Steuerelemente Blend hat integrierte Unterstützung für Windows 8 Steuerelemente wie AppBar und ListView, erleichtert das Erstellen von Anwendungen mit dieser Ikone Steuerelemente. Die AppBar ist ein einfliegen-Steuerelement, das normalerweise ausgeblendet ist, aber die Blend-Oberfläche unterstützt Sie das Steuerelement in der Ansicht für die interaktive Bearbeitung zu bringen. ListView mit der Associ­Ated Vorlagen für Datenelemente, Gruppe Formatvorlagen und mehr, wird in der Mischung auch vollständig unterstützt.

Authoring anzeigen Windows Store apps werden erwartet, um auf einer Vielzahl von Formfaktoren, bei verschiedenen Displaygrößen und Pixel-Dichte, auszuführen und die Anpassung an verschiedene Ansichten (Porträt, Landschaft, eingerasteten und voll). Das Gerät-Panel (Abbildung 1) hilft Ihnen, erstellen, bearbeiten und ändern die app mit verschiedenen Ansichten auf der Entwurfsoberfläche ausgewählt. Das Gerät-Panel ist auch mit der Visual State Manager integriert.

Abbildung 1-Gerät-Panel in Blend für Windows Store Apps mit XAML gebaut

Verwendung von Blend Windows Store Apps mit HTML erstellen

Blend ist eine einzigartige Umgebung zum Erstellen, formatieren und Iteration HTML-basierte UI-Design und saubere, professionelle, standardkonforme Markup erstellen. Im Gegensatz zu herkömmlichen HTML-authoring-Tools verträgt Blend Entwurf Szenarien für apps, die JavaScript verwenden, um erstellen oder Ändern der Inhalte dynamisch. Die Blend-Entwurfsoberfläche verwendet die gleiche Rendering-Engine als Windows Runtime, aber es läuft auch JavaScript ab dem Moment, das Laden eine Seite, die genaue Visualisierung von sowohl statische und dynamische Seitenelemente sicherstellt. Das DOM Live-Panel und die reiche, produktive CSS-Tools in Blend können Sie arbeiten mit den Elementen, die Sie im Markup erstellen sowie mit allen Elementen, die vom Skript kommt oder aus einem Fragment geladen wird.

In den nächsten Abschnitten werde ich diese und andere Highlights der HTML-Funktionen von Blend behandeln.

Code auf der Entwurfsoberfläche Ausführen von Code auf der Entwurfsoberfläche für genaue Rendering Code generierten Seiten ist das Fundament des Gebäudes Windows Store apps mit HTML in Blend. Beispielsweise das Markup in Abbildung 2 umfasst sowohl standard-HTML und JavaScript. Wenn Sie fügen Sie dieses Markup in eine leere Seite in Blend die JavaScript ausgeführt wird und direkt auf der Entwurfsoberfläche im Bearbeiten-Modus ausgeführt werden.

Abbildung 2 Blend läuft JavaScript auf der Entwurfsoberfläche

<!DOCTYPE html>
<html>
  <head>
    <title></title>
      <script>
        function init() {
          var p = document.querySelector('#placeholder');
          if (p) {
            var fruit = ['apples', 'oranges',
                         'lemons', 'pears', 'strawberries'];
            for (var i=0; i<fruit.length; i++) {
              var e = document.createElement("div");
                e.textContent = fruit[i];
                e.className = 'fruit';
                p.appendChild(e);
            }
          }
        }
      </script>
  </head>
  <body onload="init()">
    <div id="placeholder"></div>
  </body>
</html>

Die Elemente, die durch das JavaScript generiert werden korrekt auf der Entwurfsoberfläche gerendert. Da die Entwurfsoberfläche Code im Bearbeiten-Modus läuft, können Sie JavaScript generierten Elemente auswählen, genauso wie jedes andere Element.

Die Elemente zeigen sich auch im Bereich Live DOM (Abbildung 3), den dynamischen Zustand der Struktur des Document Object Model (DOM), nicht nur den Inhalt des Dokuments Markup darstellt. Elemente im Markup nicht vorhanden sind wie diejenigen von JavaScript erstellt oder aus einem Fragment dynamisch geladen gekennzeichnet mit Blitz Ikonen an, dass diese Elemente vom Skript generiert wurden.

Abbildung 3 Bereich Leben DOM

Das DOM Live-Panel zeigt auch, welche Klassen auf jedes Element angehängt werden. Der Code in Abbildung 2 generiert das Klasse Name "Frucht" für jedes generierte Element. Während Sie direkt JavaScript generierten Elemente nicht ändern (es gibt kein Markup für Blend ändern), können Sie immer noch gegen die Klassen gestalten, vorausgesetzt, dass der Generierung von Code CSS-Klassennamen verwendet oder die erzeugten Elemente ansonsten mit einem CSS-Selektor zugegriffen werden.

Rich CSS Eigenschaften-Editoren Blend bietet viele reiche Eigenschaftseditoren, die komplexe CSS-Eigenschaften zugänglich, sowie viel Unterstützung für interaktive Manipulation der Elemente auf der Entwurfsoberfläche zu machen. Windows 8 unterstützt beispielsweise eine neue CSS Layout Standardmodell CSS Grid genannt. Das CSS-Grid ist eine unglaublich nützliche Layout, vor allem für veränderbare Anwendungen, die auf mehreren Formfaktoren ausführen. Grid-Layout arbeitet mit einer Reihe von Zeilen und Spalten, ähnlich wie eine Tabelle, wo jede Zeile und Spalte ein bestimmten zugewiesen werden kann Größe Verhalten. Zeilen oder Spalten zu einer festen Größe Größe proportional zu ändern, oder passen Sie ihre Inhalte automatisch einstellbar. Wenn Sie vertraut mit dem XAML-Gitter, werden richtige Zuhause mit HTML-Raster Sie.

CSS Raster bearbeiten in Blend nimmt den Stress aus vielen CSS-Layout-Szenarien (siehe Abbildung 4). Sie zeichnen und Raster rechts auf der Entwurfsoberfläche zu ändern, finden Sie unter vor-Ort-Messungen [1], Ändern der Größen und Einheiten, die mit direkten objektgebundenen UI [2], einfügen und Löschen von Zeilen und Spalten und vieles mehr.

Abbildung 4 Zeichenfläche Bearbeiten von CSS Grid

Mischung bietet auch Farb-Editoren und Unterstützung für mehrschichtige Hintergründe und CSS Farbverläufe (Abbildung 5), alle mit sofortiges visuelles Feedback. Darüber hinaus können Sie CSS-Übergänge in Blend problemlos bearbeiten. Abbildung 6 zeigt den Übergang von CSS Editor mit einem versetzten Übergang für drei Eigenschaften, einschließlich Beschleunigungsfunktionen definiert.

Abbildung 5-Farbbearbeitung umfasst visuelles Feedback

Abbildung 6 bearbeiten einen CSS-Übergang

CSS-Bearbeitung Styling mit CSS ist das Herzstück des visuell erstellen von HTML-basierten UIs. Mischung baut auf eine Reihe ausgereifter Tools für CSS-Styling. Beispielsweise die Stilregeln Panel (Abbildung 7) zeigt Ihnen alle Stilregeln, die zu der aktuell geöffneten HTML-Dokument angewendet werden.

Abbildung 7-Style-Regeln-Panel

In Abbildung 7, können Sie sehen, wie die Stilregeln von Stylesheet und in Reihenfolge der Deklaration [1] sortiert werden. Suche wird für größere Sammlungen von Formatierungsregeln unterstützt. Das Stilregeln-Panel zeigt auch Medien Abfragen [2] und die Stilregeln, die innerhalb jeder Abfrage definiert. Sie sehen auch, welche Medien-Abfrage derzeit aktiv ist. Da Windows Store apps machen Verwendung von Medien Abfragen, um verschiedene Ansicht Zustände zu behandeln, ist dies sehr wichtig für app-Styling.

Style-Regeln können im Bereich Stilregeln (obwohl Blend viele Produktivität Kurzbefehle für die Formatvorlage Regelerstellung hat) erstellt, bearbeitet oder gelöscht werden. Während der Erstellung von CSS-Selektoren hilft Blend mit IntelliSense für CSS-Selektoren. Während der Eingabe eines Selektors Blend bietet eine Liste von Abschlussoptionen im Kontext des aktuellen Dokuments, wie Sie, in sehen können Abbildung 8.

Abbildung 8 IntelliSense für CSS-Selektoren

IntelliSense für CSS-Selektoren unterstreicht auch die Elemente, die von der Auswahl ausgerichtet, während Sie Text eingeben. Dieses Feature heißt den Regel Umfang Adorner. Der Regel Umfang Adorner wird nicht nur von IntelliSense angezeigt; Es scheint auch jedes Mal, wenn ein Stil direkt ausgewählt ist, oder indirekt, wodurch es leichter zu erkennen, welche Elemente von der ausgewählten Formatvorlage-Regel betroffen sind. In Abbildung 9, der Regel Umfang Adorner ist mit grünen Konturen dargestellt. CSS-Selektoren können sehr komplex werden, so Sie dies finden als ein sehr nützliches Dienstprogramm.

Abbildung 9 Beispiel der Regel Umfang Adorner

Sie können immer wählen Sie Stilregeln direkt im Bereich Stilregeln und bearbeiten Sie dann die CSS-Eigenschaften für die Stilregel im Bereich CSS-Eigenschaften. In vielen Fällen ist es jedoch einfacher wählen ein Element auf der Entwurfsoberfläche oder im DOM Live Panel und findet die Stilregeln, die dieses Element zu beeinflussen.

Bei der Auswahl eines Elements auf das Design Oberfläche, die CSS-Eigenschaften-Leiste (Abbildung 10) zeigt eine Liste der Formatierungsregeln, die das Element in der Rangfolge angewendet werden. Dies erleichtert es, den Stil zu finden, die, den Sie brauchen. Standardmäßig werden Eigenschaften in eine kategorisierte Ansicht angezeigt, aber eine alphabetische Ansicht ist auch verfügbar. Die CSS-Eigenschaften-Liste ist ziemlich lang (derzeit mehr als 300 CSS-Eigenschaften definiert sind), so um eine Eigenschaft zu suchen, können Sie die Eigenschaftenliste suchen oder filtern, um nur Eigenschaften anzuzeigen, die derzeit in der Regel festgelegt werden.

Abbildung 10-CSS-Eigenschaften-Panel

In vielen Fällen kommen die Eigenschaften, die den Stil eines Elements beitragen, aus vielen verschiedenen Stilregeln. Dies erschwert zu verstehen, warum ein Element sieht die Art und Weise, was, die es tut. In diesen Fällen eine Rollup-Ansicht aller "gewinnen" Eigenschaften hilft festzustellen, welche Formatvorlagen angewendet werden (Abbildung 11).

Abbildung 11 Ansicht ausgezeichneten Eigenschaften

Die Gewinn-Eigenschaften-Ansicht zeigt nur die Eigenschaften, die an die Oberfläche der CSS-Kaskade, sortiert die Stilregel Ursprungs. Diese Ansicht ist äußerst nützlich für die Diagnose, sondern auch für die schnelle zwicken von einem vorhandenen Eigenschaftswert.

Die berechneten Werte-Ansicht zeigt Eigenschaften mit den Werten, die der Browser zum Rendern nach der Verarbeitung der CSS-Deklarationen sieht. Dies kann manchmal eine große Hilfe sein, wenn Sie versuchen, Probleme zu lösen. Mischung bietet auch Zugriff auf die CSS-Kaskade, ein weiteres Tool zum Diagnostizieren von Problemen in Ihrer Anzeige.

Für jede Eigenschaft sehen Sie die CSS-Kaskade um Werte von allen Regeln zu sehen, die eine bestimmte Eigenschaft beeinflussen. Beispielsweise müssen Sie eine Eigenschaft Background-Color, die zwei unterschiedliche Regeln, mit einem an der Spitze der eine, die für diese Eigenschaft definiert ist "gewinnt". Der CSS-Kaskade Display (Abbildung 12) auch schnell Sie konkurrierende Regeln navigieren lässt.

Abbildung 12 Ansicht der CSS-Kaskade

Blend bietet viele Verknüpfungen schnell Stilregeln für ausgewählte Elemente erstellen. Sie können erstellen Sie eine Regel, die Ziel die ID des Elements (#foo, wenn das Element eine ID von Foo) oder Regeln, die mindestens einem der Klassen in der ClassName-Attribut erstellen. Sie können auch hinzufügen und entfernen Klassen schnell, oder fügen Sie eine neue Klasse und eine Regel dafür, in einem einzigen Arbeitsschritt erstellen (siehe Abbildung 13). Diese im Kontext Produktivität Gesten machen Styling mit Blend schnelle, reibungslose und effiziente.

Abbildung 13 fügen Sie eine Klasse und eine Style-Regel erstellen, in einem einzigen Schritt

Nicht zuletzt, weil jeder Fehler macht und seine Meinung ändert, bietet Blend einige Umgestaltung Funktionen. Mit diesen können Sie schnell Ausschneiden und kopieren gesamte Stilregeln, alle Eigenschaftenwerte aus eine Stilregel oder nur bestimmte Eigenschaftenwerte. Sie können dann die kopierte Regeln oder Eigenschaften in eine neue oder vorhandene Stilregel einfügen.

WinJS-Steuerelemente In der Windows-Library für JavaScript (WinJS), stellt Windows eine Reihe von HTML-basierte Steuerelemente für Windows Store apps. Dazu gehören einfache Steuerelemente, z. B. ein Kippschalter, sowie anspruchsvolle Steuerelemente wie ListView oder FlipView. WinJS-Steuerelemente ähneln Steuerelemente in anderen UI-Toolkits wie JQuery. Ein Unterschied ist, dass WinJS Steuerelemente im Code verwendet werden können (und auch deklarativ aus Markup) mithilfe von Standarddaten Attributen die Steuerelement-Metadaten anwenden. Dieser Mechanismus ermöglicht Blend, ein Erlebnis der Extraklasse Dokumenterstellung für die Steuerelemente bereitstellen.

WinJS-Steuerelemente sind in Mischung mit Objektepanel erstellt. Abbildung 14 zeigt das Bedienfeld "Elemente" mit der Kategorie der am häufigsten verwendeten Steuerelemente angezeigt. Sie können Steuerelemente oder HTML-Tags in der Seite durch ziehen oder durch Doppelklicken auf das Asset einfügen. Sie können auch suchen und Filter Ergebnisse im Objektepanel.

Abbildung 14-Blend-Objektepanel

Nachdem Sie ein Steuerelement auf der Entwurfsoberfläche hinzugefügt haben, können Sie es mithilfe des HTML-Attribute-Panels konfigurieren. Die Konfigurationsoptionen für das ausgewählte Steuerelement werden in der Kategorie Windows App Steuerelemente im Bedienfeld angezeigt. Für Umschalter z. B. können Sie legen Sie die Attribute LabelOff und LabelOn oder ändern den Titel.

Beim Laden der Seite wird das WinJS-Toolkit findet Elemente mit Daten-gewinnen-Control-Attributen, und es dann erstellt das Rückendeckung-Steuerelement mit Daten-gewinnen-Optionen festgelegten Optionen. Die Implementierung des Steuerelements erstellt wie bei HTML-Steuerelemente in anderen Toolkits, die Elemente, die das Steuerelement dynamisch anzuzeigen. Da Blend auf der Entwurfsoberfläche Code ausgeführt wird, wird das Steuerelement genau im Bearbeitungsmodus angezeigt. Sie sehen auch die dynamischen Elemente, die vom Steuerelement erstellt. JavaScript generierte Elemente werden durch ein Blitz Symbol gekennzeichnet.

Daten Vorlage bearbeiten und Fragmente auch wenn ein ListView-Steuerelement eine viel komplexere Kontrolle als Umschalter, es konfiguriert ist, mithilfe von Attributen in gleicher Weise. Darüber hinaus hat die Mischung Tiefe unterstützt die Datenvorlage Bearbeitung mit einer ListView. Eine Datenvorlage ist ein Ausschnitt von HTML, die verwendet wird, um jeden einzelnen Datenelements in einer Liste zu rendern. Live Daten-Vorlage bearbeiten in Mischung hilft, die Sie entwerfen und Stilvorlagen Daten vorhanden, in der ListView mit den Updates genau wiedergegeben.

Sie können eine leere Standardvorlage Daten aus dem Attribute Editor richtig erstellen und dann die Mischung, die authoring-Tools verwenden, um die Vorlage zu bearbeiten. Abbildung 15 zeigt das Markup für das einfache ListView mit einer Datenvorlage, die in angezeigt wird Abbildung 16.

Abbildung 15 ListView mit einer Datenvorlage

<div id="cityTemplate" 
  data-win-control="WinJS.Binding.Template">
  <div class="cityItem">
    <img class="cityImage" 
      data-win-bind="src:image">
    <div class="cityLabel" 
      data-win-bind="textContent:name"></div>
  </div>
</div>
<div id="cityList"
  data-win-control="WinJS.UI.ListView"
  data-win-options="{
    itemDataSource:AppData.cities.dataSource,
    itemTemplate:select('#cityTemplate'),
    layout:{type:WinJS.UI.ListLayout}">
</div>

Abbildung 16-ListView mit Datenvorlage

Ein Div definiert das ListView-Steuerelement und ein weiteres Div, gekennzeichnet als ein Vorlagensteuerelement stellt die Wurzel für die Datenvorlage. Der Inhalt dieses Div (in diesem Fall dem Div mit der Klasse CityItem) wird für jedes Datenelement instanziiert, die das ListView-Steuerelement rendert. Das Vorlagensteuerelement angefügt, die Vorlage Div sorgt dafür, dass die Vorlage nicht tatsächlich auf der Seite sichtbar ist.

Dies stellt ein bisschen ein Problem für die visuelle Bearbeitung, denn um eine Datenvorlage zu bearbeiten, Sie den Inhalt der Vorlage bearbeiten müssen. Jedoch verbirgt das Datenvorlage Steuerelement der Inhalt den Vorlage — es aus dem Weg von der "echten" Seiteninhalt zu halten — so dass Sie nicht, etwas sehen können zu bearbeiten. Aber selbst wenn der Inhalt der Vorlage sichtbar, was Sie wirklich wollen, zu sehen und zu bearbeiten ist die Vorlage von Daten im Zusammenhang mit der ListView, nicht außerhalb.

Abbildung 17 zeigt, was Sie tun müssen, um eine Datenvorlage zu bearbeiten. Wählen Sie ein Element in der ListView, direkt auf der Oberfläche [1]. Sie können im Bereich DOM Live sehen, dass das ausgewählte Element (Bild) eine dynamisch generierte Element in der ListView [2]. Das ListView-Steuerelement wird auch im Bereich Live DOM [3] angezeigt.

Abbildung 17 bearbeiten eine ListView und Datenvorlage

In der Codeansicht wird das Img-Tag innerhalb der Datenvorlage [4] hervorgehoben. An der Spitze der Entwurfsoberfläche erzählt Informationen Sie, dass eine Datenvorlage [5] der ausgewählte Inhalt stammt.

Wenn Sie das Element auswählen, in der ListView, Blend Spuren die Ursprünge des Elements angezeigt. Blend identifiziert dieses Element als eine Datenvorlage aus und zeigt diese Informationen. Jetzt beim Bearbeiten des Elements macht Blend automatisch die relevanten Änderungen im Markup und Stile der Datenvorlage, aktualisieren alle Elemente in ListView angezeigt, wie Sie gehen. Keine manuellen Updates sind erforderlich.

Die Fähigkeit zu durchschauen, ein ListView-Steuerelement in einer Datenvorlage ist eines meiner Lieblingsfeatures Blend. Dies funktioniert auch mit Fragmenten. Ein Fragment ist eine HTML-Seite, die in eine andere Seite mit eine Hilfsfunktion WinJS oder ein HTMLControl (ein spezielles WinJS-Steuerelement) dynamisch geladen wird. Wie bei Templates Blend erkennt Fragmente auf einer Seite und bietet das gleiche Maß an in-Place-Bearbeitung. Kann man Fragmente vorhanden und im Kontext (Abbildung 18) die Art und Weise, sie sind dafür gedacht, verwendet werden und vollständig bearbeitet werden, ohne Einschränkung und ohne ein anderes Dokument zu öffnen.

Abbildung 18 bearbeiten ein HTML-Fragment

Interaktiver Modus

Interaktive Modus ist eines der besten und nützlichsten Features in Blend. Wie ich schon sagte, Mischung der Code auf der Entwurfsoberfläche immer ausgeführt wird. Im normalen Bearbeitungsmodus verhindert Sie interagieren mit dem app, so können Sie nur auswählen, bearbeiten und Bearbeiten von Elementen, die auf der Zeichenfläche angezeigt werden. Interaktiver Modus nimmt diese Schutzschicht damit Sie, mit der app, wie es interagieren können läuft.

Laufen also warum nicht einfach die app? Der wichtigste Grund ist die Fähigkeit zum Zustand zu sammeln. Wenn Sie die app unter Windows oder im Simulator ausführen, ist die ausgeführte Instanz völlig losgelöst vom was Sie auf der Entwurfsoberfläche haben. Jegliche Interaktion haben Sie mit der laufenden app ändert nur den Zustand der laufenden app. Im Moment, den Sie diese Instanz beenden, ist der kumulierte Zustand verschwunden.

Beim Umschalten zwischen interaktiven Modus und Edit-Modus, ist Zustand der Anwendung erhalten. Wenn Sie etwas so einfaches tun wie ändern Sie den Status einer Umschaltfläche, in einem Flyout bringen-, Optionen ändern oder sogar eine Zeichnung auf einer Leinwand erstellen, wenn Sie wieder in den Bearbeitungsmodus, wird Ihr Zustand beibehalten. Dadurch können Sie bearbeiten und optimieren Sie Ihre app in Staaten, die Sie sonst nie auf der Entwurfsoberfläche zu sehen. Dies ist unglaublich praktisch, schnell und befreiend, da kann man nun bearbeiten visuell in heißt nicht erreicht werden statisch überhaupt. In vielerlei Hinsicht interaktiver Modus ist wie die Developer-Tools in einem Browser, aber eng an den tatsächlichen-Source-Projekt und der Entwurfsoberfläche gebunden.

Abbildung 19 zeigt zwei Ansichten einer einfachen Welt-Taktgeber-app. Um die zweite Ansicht zu sehen, muss einige Code ausführen, die wird durch den Modus-Schalter Knebel ausgelöst. Klicken Sie im Bearbeiten-Modus gibt es keinen Weg, um diesen Code auszuführen, aber, sobald ich in den interaktiven Modus wechseln kann ich einfach schieben den Digital/Analog-Umschalter und Änderungen anzeigen, die für die Bearbeitung bereit. Ich kann nicht arbeiten ohne interaktiven Modus nicht mehr vorstellen.

Abbildung 19 die dynamische App Schaltzustände über interaktive Modus

Entwerfen für Geräte

Windows Store apps laufen auf einer Vielzahl von Geräten, von kleinen Tabletts an großen desktop-Monitore. Diese Geräte kommen in eine Vielzahl von Auflösungen und Pixel-Dichte anzuzeigen. Darüber hinaus kann Windows Store apps in verschiedenen Ansichtsmodi (Querformat, Hochformat, eingerasteten und gefüllt-Modus).

Beim Erstellen anpassungsfähiger Anwendungen ist es wichtig, können anzeigen und bearbeiten die app in einer Vielzahl von verschiedenen Staaten. Blend können Sie dazu präzise Darstellung der verschiedenen Skalierung Modi auf der Entwurfsoberfläche, gesteuert durch das Gerät-Gremium.

Zusammenfassung

Blend für Visual Studio 2012 bietet visuelle authoring für Windows Store apps, mit Unterstützung für XAML und HTML. Die XAML-Funktionalität ist ähnlich wie frühere Versionen von Blend, so dass wenn Sie frühere Versionen verwendet haben Sie richtig zu Hause fühlen. Neben umfassende Unterstützung für Windows Store app Entwicklung unterstützt Blend für Visual Studio 2012 verbesserten Kompatibilität mit dem XAML-Designer auch in Blend.

Mischung Unterstützung für HTML stellt eine neue und innovative Art der authoring-Umgebung für HTML dar. Mischung kann nicht nur HTML und CSS-Markup, sondern auch die eher häufige Muster von JavaScript-generated Content behandeln. Am wichtigsten ist, macht Blend für HTML, visuelle Erstellung von HTML, CSS und WinJS produktiv, schnell und Spaß.

Christian Schormann ist ein Partner-Programm-Manager im Blend Team. Seine Leidenschaft ist die visuelle authoring-Tools für Designer, Künstler und Entwickler bauen.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Joanna Mason, Unni Ravindranathan, Josh Pfeffer und Erik Saltwell