Ning Zhang's 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 meistens für Werkzeuge entwickelt, sind so gut, Authoring-Tools wichtiger als für andere Sprachen wie C # oder XAML HTML. Blend zu XAML ist, was ist zu Visual Studio C #. Es gibt viele gute Tutorials und Unterlagen für Blend, wie Jesse Liberty's Expression Blend für Entwickler . Dieser Beitrag ist eher wie "Learn Blend in 15 Minutes", um einen schnellen Überblick und Anleitung von Blend für Entwickler, die XAML-Authoring sind meist in Visual Studio oder Editor geben, und so werden sie interessiert sind und wissen, wie man bei der Verwendung loslegen Blend.

Project Management

Blend Duplikate eine Menge von Visual Studio hat große Funktionalität und Integration mit sich. Es ist sehr häufig (oder sogar empfohlen, würde ich sagen) zu einer WPF / Silverlight-Projekt öffnen in beide 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.

Projekt in Blend-Verwaltung ist sehr ähnlich wie in Visual Studio über das Menü, Project Panel und Ergebnis-Panel:

• Menu: die Datei, Bearbeiten, Projekt-und Hilfe-Menüs sind sehr ähnlich zu denen in Visual Studio. Über diese Menüs können Sie erstellt / geöffnet WPF / Silverlight-Projekte, Elemente hinzufügen / references etc, und selbst zu bauen und führen Sie die Lösung, genau wie in Visual Studio.
  
• Project Panel: Es ist sehr ähnlich zu Visual Studio Solution Explorer. Du kannst einen Rechtsklick auf einen .xaml / .cs Datei im Projekt-Panel und wählen Sie "Bearbeiten in Visual Studio", und das Projekt und die ausgewählte Datei wird geöffnet in Visual Studio für die Bearbeitung.
  
• Result Panel: die Registerkarte Ausgabe und Fehler Registerkarte ähneln Output-Fenster und Fenster Error List in Visual Studio.

UI-Authoring

UI-Authoring ist meist über drei Platten gemacht:

Objekte und Zeitleistenfenster

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

Dokumente Panel

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

• Sie können die Registerkarten am oberen Rand des Fensters verwenden, um Dokumente zwischen geöffneten Dokumenten oder in der Nähe Dokumente (nur eine Registerkarte im obigen Screenshot zu wechseln, da nur eine Datei geöffnet ist page.xaml.).
• Sie können zwischen Entwurfsansicht XAML-Ansicht oder Split-Ansicht des ausgewählten Dokument wechseln. Sie können auch die Standard-Dokument in Extras -> Optionen -> Dokumente:
  
• Es ist ein breadcrumb Kontrolle an der Spitze der Design-Ansicht (auch als Zeichenfläche) an die Logik Baum Pfad des ausgewählten Elements zu zeigen. Dies ist ein weiterer Weg, um die logische Struktur neben den Objekten Panel zu navigieren und zu unter-Authoring-Modi zu wechseln, wie wir bald sehen werden.
• Sie können die Ansicht durch Zoom
  • Wählen Sie das Zoom-Symbol aus der Toolbox, dann klicken oder ALT-Klick auf die Zeichenfläche;
  • Verwenden Sie die Combobox rechts unter der Zeichenfläche zu vergrößern:
  • Verwenden Sie das Menü Ansicht Produkten oder deren Tastenkombinationen:
• Die Design-Ansicht ist ein WYSIWYG-Designer, wo man per Drag & Drop können Sie ein Element aus der Toolbox oder Asset Library am linken Rand der Blend-Fenster:
  
• Die XAML-Ansicht ermöglicht die direkte XAML-Authoring. Es muss nicht IntelliSense noch nicht, 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, durch die zwei Knöpfe an der rechten oberen Ecke des Panels angezeigt.

• In Eigenschaften anzuzeigen:
  
  • Eigenschaften des ausgewählten Elements ist in Kategorien eingeteilt, wie Layout, Allgemeine Eigenschaften;
  • Eigenschaften haben in der Regel kleiner Tipp, wie Content-Eigenschaft tooltip im obigen Screenshot;
  • Eigenschaften haben in der Regel Inline / erweitert / Dialog-Editor (s) zu helfen Benutzer wähle einen Wert, wie der Wert der Immobilien in HorizontalAlignment obigen Screenshot können durch Anklicken einer der vier Tasten eingestellt werden, statt der Eingabe von Werten wie "Center" in XAML Blick direkt;
  • Wenn Sie geben eine Eigenschaft einen Wert (so ist es nicht länger dauert der Standardwert), den kleinen Platz, um sein Recht werden weiß, wie das Alignment-Eigenschaften im obigen Screenshot;
  • können Sie auf den Pfeil nach unten (die "Erweiterte Eigenschaften anzeigen", tooltip) in den meisten Kategorien, um weitere Eigenschaften dieser Kategorie zu sehen;
  • Sie können eine Eigenschaft schnell zu finden, indem Sie einen Teil seines Namens in das Suchfeld am oberen Rand der Fenster Eigenschaften:
    
• In Veranstaltungen anzuzeigen:
  
  • Sie können den Namen der Event-Handler für ein Ereignis, und die Mischung wird das Projekt in Visual Studio öffnen, mit einer prototypischen Implementierung der Event-Handler im Code Behind-Datei:

  

Animation Authoring

So erstellen Sie eine Animation, klicken Sie auf das Pluszeichen in Objekte und Zeitleistenfenster, das "Storyboard erstellen Resource"-Dialog öffnet sich, fragt nach dem Namen des neuen Storyboard:

Blend tritt dann Timeline Aufnahmemodus. Let's eine Animation erstellen, dass die Größe der Schaltfläche verdoppeln wird. Die wichtigsten Schritte beim Erstellen einer Animation:

1. Erstellen Sie ein Schlüsselbild, indem Sie zuerst die gelbe Timeline ziehen, eine keytime, und dann auf den "Record" Keyframe "grünen Plus-Taste;
2. Bearbeiten der Eigenschaften von UI-Elementen auf keytime, wie im obigen Abschnitt beschrieben UI Authoring;
3. Wiederholen Sie die Schritte 1 und 2 für jedes Keyframe;

Wie können wir im folgenden Screenshot zu sehen:

• in Objekte und Zeitleistenfenster:
  • der Name der Timeline bearbeitet: Storyboard1;
  • das Schlüsselbild bearbeitet: keytime ist 1 Sekunde, angegeben durch das gelbe Timeline;
  • den Doppelpfeil Symbole, um die der Knoten in den Objekten Panel (Button, RenderTransform, Scale, ScaleX, in ScaleY unten Screenshot) und die weißen Punkte entlang der Zeitleiste in der Zeitleiste zeigen Eigenschaft ändert für Objekte an der linken keytime;
  • wir können das Spiel benutzen Kontrollen an der Spitze der Zeitleiste, oder ziehen Sie den gelben Timeline, um die Animation zu laufen;
• in der Zeichenfläche Dokumente Panel:
  • Die rote Umrandung, rote Aufnahmetaste, und die rote Label "Timeline Aufnahme ist auf" alle anzeigen Blend wird in der Zeitleiste Aufnahmemodus;
  • können Sie auf die rote Aufnahmetaste, um den Aufnahmemodus zu stoppen und wechseln Sie wieder zu UI-Authoring-Modus;
• In Properties Panel:
  • Wert von target-Eigenschaften: wie ScaleTransform.ScaleX auf 2 gesetzt ist;

Blend verwendet XXXAnimationUsingKeyFrames und erzeugt ein Schlüsselbild für jedes Objekt / Objekt / Keyframe-Trio. Wir können eine Feinabstimmung der Eigenschaften eines Keyframe selbst, indem Sie zunächst in der Systemsteuerung Objects, und dann setzen die Eigenschaften in dem Fenster Eigenschaften, wie im folgenden Screenshot:

• KeyTime ist "00.00.01"
• Zielobjekt-Taste, Zielpfad ist etwa RenderTransform.ScaleTransform.ScaleX
• Wert "2"
• KeySpline ist "0.5,0.1,0.5,0.9"

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

• Storyboard1 ausgewählt
• AutoReverse und RepeatBehavior Eigenschaften verändert werden

Dies ist die XAML-Code generiert Blend für obige einfache Animation:

  AutoReverse ="True" RepeatBehavior ="Forever" x:Name ="Storyboard1" > <Storyboard AutoReverse = "True" RepeatBehavior = "Forever" x: Name = "Storyboard1">
     BeginTime ="00:00:00" Storyboard . TargetName ="button" Storyboard . TargetProperty ="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" > <DoubleAnimationUsingKeyFrames BeginTime = "00:00:00" Storyboard. TargetName = "button" Storyboard. TargetProperty = "(UIElement.RenderTransform). (TransformGroup.Children) [0]. (ScaleTransform.ScaleX)">
         KeySpline ="0.495999991893768,0.104000002145767,0.5,0.898999989032745" KeyTime ="00:00:01" Value ="2" /> <SplineDoubleKeyFrame KeySpline = "0.495999991893768,0.104000002145767,0.5,0.898999989032745" KeyTime = "00.00.01" value = "2" />
     > </ DoubleAnimationUsingKeyFrames>
     BeginTime ="00:00:00" Storyboard . TargetName ="button" Storyboard . TargetProperty ="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" > <DoubleAnimationUsingKeyFrames BeginTime = "00:00:00" Storyboard. TargetName = "button" Storyboard. TargetProperty = "(UIElement.RenderTransform). (TransformGroup.Children) [0]. (ScaleTransform.ScaleY)">
         KeyTime ="00:00:01" Value ="2" /> <SplineDoubleKeyFrame KeyTime = "00.00.01" value = "2" />
     > </ DoubleAnimationUsingKeyFrames>
 > </ Storyboard> 

Natürlich ist es viel einfacher, Autor Animationen in Blend anstelle des Schreibens XAML manuell.

Template Authoring

Die Schönheit und Kraft der WPF / Silverlight ist die Möglichkeit, erneut eine Vorlage zu kontrollieren. Es ist ziemlich einfach, dass in Blend tun: Wählen Sie einen Menüpunkt aus dem "Edit Control Parts (Template) -> Template bearbeiten" im Kontextmenü entweder von Objekten und Zeitleistenfenster oder aus der Pfadnavigation in Zeichenfläche:

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

• Standard-Template-Komponenten in Objekte und Zeitleistenfenster
• visuellen Zustand Gruppen, visuelle Zustände und Übergänge in Interaction Panel
• Eigenschaften der Bauteile in Vorlage Properties Panel. Die orangefarbene Quadrat rechts neben der Background-Eigenschaft gibt es Template gebunden.

Drill im weiteren: Wählen Sie die behindertengerechte visuellen Zustand, und wir können sehen, dass die Behinderten in Visual Zeichenfläche wird durch die visuelle Zustandsübergang Storyboard, dass die Opacity-Eigenschaft des DisabledVisualElement beseelt von 0% bis 55% in 0 Sekunden generiert:

Bitte beachten Sie, dass in der Nähe der Spitze des Objekt-und Zeitleistenfenster, zeigt es im deaktivierten Zustand statt eines Storyboard, zeigt Blend im Zustand Aufnahmemodus.

Nun lasst uns einige Änderung an den standardmäßigen durch Veränderung der Konzentration von Visual State-Transition-Vorlage auf den Knopf, wenn sie konzentriert ist schräg:

• Wählen Sie den visuellen Zustand Focused in Interaction Panel, klicken Sie auf den Pfeil Plus-Symbol auf seinem Recht, wählen Sie eine der drei Optionen (diese Optionen sind für die visuelle Zustandsübergänge zu und von diesem Staat, und insbesondere zwischen den beiden Staaten in den visuellen Zustand Gruppe);
• Blend ist in Visual State-Aufnahmemodus: Schwerpunkt ist die ausgewählten visuellen Zustand;
• fügen Sie eine neue Skew verwandeln Anfang Raster als Authoring-Animationen in Abschnitt erörtert. Beachten Sie, dass die Schaltfläche in Zeichenfläche ist jetzt schief. Der WYSIWYG-Authoring-Animation Zeichenfläche macht einfach und intuitiv.
• Löschen Sie die Komponente in FocusVisualElement Objekte Template-Panel, da wir nicht brauchen es nicht mehr. Beachten Sie den tooltip an der Spitze angibt Blend automatisch der optische Zustand, dass der Übergang FocusVisualElement zeigt ebenfalls gelöscht.

Die generierten XAML für Blend oben benutzerdefinierte Vorlage ist 102 Zeilen, 6.179 Zeichen! Stellen Sie sich die Mühe Authoring, die von Hand!

Sobald wir eine Vorlage haben, können wir es UI-Elemente des Stils Zieltyp (oder seine Haustyp gelten):

Style Authoring

Mit Stil ist in der Regel besser als das Festlegen von Eigenschaften auf Objekte direkt, da Stile können wiederverwendet werden, sind leicht zu pflegen und helfen separate Präsentation von Inhalten (die UI-Elemente). Style-Authoring ist ähnlich wie oben diskutierten Vorlage Authoring, außer es ist viel einfacher. Sie müssen die Object -> Edit Style-Menü verwenden, um den Stil Authoring-Modus zu gelangen. Es gibt keinen Kontext-Menü für sie, welchen Stil Authoring weniger erkennbar macht.

Wählen Sie Create Empty ... Menüpunkt, und das Erstellen Style Resource Dialog erscheint, können Sie den Namen und den Standort des neuen Stils Ressource angeben:

Dann tritt Blend style-Authoring-Modus:

• Die Objekte und Timeline TFTs hervorgehoben Style-Element anstelle des UI logischen Baum;
• die Brotkrümel auf der Zeichenfläche zeigt auch, wir sind Authoring LayoutRoot Stil mit einer Palette das Symbol;
• let's noch etwas hinzufügen, um den Stil, indem Sie den Pinsel über Hintergrund-Editor, Bekanntmachung der Zeichenfläche spiegelt die Veränderung unmittelbar;
• der XAML-Ansicht von Dokumenten-Panel zeigt die einfache XAML-Authoring für Stil erzeugt;

Einmal haben wir einen Stil Ressource, die Anwendung ist einfach: Wählen Sie das Objekt und die Verwendung Object -> Edit Style -> Apply Resource Menüpunkt.

Resource Management

Storyboard, Styles und Templates verfasst über alle Ressourcen. Wir können mit dem Panel-Ressourcen, Ressourcen zu verwalten:

• können wir alle Ressourcen in beiden app.xaml (siehe globalen Ressourcen) und aktuelle XAML-Datei page.xaml, das bearbeitet (lokale Ressourcen).
  • Nicht sicher, warum Storyboard1 erstellte Animation in Authoring Abschnitt nicht angezeigt wird. Blend Bug oder Benutzerfehler?
• Wir können eine Ressource über das Kontextmenü bearbeiten oder bearbeiten Ressource-Taste:
  
  
• Wir können auch per Drag & Drop eine Ressource entlang der Baum seine Lage (und Sichtbarkeit), wie ein Umzug zwischen Veränderung und app.xaml page.xaml oder [UserControl] und drücken.

Abschluss

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

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

Aufbauend auf der intuitiven Benutzeroberfläche Authoring, vereinfacht Blend Animation Authoring durch die Einführung der Timeline-Aufnahmemodus:

• Blend verwendet immer XXXAnimationUsingKeyFrames, so ein Storyboard ist immer eine Sammlung von Keyframes;
• Blend erzeugt Schlüsselbilder indirekt, indem Benutzer eingestellten UI-Element Eigenschaften bei keytimes über seine intuitive Benutzeroberfläche Authoring-Schnittstelle;
• Blend erzeugt immer alle vier verwandelt wie unten, auf seine Uniform für Keyframe-Erzeugung machen verwandelt:

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

On top seiner UI-Animation und Authoring-, Blend-Authoring-Vorlage vereinfacht durch die Einführung der Vorlage Authoring-Modus und Staat Aufnahmemodus. Eine Vorlage besteht aus Teilen und visuelle Vorlage Staaten. Template Teile sind nur eine logische Struktur von UI-Elementen und visuellen Zustandsübergänge sind Storyboards.

Style-Authoring ist sogar noch einfacher: ein Stil ist einfach eine Ansammlung von Eigentum Setter. Blend-Stil präsentiert Authoring-Modus, um zwischen regulären UI-Authoring Authoring und Stil unterscheiden.

So Blend ist ein großer XAML-Authoring-Tool. Es ist nicht nur für Designer, können aber auch den Entwicklern große Produktivität zu steigern. Hoffentlich diesem Beitrag gibt Ihnen einen guten Überblick über Blend und Ihnen den Einstieg in erforschen Blend begeistert ). Vielen Dank!