.NET Framework 3.0: Alles bunt und neu mit der Windows Presentation Foundation

Veröffentlicht: 29. Aug 2006

Von Bernd Marquardt

Microsoft Windows gibt es nun schon ein paar Jahre. Genauso lange gibt es auch die Bibliotheken für die Darstellung und Programmierung von Grafik und Benutzerschnittstellen unter Windows: GDI32.DLL und USER32.DLL. Diese Bibliotheken sind in den vergangenen Jahren natürlich konsequent weiter entwickelt worden und dementsprechend sehr leistungsfähig. Auf der anderen Seite stehen in Bälde aber sehr tief greifende Änderungen und Erweiterungen im Grafik- und UI-Bereich an: die Windows Presentation Foundation (WPF, auch bekannt unter dem Codenamen Avalon). Da WPF sehr viele neue Möglichkeiten enthält, hat Microsoft nicht die existierenden Bibliotheken (GDI32, USER32) erweitert, sondern einen neuen Satz von DLLs implementiert, die unter Windows XP (SP 2), Windows Server 2003 (SP 1) und Windows Vista einsetzbar sind. WPF ist eine der vier Säulen des .NET Frameworks 3.0 (ehemals WinFX), welches Endes des Jahres 2006 in der finalen Version zur Verfügung stehen soll.

Auf dieser Seite

 XAML und Code
 Layout
 Steuerelemente
 Grafik
 Animationen
 Interoperabilität
 Buch-Tipps
 Weitere Informationen

XAML und Code

Die allgemeine Übersicht zu WPF von Tim Sneath ist ein guter Einstieg in das Thema WPF und XAML und bietet einen Überblick über die wichtigsten Funktionalitäten.

Mit Windows Forms wird das Layout einer Applikation (oder eines Fensters) vollständig durch Code (C#, VB.NET,…) definiert. Heutzutage sollen viele Windows-Anwendungen aber ein „ansprechendes“, modernes Design haben. Hierzu gehören je nach Einsatzgebiet und Anforderungen auch Animationen, 3D-Grafiken und andere Effekte. Und genau hier wird es etwas „problematisch“, da ein guter Softwareentwickler meistens kein guter Designer ist. Das gilt natürlich auch umgekehrt. Ein Grafikdesigner möchte sich im Allgemeinen nicht zu viel mit dem Code einer Programmiersprache auseinander setzen, um ein ansprechendes Design für eine Applikation zu erstellen. Ein Softwareentwickler will sich nicht mit komplizierten Grafikdetails beschäftigen, wenn er das Verhalten der Anwendung codiert. Was man also benötigt, ist eine allgemeine „Sprache“, um Objekthierarchien zu definieren und dadurch „beide Welten“ (Entwickler- und Designer-Welt) verbindet.

Diese „Sprache“ – im Sinne einer Beschreibungssprache - heißt XAML (Extended Application Markup Language). Mit XAML kann man ganz allgemein beliebige Objekthierarchien definieren, auch jenseits von WPF. So wird XAML auch in der Windows Workflow Foundation (WF) für die Beschreibung von Workflows eingesetzt. Das folgende XAML-Beispiel (Abbildung 1) zeigt im Rahmen von WPF die Definition einer Schaltfläche und einer TextBox in einem Standardfenster:

<Window x:Class="WindowsApplication.MyWindow"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="WindowsApplication" Height="300" Width="300"
  >
  <StackPanel>
    <Button Width="150" Height="30">Klick mal drauf!</Button>
    <TextBox Width="150" Height="40" FontSize="20">Eingabe</TextBox>
  </StackPanel>
</Window>

Abbildung 1: Ein einfaches Fenster mit Steuerelementen

Nach der Definition der „grafischen Seite“ kann man nun diese Objekthierarchie mit verwaltetem Code verbinden, den ein Softwareentwickler erstellt. Dies wird über Ereignisse (Events) ermöglicht. Außerdem kann der Softwareentwickler natürlich auf die mit XAML definierte Objekthierarchie über die Namen der Objekte zugreifen:

<Window x:Class="WindowsApplication.MyWindow"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="WindowsApplication" Height="300" Width="300"
  >
  <StackPanel>
    <Button Name="btn" Click="btnClicked" Width="150" 
            Height="30">Klick mal drauf!</Button>
    <TextBox Name="tb" Width="150" Height="40" 
             FontSize="20">Eingabe</TextBox>
  </StackPanel>
</Window>

public partial class MyWindow : Window
{
  private void btnClicked(object sender, RoutedEventArgs e) 
  {
    MessageBox.Show("Im Event-Handler!");
    tb.Text = "Hallo, MSDN!";
    btn.Background = Brushes.Red;
  }
}

Auf die oben gezeigte Weise werden Designer und Entwickler “miteinander verbunden”. Es muß noch erwähnt werden, dass man den XAML-Code vom Designer im Allgemeinen nicht über die Tastatur eintippt, sondern dass er aus leistungsfähigen Grafikapplikationen exportiert und dann in Visual Studio weiter verwendet wird. Hier sind einige der bereits verfügbaren Grafikapplikationen:

• Microsoft Expression Interactive Designer

• Microsoft Expression Graphic Designer

• Aurora XAML Designer

• ZAM 3D

• XAML-Export-Plugin für Adobe Illustrator

Mit WPF und vor allem mit XAML ist es nun also möglich, mit einem Topdesigner und einem Topentwickler eine Topbenutzeroberfläche zu erstellen. Das ist top.

Layout

Bisher wurde das Layout eines Fensters über fest vorgegebene Pixelpositionen definiert. Eine solche feste Koordinatenvergabe erschwert allerdings das Design von Fenstern, die sich an verschiedene Größen automatisch anpassen. In WPF gibt es viele unterschiedliche Möglichkeiten, um Steuerelemente variabel zu positionieren:

• StackPanel

• DockPanel

• WrapPanel

• TabPanel

• Canvas

• ViewBox

• Grid

Mit dem Einsatz dieser Layout-Steuerelemente ist es sehr einfach, Dialogfelder mit variabler Größe zu erstellen.

Eine besondere Erwähnung soll hier auch das Grid-Steuerelement finden, welches sehr flexible Positionierungsmechanismen enthält. Man kann ein Grid so anlegen, dass sich die Spalten oder Zeilen des Grids automatisch im vorgegebenen Verhältnis an die Gesamtbreite bzw. -höhe des Elternelements anpassen.

Steuerelemente

Ohne Steuerelemente (Controls) keine Benutzerschnittstelle! WPF bietet natürlich ein Reihe von wichtigen und bekannten Steuerelementen an: Button, TextBox, CheckBox, ComboBox, Label, Image, ListBox, RadioButton, RichTextBox, DockPanel, StackPanel, Menu, StatusBar, ToolBar – um nur einige hier zu nennen. Diese Steuerelemente werden, wie bisher, über Eigenschaften und Methoden manipuliert.

Trotz des reichhaltigen Angebots an Steuerelementen ist es auch mit WPF möglich, eigene Steuerelemente, entweder als User Controls oder Custom Controls, zu entwickeln.

Allerdings wird ein Softwareentwickler für WPF nur selten ganz neue Steuerelemente entwickeln müssen. Häufig wird er zunächst einmal versuchen, durch eine Änderung der Styles und/oder Templates des Steuerelementes das Aussehen anzupassen. Hierbei bleibt die Logik des Steuerelementes unverändert. Ein Button bleibt eben ein Button, auch wenn er dann z.B. eine elliptische Form hat.

Grafik

Grafische Elemente sind in einer modernen Benutzerschnittstelle von großer Bedeutung. Alle Grafikelemente in WPF sind vektororientiert, alle! Beim Vergrößern solcher vektororientierten Elemente entstehen keine „Klotzgrafiken“ mehr. Das gilt nicht nur für einfache Grafikelemente (Linie, Rechteck, usw.), sondern auch für alle UI-Elemente (Button, TextBox, usw.) und Textausgaben. In der folgenden Abbildung kann man eine „gezoomte“ Benutzerschnittstelle sehen. Hier wurden normal große Steuerelemente mit einer Layout-Transformation vergrößert. Die hervorragende Qualität der Darstellung bei WPF aufgrund der Vektororientierung ist hier gut zu sehen.

Abbildung 2: Stark vergrößerte Steuerelemente mit einer Layout-Transformation

Somit ist es einfach möglich, beliebig in der Größe skalierbare Benutzerschnittstellen zu erstellen. Dies kann über die Eigenschaft LayoutTransform durchgeführt werden. Setzt man z.B. in einem Grid die Eigenschaft LayoutTransform auf die Vergrößerung „2-fach“, so werden alle im Grid enthaltenen Kindelemente entsprechend vergrößert. Transformationen spielen in WPF eine wichtige Rolle und werden entsprechend reichhaltig unterstützt (TranslateTransform, ScaleTransform, RotateTransform und SkewTransform). Alle verfügbaren Steuerelemente (z.B. eine TextBox) können beliebig transformiert werden. In diesen Fällen funktioniert das Hit-Testing für das Steuerelement natürlich auch noch korrekt.

Abbildung 3: Eine gedrehte TextBox

Zusätzlich zu den einfachen 2D-Grafikelementen (Line, Rectangle, Ellipse, usw.) gibt es komplexe 2D-Elemente (Polygon, Polyline, Path, BezierSegment, usw.). Für diese Elemente lassen sich Stifte (Pens) und/oder Pinsel (Brushes) definieren, die beim Zeichnen oder Füllen benutzt werden. Neben den bekannten Standard-Brushes gibt es natürlich auch hier einige Erweiterungen. Es gibt z.B. das neue VisualBrush-Element, mit dem beliebige Inhalte als Pinsel benutzt werden können – ungeahnte Möglichkeiten eröffnen sich.

Ein sehr wichtiges Thema in WPF ist auch die 3D-Grafik. Das wichtigste Element in der 3D-Welt ist der Viewport3D. In diesem Element kann beliebiger 3D-Inhalt dargestellt werden. 3D- und 2D-Grafik können in WPF beliebig gemischt werden. In der Abbildung 4 werden „normale“ 2D-Steuerelemente (Grid, TextBlock, usw.) mit einer 3D-Darstellung im Viewport3D-Control kombiniert.

Abbildung 4: Darstellung von 3D-Grafik in einer 2D-Benutzerschnittstelle

Zu einer 3D-Darstellung gehören immer mehrere Komponenten: Modell, Kamera und Licht. Im Modell werden die Geometrie der darzustellenden Objekte und deren Oberflächentyp definiert. WPF stellt dann unterschiedliche Lichtquellen (Spotlight, Hintergrundlicht, usw.) zur Verfügung, welche das Szenario beleuchten. Schließlich wird alles von einer Kamera (OrthographicCamera, PrespectiveCamera) beobachtet, welche dann die Abbildung im Viewport3D projiziert.

Abbildung 5: 3D-Darstellung mit WPF

Animationen

Animationen zu erstellen, bedeutete unter Win32 normalerweise: „Achtung, jetzt flimmert und flickert es in diesem Fenster!“ Die Programmierung von sauberen, flimmerfreien Animationen wird mit WPF wesentlich vereinfacht. Im Grunde genommen muß man nur angeben, was man wie bewegen will:

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation Storyboard.TargetName="btn"
                     Storyboard.TargetProperty="(Button.Width)"
                     From="200" To="600" 
                     Duration="0:0:15" />
  </Storyboard>
</BeginStoryboard>

Im Beispiel oben wird eine Schaltfläche in der Breite geändert. Hier wurden ein Startwert und ein Endwert für die Breite angegeben. Diese Änderung soll im Zeitraum von 15 Sekunden durchgeführt werden. WPF kümmert sich nun um alles Weitere. Je nach Rechnerperformance werden die Zwischenpositionen über den gewünschten Zeitraum berechnet und flimmerfrei dargestellt. Fast schon zu einfach.

In WPF gibt es verschiedene Animationstypen, mit denen man die unterschiedlichen Eigenschaften der Steuerelemente animieren kann. Farben und Gradienten werden mit einer ColorAnimation verarbeitet, für Durchsichtigkeit, Winkel und Längen wird die DoubleAnimation oder IntXXAnimation (XX=16, 32, 64) herangezogen. Man kann Punkte (Point, Point3D) animieren, ebenso wie Texte, Matrizen (für Transformationen), und Rechtecke.

Interoperabilität

WPF-Elemente können auch in Windows-Forms- und in Win32-Applikationen eingesetzt werden. Hierbei sind bestimmte Einschränkungen zu beachten. Bei der Erweiterung von Win32-Anwendungen mit WPF-Elementen ist ein gewisser Aufwand zu betreiben. Die Interoperabilität ist allerdings in beiden Richtungen gegeben. In einer WPF-Applikation kann man nämlich auch bei Bedarf Windows Forms Controls benutzen.

Windows Presentation Foundation ist eine mächtige Klassenbibliothek mit vielen Features. Aus diesem Grund wurden hier nur die Kernbereiche von WPF dargestellt und angerissen.

Buch-Tipps

Bücher zum Thema Windows Presentation Foundation sind im Moment noch rar gesät. Die meisten Bücher werden erst in den kommenden Monaten erscheinen. Ein gutes Buch zum Thema WPF aus dem Verlag O’Reilly ist im Moment lieferbar:

Programming Windows Presentation Foundation von Chris Sells und Ian Griffiths, ISBN: 0-596-10113-9

In diesem Buch sind allerdings einige Begrifflichkeiten und vor allem die Code-Beispiele veraltet. Auf den Internetseiten des Verlags kann man sich die für die Februar-CTP korrigierten Beispiele herunterladen. Diese laufen größtenteils ohne Änderungen auch mit der Beta 2 von Vista bzw. mit der Beta 2 des .NET Framework 3.0.

Weitere Informationen

In Webcast-Archiv gibt es bereits eine Serie von Dirk Primbs zum Thema WPF.

Außerdem beginnt Ende August eine neue Webcast-Serie mit Bernd Marquardt zu WPF.

Aktuelle Beispiele und Artikel findet man auf der Web-Seite „Microsoft .NET Framework“.

Viele Informationen findet man auch auf den Web-Seiten von Tim Sneath, ein Technical Evangelist für Windows Vista in Redmond:

https://blogs.msdn.com/tims/

Weitere interessante Blogs von WPF-Spezialisten und -Enthusiasten:

Blog von Charles Petzold

TheWPFBlog.com