Neues in Expression Blend 4: Liebe macht Blend!

by Gregor Biswanger 13. Mai 2010 08:47

expression-blend-4-logo

In Expression Blend 4 haben sich einige neue Dinge getan. Das Beste daran ist, das alle Vorbesitzer von Expression Blend 3 die neue Version kostenfrei beziehen können. Aktuell gibt es nur die RC-Version, die es hier zum kostenfreien Download gibt.

 

Interoperabilität mit Visual Studio 2010

Expression Blend 4 und Visual Studio 2010 verwenden dasselbe Projektformat. Somit wird weiterhin die gemeinsame Arbeit der beiden Tools unterstützt. Wichtig dabei zu beachten gilt, dass ein VS2008-Projekt automatisch zu einem VS2010-Projekt abgeändert wird.

 

Das PathListBox Control

Die PathListBox ist ein neues Control, das eine ganz neue Art zur Veranschaulichung der Daten widergibt. Die Items werden mit einem flexiblen Layout dargestellt. Dabei geben Path-Elemente eine Vorlage für deren Position ab.

Als Beispiel wird ein neues Projekt in Expression Blend 4 angelegt. Dieses Projekt bekommt dann ein PathListBox links oben in die Ecke rein.

abb1-Path-Element-hinzufuegen

Abb.1. – PathListBox hinzufügen.

Anschließend werden Beispieldaten mittels Data-Funktionalität bereitgestellt. Wie die Data-Funkion in Expression Blend verwendet werden kann, beschreibt bereits dieser Blog-Post: “Expression Blend 3 - Daten für Designer bereitstellen”. In diesem Beispiel wurden zwei Properties der Collection hinzugefügt. Einmal ein Image und zum zweiten ein Price-Property.

abb2-beispieldaten-anlegen

Abb.2. – Mittels Data-Feature Beispieldaten bereitstellen.

Anschließend wird mittels Drag & Drop die Collection auf das PathListBox-Element gedroppt. Wenn alles richtig gemacht wurde, wird bereits das erste Item angezeigt.

Abb3–Beispieldaten-mit-PathListBox-binden

Abb.3. – Beispieldaten mit PathListBox binden.

Als Path-Element soll hier eine Ellipse dienen, die in die Mitte des Bildschirms platziert wird.

Abb4–Ellipse-zeichnen

Abb.4. – Ellipse zeichnen

Nun muss der PathListBox die Ellipse zugewiesen werden. Dazu wird die PathListBox ausgewählt und im Eigenschaftenfenster unter „Layout Paths“ mit gedrückter Maustaste das SelectionIcon auf die Ellipse gezogen. Nun sollten bereits alle Beispieldaten der Ellipse entlang Anzeigen.

Abb5–Ellipse-der-PathListBox-zuweisen

Abb.5. – Ellipse der PathListBox zuweisen.

Zum Ende wird nun der Ellipse die Hintergrund- und Rahmenfarbe zurückgesetzt. Somit verabschiedet sich quasi die Ellipse von der Bildfläche.

Abb6–Die-Ellipse-unsichtbar-machen

Abb.6. – Die Ellipse „unsichtbar“ machen.

Beim Starten der Anwendung mittels F5-Taste, können die Stuhl-Produkte ganz angenehm mit einer neuen Usability bedient werden.

Abb7–Die-fertige-WPF-Anwendung-mit-PathListBox

Abb.7. – Die fertige WPF-Anwendung mit PathListBox.

Das MVVM mit Expression Blend 4

Während ich vor langer Zeit versuchte ein MVVM mittels Expression Blend zu erzeugen und dies hier bloggen wollte, bringt Expression Blend 4 nun endlich eine eigene Projektvorlage für dieses Pattern mit.

Beim Startbildschirm, ganz gleich ob WPF oder Silverlight, werden „Databound“-Applications als Projektvorlage angeboten.

Abb8-Neue-databound-Projektvorlagen

Abb.8.- Neue Databound-Projektvorlagen für ein integriertes MVVM-Pattern.

Das Projekt hat bereits ein einfaches Beispiel integriert. Dieses kann vorerst mit der Taste F5 betrachtet werden. Es zeigt einen einfachen Text und einem Button in der Mitte des Bildschirms. Beim Klicken des Buttons, ändert sich die Information des Textes.

Abb9-Vorschau-der-fertigen-Anwendung

Abb.9. – Vorschau der fertigen Anwendung.

Bei genauerer Betrachtung ist eine fertige Vorlage wie folgt aufgebaut. Unter Views ist ein einzelnes Oberflächen-Element enthalten. Bei genauerer Betrachtung, besteht Sie nur aus einem TextBlock- und einem Button-Element. Zudem wurde diesem Button eines der neuen CallMethodAction-Behavior zugewiesen. Bei diesem Behavior wird automatisch ein Command auf eine gewünschte Methode eines ViewModels definiert, ohne das eine Zeile Code dazu selbst geschrieben werden muss. Das ViewModel beinhaltet ein String-Property, das mittels INotifyPropertyChanged vollste Data-Binding Funktionalität liefert. Weitere Infos hier unter Norbert Eders Blog, zum Thema: View, ViewModel und Model im Detail.

Abb10-Projektstruktur-der-fertigen-MVVM-Vorlage

Abb.10. – Projektstruktur der fertigen MVVM-Projektvorlage.

Neue View + dazugehöriges ViewModel anlegen

Sehr angenehm ist das hinzufügen einer neuen View inklusive einem dazugehörigen ViewModel. Dazu wird einfach mit der rechten Maustaste auf das Projekt, ein neues Item hinzugefügt. Hier hat man nun die Auswahl, eine neue View + ViewModel anzulegen. Die View beinhaltet automatisch eine Zuweisung zum ViewModel. Das ViewModel beinhaltet nur noch eine fertige INotifyPropertyChanged Implementation.

Abb11–Neue-View ViewModel-anlegen

Abb.11. – Neue View + ViewModel anlegen.

 

Bestendes Model mit Data-Funktionalität für Designer nutzen

Ab Expression Blend 3 kann wie bereits hier im Artikel genannt wurde, für Desinger gemockte Daten zur Verfügung gestellt werden. Dabei musste der Designer das später zu Erwartende Schema mühsam selbst zusammenklicken. Ab Expression Blend 4 wird bei diesem Problem abgeholfen. Indem ein bestehendes Model mit Testdaten gefüllt werden kann. Dazu hat man zum Beispiel ein Model und ein Entity wie Listing 1 veranschaulicht.

   1:  using System.Collections.Generic;
   2:   
   3:  namespace Wpf_MVVM_Example.Model
   4:  {
   5:      public class CustomerModel
   6:      {
   7:          public List<Customer> GetCustomers { get; set; }
   8:      }
   9:      
  10:      public class Customer
  11:      {
  12:   
  13:              public string Name { get; set; }
  14:              public string Company { get; set; }
  15:      }
  16:  }

Listing 1 – CustomersModel.

Anschließend wird in Expression Blend 4 im Data-Bereich die Funktion “Create Sample Data from Class..“ hinzugefügt.

Abb12–Create-Sample-Data-from-Class-hinzufuegen.

Abb.12. – „Create Sample Data from Class..“ hinzufügen.

Daraufhin folgt ein Auswahlfenster für das gewünschte Model. Hier wird CustomerModel ausgewählt.

Abb13–CustomerModel-auswaehlen

Abb.13. – CustomerModel auswählen.

Nun generiert Expression Blend 4 ein Model das nun Testdaten passend zu den Properties bietet. Blend hat auch Formatvorlagen, die nun den einzelnen Properties zugewiesen werden können. Bei diesem Beispiel wird dem Property Name das Format „Name“ zugewiesen und das Property Company bekommt „Company Name“.

Abb14–Model-mit-Formatvorlagen-zuweisen

Abb.14. – Model mit Formatvorlagen zuweisen.

Beim klick auf das Daten-Icon können dann die Testdaten eingesehen werden. Bei der RC-Version von Expression Blend 4 ist dies eine XAML-Datei die sich dann Öffnet. Die Final-Version wird bestimmt gleichermaßen wie gewohnt mit einem Datenvorschau-Fenster die Daten präsentieren.

Abb15–Testdaten-einsehen

Abb.15. – Testdaten einsehen.

Jetzt kann das generierte Model mittels Drag & Drop nun einem DataGrid zugewiesen werden. Das DataGrid füllt sich dann sofort mit diesen Beispieldaten, so dass der Designer mit seiner Arbeit sofort starten kann.

Abb16–Einem-DataGrid-das-Model-mit-den-Testdaten-zuweisen

Abb.16. – Einem DataGrid das Model mit den Testdaten zuweisen.

Transition Effekte

Ab Expression Blend 4 folgen nun zahlreiche neue Effekte, die zu VisualStates zugewiesen werden können.

Abb17–Transition-Effekte

Abb.17. – Transition Effekte

 

Fazit

Bei Expression Blend 4 steht ganz klar ein verbesserter Arbeitsprozess zwischen Designer und Entwickler an erster Stelle. Die neuen Features lassen sich ganz angenehm Anwenden und zeigen Vielversprechendes. Eine Verspätung der Final-Version kann bestimmt daran liegen, das für Expression Blend 4 die Unterstützung des Windows Phone 7 vorgesehen ist.



Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.
kick it on dotnet-kicks.de

Kommentare

Kommentar schreiben


(Zeigt dein Gravatar icon)  

  Country flag

biuquote
  • Kommentar
  • Live Vorschau
Loading



Powered by BlogEngine.NET 1.4.5.0
Theme by Extensive SEO

Über den Autor

Gregor Biswanger

Microsoft MVP für Client App Dev
XING

Gregor Biswanger (Microsoft MVP für Client App Dev) ist freier Consultant, Trainer, Autor und Speaker.


Seine Schwerpunkte liegen im Bereich der .NET-Architektur, agilen Prozessen und XAML. Er veröffentlichte vor kurzem seine DVD´s mit Video-Trainings zum Thema „Meine erste Windows 8 App“, „Windows Store Apps mit XAML und C#“ und „WPF 4.5 und Silverlight 5“ bei Addison-Wesley von video2brain.


Biswanger ist auch im Auftrag von Intel GmbH als Technologieberater für die Intel Developer Zone aktiv und ist Leader bei der Ingolstädter .NET Developers Group (INdotNET). 

 

Video über mich:
http://www.youtube.com/watch?v=mx_6SiiLxjk


Basta! 2011 Speaker

CLIPer

MCTS
Windows SharePoint Services 3.0 – Application Development (MCTS)