Ning Zhang Blog

Einführung

XAML ist eine große Erfindung des WPF und XMAL "Programmierung" ist ein wichtiger Teil der WPF / Silverlight-Entwicklung. Obwohl XAML ist XML und kann manuell verfasst werden, ist es meist für Werkzeuge entwickelt, sind so gut, Authoring-Tools immer wichtiger, um XAML als zu anderen Sprachen wie C # oder HTML. Blend XAML ist das, was Visual Studio C # ist. Es gibt viele gute Tutorials und Dokumente für Blend, wie Jesse Liberty Expression Blend für Entwickler . Dieser Beitrag ist mehr wie "Learn Mischung in 15 Minutes", mit dem Ziel einer schnellen Überblick und Anleitung der Mischung für Entwickler, die Authoring-XAML sind meist in Visual Studio oder Notepad, und so werden sie interessiert sein und wissen, wie man bei der Verwendung Einstieg geben Blend.

Project Management

Blend-Duplikaten eine Menge von Visual Studio-Funktionalität und hat großartige Integration mit sich. Es ist sehr häufig (oder sogar zu empfehlen, sollte ich sagen), um eine WPF / Silverlight-Projekt zu öffnen sowohl in Blend und Visual Studio haben, mit Blend für XAML-Authoring und Visual Studio für C #-Codierung (oder was auch immer Sie Ihre bevorzugte Sprache), und entweder mit oder beide für das Projektmanagement.

Projektmanagement in Blend ist sehr ähnlich dem in Visual Studio, über das Menü, Project Panel und Ergebnisse Panel:

• Menü: Datei, Bearbeiten, Projekt-und Hilfe-Menüs sind sehr ähnlich zu denen in Visual Studio. Durch die Menüs, können Sie / open WPF / Silverlight-Projekte, Elemente hinzuzufügen / Referenzen etc, und auch Bau und Betrieb der Lösung, genau wie in Visual Studio.
  
• Projekt Panel: es ist sehr ähnlich zu Visual Studio Solution Explorer. Sie können direkt auf jedem .xaml / .cs Datei klicken Sie in dem Projekt-Panel und wählen Sie "Bearbeiten in Visual Studio" und das Projekt und die ausgewählte Datei wird in Visual Studio für die Bearbeitung zu öffnen.
  
• Ergebnis Panel: das Register Ausgabe und Fehler Registerkarte ähneln Output-Fenster und Fenster Fehlerliste in Visual Studio.

UI Authoring

UI-Authoring ist meistens über drei Platten gemacht:

Objekte und Zeitachsen

Die Objekte Panel ist die logische Baumstruktur sehr klar. Es ist leicht, die logische Struktur durch den Ausbau / einstürzenden / Auswahl eines Elements in den Baum zu navigieren, oder Umstrukturierung des Baumes per Drag & Drop-Elemente entlang der Baum. Das ausgewählte Element wird in den Objekten Panel, und sowohl in der Design-Ansicht und der XAML-Ansicht der Dokumente Panel hervorgehoben; dem Fenster Eigenschaften zeigt die Eigenschaften und Ereignisse des ausgewählten Elements. Die inneren Knoten mit gelbem Rand (LayoutRoot in obigen Screenshot) ist der aktuelle Standard-Container.

Dokumente Systemsteuerung

Die Dokumente Panel ist ein tabbed Fenster, mit einem Register für jede geöffnete XAML-Datei. Es hat eine Design-Ansicht und eine XAML-Ansicht für jede Datei.

• Sie können die Registerkarten am oberen Rand der Dokumente Fenster verwenden, um zwischen geöffneten Dokumenten oder in der Nähe Dokumente (nur eine Registerkarte in obigen Screenshot, da nur eine Datei page.xaml geöffnet ist.) Wechseln.
• Sie können zwischen Entwurfsansicht wechseln, der XAML-Ansicht oder der geteilten Ansicht des ausgewählten Dokuments. Sie können auch die Standard-Dokument in Tools -> Options -> Dokumente:
  
• Es ist ein breadcrumb-Steuerung an der Spitze der Design-Ansicht (auch als Zeichenfläche), um die Logik Baum Pfad des ausgewählten Elements zu zeigen. Dies ist ein weiterer Weg, um die logische Struktur neben den Objekten Panel navigieren und zwischen Authoring-Modi zu wechseln, wie wir gleich sehen werden.
• Sie können die Design-Ansicht durch Zoom
  • Wählen Sie das Zoom-Symbol aus der Toolbox, und klicken oder Alt Klicken Sie auf die Zeichenfläche;
  • Verwendung der Zoom-Combobox direkt unterhalb der Zeichenfläche:
  • verwenden Sie im Menü Ansicht Gegenstände oder ihre Tastenkombinationen:
• Die Design-Ansicht ist ein WYSIWYG-Designer, wo man per Drag & Drop ein Element aus der Toolbox oder Asset-Bibliothek auf dem linken Rand des Blend-Fenster:
  
• Die XAML-Ansicht ermöglicht den direkten XAML-Authoring. Es muss nicht IntelliSense, aber Sie können die Design-Ansicht und der Fehler in der Registerkarte Ergebnisse Panel unten verwenden, um Fehler zu korrigieren, während Sie tippen.

Properties Panel

Properties Panel verfügt über zwei Ansichten: Eigenschaften und Ereignisse, die von zwei Schaltflächen am oberen rechten Ecke des Fensters angezeigt.

• In Eigenschaften anzuzeigen:
  
  • Eigenschaften des ausgewählten Elements ist in Kategorien unterteilt, wie Layout, Allgemeine Eigenschaften;
  • Eigenschaften haben in der Regel kleiner Tipp, wie Content-Eigenschaft tooltip in obigen Screenshot;
  • Eigenschaften haben in der Regel inline / erweitert / Dialog-Editor (s) zu helfen, Benutzer wählen Sie einen Wert, wie der Wert der Eigenschaft HorizontalAlignment in obigen Screenshot können durch Anklicken einer der vier Tasten, statt einfach nur in Werten wie "Center" in XAML festgelegt werden Blick direkt;
  • wenn Sie einer Eigenschaft einen Wert (so ist es nicht mehr braucht der Standardwert), das kleine Quadrat rechts daneben wird weiß, wie das Alignment-Eigenschaften in obigen Screenshot;
  • Sie können den Pfeil nach unten (die "Show erweiterten Eigenschaften" hat tooltip) in den meisten Kategorien klicken, um weitere Eigenschaften dieser Kategorie zu sehen;
  • Sie können eine Eigenschaft schnell zu finden, indem Sie einen Teil des Namens in das Suchfeld ganz oben auf dem Fenster Eigenschaften:
    
• In Ereignisse anzeigen:
  
  • Sie können den Namen der Event-Handler für ein Ereignis geben, und Blend wird das Projekt in Visual Studio öffnen, mit einem Prototyp Umsetzung der Event-Handler in der CodeBehind-Datei:

  

Animation Authoring

Zum Erstellen einer Animation, klicken Sie auf das Pluszeichen in Objekte und Zeitachsen, die "Storyboard erstellen Resource"-Dialog öffnet sich und fragt nach dem Namen des neuen Storyboard:

Mischung dann in Timeline Aufnahmemodus. Lassen Sie eine Animation, die die Größe der Schaltfläche Doppel schaffen. Die wichtigsten Schritte bei der Erstellung einer Animation:

1. Erstellen Sie einen Keyframe, indem Sie zuerst ziehen die gelben Zeitachse zu einer KeyTime, und dann auf den "Record Keyframe" grünen Plus-Button;
2. Bearbeiten der Eigenschaften von UI-Elementen in KeyTime, wie im obigen UI Authoring Abschnitt beschrieben;
3. Wiederholen Sie die Schritte 1 und 2 für jeden Keyframe;

Wie können wir in folgenden Screenshot zu sehen:

• in Objekte und Zeitachsen:
  • der Name der Timeline bearbeitet: Storyboard1;
  • das Schlüsselbild in Bearbeitung: KeyTime beträgt 1 Sekunde, von dem gelben Timeline;
  • Doppelpfeil Icons auf der linken Seite der Knoten in den Objekten Panel (Taste RenderTransform, Scale, scaleX, scaleY in folgenden Screenshot) und die weißen Punkte auf der Zeitachse in der Zeitleiste zeigen Eigenschaftsänderungen für Objekte an der KeyTime;
  • können wir das Spiel kontrolliert an der Spitze der Zeitleiste verwenden, oder ziehen Sie die gelbe Zeitleiste, um die Animation zu laufen;
• in Zeichenfläche von Dokumenten Panel:
  • die rote Umrandung, rote Aufnahme-Schaltfläche, und die rote Aufschrift "Timeline Aufnahme befindet sich auf" alle anzeigen Blend ist in Timeline-Aufnahmemodus;
  • Sie können auf die rote Aufnahmetaste, um den Aufnahmemodus zu stoppen und Schalter wieder auf UI-Authoring-Modus;
• In Properties Panel:
  • Wert von target-Eigenschaften: wie ScaleTransform.ScaleX auf 2 gesetzt;

Blend verwendet XXXAnimationUsingKeyFrames und erzeugt einen Keyframe für jedes Objekt / Objekt / Keyframe-Trio. Wir können eine Feinabstimmung der Eigenschaften eines Keyframe selbst, indem Sie zunächst in der Objects Systemsteuerung und dann Festlegen seiner Eigenschaften in dem Fenster Eigenschaften, wie in unten Screenshot:

• KeyTime ist "00:00:01"
• Zielobjekt-Taste wird Zielpfad etwa RenderTransform.ScaleTransform.ScaleX
• Der Wert ist "2"
• KeySpline ist "0.5,0.1,0.5,0.9"

können wir auch eine Feinabstimmung der Eigenschaften des Storyboards in der gleichen Weise, in folgenden Screenshot, wie:

• Storyboard1 ausgewählt
• AutoReverse und RepeatBehavior werden geändert

Dies ist der XAML-Code Blend für über einfache Animation erstellt:

Natürlich ist es viel einfacher, Autor Animationen in Blend statt schriftlich XAML manuell.

Template Authoring

Die Schönheit und Kraft der WPF / Silverlight ist die Möglichkeit, re-template Kontrolle. Es ist ziemlich einfach zu tun, dass in Blend: wählen Sie einen Menüpunkt aus dem "Edit Control Parts (Template) -> Edit Template" Kontext-Menü, entweder von Objekte und Zeitachsen, oder aus der breadcrumb in Zeichenfläche:

"Kopie bearbeiten ..." Menüpunkt ist auch eine einfache Möglichkeit, das Standard-Template einer Kontrolle zu bekommen. In folgenden Screenshot sehen wir:

• Standardvorlage Komponenten in Objekte und Zeitachsen
• visuellen Zustand Gruppen, visuelle Zustände und Übergänge in Interaction-Panel
• Eigenschaften der Vorlage Komponenten in Properties Panel. Das orangefarbene Quadrat auf der rechten Background-Eigenschaft gibt es Vorlagen gebunden.

Drill in weiter: Wählen Sie die deaktivierte visuellen Zustand, und wir können sehen, dass die Behinderten in visuelle Zeichenfläche durch die visuelle Zustandsübergang Storyboard erzeugt, animiert die Opacity-Eigenschaft des DisabledVisualElement von 0% bis 55% in 0 Sekunden:

Bitte beachten Sie, dass in der Nähe der Spitze der Objekt-und Timeline-Panel, das Disabled-Status statt eines Storyboards zeigt, ist der angibt, Blend in State-Aufnahme-Modus.

Nun wollen wir einige Änderungen an der Standardvorlage, indem der Schwerpunkt visuelle Zustandsübergang zu neigen die Taste, wenn es fokussiert ist:

• wählen Sie die Focused visuellen Zustand in Wechselwirkung Systemsteuerung, klicken Sie auf den Pfeil Plus-Symbol auf der rechten, wählen Sie eine der drei Optionen (die Optionen sind für die visuelle Zustandsübergänge zum und vom Staat, und zwischen beiden Staaten vor allem in den visuellen Zustand Gruppe);
• Blend ist in visuellen Zustand Aufnahmemodus: Schwerpunkt ist die gewählte visuellen Zustand;
• fügen Sie eine neue skew verwandeln, um das obere Rost als in Authoring Animations Abschnitt besprochen. Beachten Sie, dass die Schaltfläche in Zeichenfläche ist jetzt schief. Der WYSIWYG-Zeichenfläche macht Animation Authoring einfach und intuitiv.
• löschen Sie die FocusVisualElement Vorlage Komponente in Objects-Panel, da wir nicht brauchen es nicht mehr. Beachten Sie die tooltip an der Spitze angibt Mischung automatisch gelöscht den visuellen Zustand Übergang dass die FocusVisualElement zeigt, wie gut.

Die Mischung erzeugte XAML für über benutzerdefinierte Vorlage ist 102 Zeilen, 6179 Zeichen! Stellen Sie sich vor der Schwierigkeit, Authoring, die von Hand!

Sobald wir eine Vorlage haben, können wir es um UI-Elemente des Stils Zieltyp (oder deren Sub-Typ) gelten:

Style-Authoring

Mit Stil ist in der Regel besser als die Einstellung von Eigenschaften für Objekte direkt, da Stile können wiederverwendet werden, sind leicht zu pflegen und helfen getrennte Darstellung von Inhalten (die UI-Elemente). Style-Authoring ist ähnlich Vorlage Authoring oben diskutiert, außer dass es viel einfacher ist. Sie müssen das Objekt zu verwenden -> Edit Menü Stil den Stil-Authoring-Modus zu gelangen. Es gibt keinen Kontext-Menü für sie, die Stil-Authoring weniger auffindbar macht.

Wählen Sie Erstellen leer ... Menüpunkt, und das Erstellen von Stilressource Dialog erscheint, können Sie den Namen und Speicherort des neuen Stils Ressource angeben:

Dann betritt Mischung Stil Authoring-Modus:

• Objekte und Zeitachsen-Panel-Displays hervorgehoben Style-Element anstelle des UI logischen Struktur;
• der Breadcrumb auf der Zeichenfläche zeigt auch, wir sind Authoring LayoutRoot Stil mit einer Palette das Symbol;
• Lassen Sie uns noch etwas hinzufügen, um den Stil, indem Hintergrundinformationen über die Brush-Editor, bemerken die Zeichenfläche spiegelt die Änderung unmittelbar;
• der XAML-Ansicht von Dokumenten-Panel zeigt die einfache XAML für Stil Authoring erzeugt;

Sobald wir einen Stil Ressource, ihre Anwendung ist einfach: wählen Sie das Objekt und die Verwendung Object -> Edit Style -> Übernehmen Ressourcen Menüpunkt.

Resource Management

Storyboard, sind Styles und Templates verfasste vor allem Ressourcen. Wir können die Ressourcen-Panel, um Ressourcen zu verwalten:

• können wir sehen, alle Ressourcen in beiden app.xaml (globalen Ressourcen) und dem aktuellen XAML-Datei page.xaml, das bearbeitet wird (lokale Ressourcen).
  • Nicht sicher, warum Storyboard1 in Animation Authoring Abschnitt erstellt wird nicht angezeigt. Blend-Bug oder Anwenderfehler?
• Wir können eine Ressource über das Kontextmenü bearbeiten oder bearbeiten Ressource-Taste:
  
  
• wir können auch per Drag & Drop eine Ressource auf dem Baum, um seine Position (und Sichtbarkeit), wie das Verschieben zwischen app.xaml und page.xaml oder [UserControl] und Taste ändern.

Abschluss

Zur Erinnerung, macht Blend-UI-Authoring einfach und intuitiv:

• Hilfsfunktionen (und Asset-Bibliothek) und Zeichenfläche ermöglicht WYSIWYG UI-Authoring;
• Objekte Panel hilft, alle UI-Elemente in der logischen Struktur zu organisieren;
• Eigenschaften Panel vereinfacht die Einstellung der Eigenschaft mit Redakteuren;

Aufbauend auf der Oberseite des intuitive UI-Authoring, vereinfacht Mischung Animation Authoring durch die Einführung der Timeline-Aufnahmemodus:

• Mischung verwendet immer XXXAnimationUsingKeyFrames, so ein Storyboard ist immer eine Sammlung von Keyframes;
• Mischung erzeugt Keyframes indirekt, indem Benutzer eingestellt UI-Element Eigenschaften bei keytimes über die intuitive Benutzeroberfläche Authoring-Schnittstelle;
• Mischung erzeugt immer alle vier verwandelt, wie unten, um seine Keyframe-Erzeugung Uniform verwandelt zu machen:

    > <Button.RenderTransform>
       > <TransformGroup>
           /> <ScaleTransform />
           /> <SkewTransform />
           /> <RotateTransform />
           /> <TranslateTransform />
       > </ TransformGroup>
   > </ Button.RenderTransform> 

Auf seiner UI und Animation Authoring, vereinfacht Mischung Vorlage Authoring durch die Einführung der Vorlage Authoring-Modus und Staat Aufnahmemodus. Eine Vorlage besteht aus Vorlagenparts und visuellen Zustände. Template Teile sind nur eine logische Baum von UI-Elementen und visuellen Zustandsübergänge werden Storyboards.

Style-Authoring ist noch einfacher: Ein Stil ist nur eine Sammlung von Eigenschaftensetter. Mischung stellt Stil-Authoring-Modus, um zwischen den regulären UI-Authoring und Stil-Authoring zu unterscheiden.

So Blend ist eine große XAML-Authoring-Tool. Es ist nicht nur für Designer, sondern auch den Entwicklern große Produktivität zu steigern. Hoffentlich Beitrag gibt Ihnen einen guten Überblick über Blend und um Ihnen den Einstieg bei der Erforschung Blend, mit Begeisterung ). Vielen Dank!

Gesellig, Share!

•