Oberflächlich

Software-Design mit Expression Studio

Expression Studio ist die Programmier- und Designumgebung für Windows Vista und das Web. Ein Praxisbeispiel zeigt demonstriert die Funktionen der neuen Microsoft-Tools.

Expression Studio

© Archiv

Expression Studio

Microsoft Expression Studio versorgt die Programmierung für Windows-Betriebssysteme mit einer neuen Fassade. Das Paket besteht aus vier Hauptprogrammen. Alle sind zwar für Windows Vista gedacht, arbeiten aber auch mit XP Service Pack 2 zusammen. Das Ziel der Programme ist klar: Hier wird an der Vorherrschaft von Adobe mit Flash & Co. geknabbert. Das gilt vor allem beim Preis: 800 Euro für Expression Studio stehen 2000 Euro für Creative Suite 3 gegenüber.

Die Programme des Expression-Pakets sind Design-Werkzeuge sowohl für Desktop- wie Web-Anwendungen. Sie sollen in dieser Kombination die Zusammenarbeit zwischen Designern von Benutzeroberflächen und Programmierern vereinfachen. Das Entscheidende bei den Expression-Modulen ist die Trennung zwischen dem Gestalten, dem Oberflächen-Code in XAML und dem dahinter liegenden Programmcode.

Programm Beschreibung
Expression Blend Das Design-Programm zum Erstellen von interaktiven Benutzeroberflächen für Web- und Desktop-Anwendungen
Expression Design Ein vektorbasiertes Zeichen- und Illustrations-Programm
Expression Web Der FrontPage-Nachfolger gestaltet Websites auf Basis der Standards XHTML, CSS und XML
Expression Media Management- und Katalog-Software, die Daten verwaltet, archiviert, weitergegeben und präsentiert
Expression Encoder Erzeugt Videos im VC1-Format. Fremdformate wie AVI, MPEG, QuickTime oder WMV konvertiert das Modul.
Visual Studio 2005 Programmcode hinter Blend-Oberflächen verwaltet und kompiliert Visual Studio 2005. Auch VB- oder C#-Express sind erlaubt.

Die eXtensible Application Markup Language oder kurz XAML ist die Beschreibungssprache für Benutzeroberfläche in XML-Notierung, die Microsoft auch für die Vista-Oberfläche benutzt. Diese wiederum setzt auf die Windows Presentation Foundation (WPF) auf, der Grafikschnittstelle von Vista.

Bildergalerie

Expression Blend
Galerie
Oberflächlich

Expression Blend dient dem Entwurf von Programmoberflächen, den Code dazu erzeugt zum Beispiel Visual Basic.

Arbeiten mit Blend

Expression Blend

© Archiv

Expression Blend dient dem Entwurf von Programmoberflächen, den Code dazu erzeugt zum Beispiel Visual Basic.

Damit Sie unter Windows XP mit Expression Blend arbeiten können, sollten das .Net Framework 3.0 installiert sein. Dies ist eine um die WPF erweiterte .Net-2.0-Version. Das Framework steht wie eine 60-Tage-Testversion von Expression Blend kostenlos zum Download bereit: www.microsoft.com/germany/expression/.

Ein Beispiel zeigt, wie Expression Blend funktioniert und mit dem Compiler zusammenarbeitet. Dabei soll eine einfache Programmoberfläche mit Buttons und einem Farbverlauf entstehen. Legen Sie in Expression Blend ein neues Projekt als Standardanwendung (EXE) an. Geben Sie dem neuen Projekt einen anderen Namen und wählen Sie den Speicherort. Nun legen Sie auch fest, in welcher Programmiersprache Sie den Code für Ihre Anwendung schreiben wollen.

Mit Farben spielen

Expression Blend

© Archiv

In den Eigenschaften einer Form richten Sie einen Farbverlauf für den Hintergrund ein.

Im neuen Projekt fügen Sie eine Form ein. Klicken Sie in die Form und öffnen Sie das Eigenschaftenfenster, wenn es nicht angezeigt wird, über das Fenster-Menü. Achten Sie darauf, dass das Entwurfsfenster aktiviert ist. Klicken Sie jetzt auf den Button für den Farbverlaufspinsel. Ihre Form wird mit einem Farbverlauf von Schwarz nach Weiß gefüllt. In einer Fläche unter dem Farbfenster wird der Farbverlauf angezeigt.

Stellen Sie den Verlauf zum Beispiel von intensivem Blau auf Rot ein. Der Farbverlauf ist immer noch horizontal. Wollen Sie die Verlaufsrichtung ändern, klicken Sie in der Toolleiste den Button für den Farbverlauf an. In Ihrer Form erscheint eine horizontale, pfeilförmige Linie. Mit deren Enden ändern Sie den Drehwinkel und damit die Verlaufsrichtung der Farben. Die Länge der Linie ändern Sie mit dem Mauszeiger auf den Pfeilfedern und der Pfeilspitze. Die Position der Linie ändern Sie mit dem Mauszeiger auf der Linie.

Fügen Sie der Oberfläche einen Button hinzu. Beachten Sie, dass das Button-Symbol auf der Toolleiste unten rechts einen kleinen Winkelpfeil hat. Nach einem Klick darauf - oder mehrfachen Versuchen - zeigen derartige Buttons weitere Auswahlobjekte an. Wählen Sie den einfachen Button. Der Mauszeiger wird auf der Form zum Kreuz.

Jetzt können Sie einen Button auf der Fläche aufziehen. Seine Gestaltung entspricht der der Form-Oberfläche. Geben Sie dem Button im Eigenschaftenfenster unter der Rubrik Allgemeine Eigenschaften mit der Content-Eigenschaft die Beschriftung Beenden - nach Caption (bis VB6) und Text (VB7 und VB8) nun die dritte Bezeichnung.

Ereignisse verarbeiten

Bei der Einbindung von Ereignishandlern setzt die Arbeit des Programmierers an. Unter Blend erhalten die Steuerelemente üblicherweise keinen Namen. Um aber Ereignisse registrieren zu können, muss jedes relevante Element einen Namen erhalten. Diesen Namen geben Sie dem Button im XAML-Code. Fügen Sie ihn im Kopf der Button-Deklaration ein. Gehen Sie wieder in den Entwurfsmodus.

<Button Name= "Beenden"
HorizontalAlignment= ... >
...</Button>

Unter Blend klicken Sie das Entwurfsregister an. Danach öffnen Sie das Panel Eigenschaften und Interaktion über das Menü Fenster. Im Interaktion-Panel klicken Sie jetzt den Namen des Buttons an. Das Eigenschaften-Panel zeigt nun den Namen des Buttons an. Rechts unterhalb des Namens Beenden finden Sie zwei Buttons. Der rechte öffnet die Liste der verfügbaren Ereignisse. Hinter den Ereignisnamen befindet sich jeweils ein zunächst leeres Feld.

Klicken Sie doppelt auf das Feld hinter Click. Visual Studio wird nun automatisch gestartet. Hier finden Sie den zusätzlich eingefügten Ereignishandler für Click. Fügen Sie den gewünschten Code ein. Speichern Sie danach die Änderung mit dem Speichern-Button von Visual Studio.

Private Sub Beenden_Click(...)
Me.Close()
End Sub

Damit haben Sie ein erstes funktionsfähiges Blend-Projekt angelegt.

XAML: Eine neue Sprache

Expression Blend

© Archiv

Direkt aus Blend öffnen Sie den Compiler für den Interaktions-Programmcode.

Expression Blend erzeugt alle Codeteile in XAML. Diese Extensible Markup Application Language hat Microsoft auf der Basis von XML entwickelt. Sie wird etwa bei Office-2007-Programmen eingesetzt. XAML ist Teil von .Net Framework 3.0, das wiederum Windows Presentation Foundation (WPF) enthält. WPF wird auch in Blend zum Erstellen von Benutzeroberflächen eingesetzt. Der Code für die Oberfläche wird mit gleichem Namen aber der zusätzlichen Endung vb bzw. cs getrennt vom eigentlichen Dokument gespeichert.

Da ein großer Teil der Gestaltungs-Funktionen in .Net Framework ausgelagert ist, wird der eigentliche Code extrem schmal. In Expression Design entwickelte Grafikobjekte lassen sich im XAML-Format exportieren und als Ressource in Blend einfügen. XAML macht alle in den Projekten selbst verbleibenden Code-Teile im Klartext lesbar. Dieser Code kann, wie HTML, in jedem beliebigen Texteditor bearbeitet werden.

In Expression Blend öffnet ein Doppelklick auf eine der Dateien mit der Endung vb diese Datei in Visual Basic. Mit VB 2005 Express können Sie den Programmcode bearbeiten, sehen aber nicht die Benutzeroberfläche. Unter Visual Studio 2005 ist gleichfalls der Code zu bearbeiten. Hier wird aber auch die Benutzeroberfläche sichtbar.

Sie kann sogar verändert werden, zumindest in Bezug auf die Anordnung der Objekte auf der Form und einige Eigenschaften. Im Code-Fenster erzeugen Sie den Interaktions-Programmcode - der "Code behind" - hinter dem XAML-Oberflächen-Code. Zur Änderung der Oberfläche ist wieder Expression Blend erforderlich.

Mehr zum Thema

HTML 5
Webgestaltung

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video. Wir zeigen…
Wir verraten, wie Sie Fritzboxen und andere Router vor Hackern schützen.
Fritzbox, Asus, Belkin und Co.

Fritzbox, Asus, Belkin oder DLink - die Liste der geknackten Router ist lang. Hacker stahlen Passwörter oder NAS-Daten. So machen Sie Ihren Router…
Wir führen Sie zur eigenen Windows-App - unserem PC-Magazin-RSS-Feed.
C# und XAML

Wir zeigen, wie Sie Windows 8.1 Apps selbst programmieren können. Lernen Sie das App erstellen an Hand unseres Beispiels: dem RSS-Feed von PC…
Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1
Programme richtig installieren

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.
Windows 8: Starbildschirm
Microsoft Project Siena

Erstellen Sie sich selbst eine App für Windows 8, die auf alle Funktionen Ihres Tablets zugreifen kann, inklusive Kamera, Mikrofon und Lautsprecher.…