|
Einführung in Windows Presentation Foundation (WPF)
|
 |
|
Autor/Einsender: |
|
Michael Werner |
|
|
|
Dieses WPF-Tutorial führt Sie in die Programmierung von WPF-Anwendungen (.NET Framework 3.0) ein.
Windows Presentation Foundation (WPF) bietet neuartige grafische Gestaltungsmöglichkeiten
von Anwendungsoberflächen. Anspruchsvolles Programmdesign bis hin zu raffinierten Animationen und
3D-Darstellungen werden mit der neuen WPF-Technologie realisierbar.
|
|
|
Mit einer zweigleisigen Technik bei der Anwendungsentwicklung wird eine Trennung von Oberflächengestaltung
und der eigentlichen Programmierung erreicht. Mit Hilfe der deklarativen Beschreibungssprache XAML werden
grafische Gestaltungen definiert, die dann über Visual Basic .NET bzw. C# angesprochen und mit Programmlogik
versehen werden. Grafiktools wie z.B. "Microsoft Expression Blend" unterstützen Sie beim Generieren
des XAML-Codes. In Visual Studio kann der Entwickler die über XAML definierten WPF-Controls aufgreifen
und mit Programmlogik versehen.
|
|
|
Der Begriff “Presentation” in Windows Presentation Foundation
deutet es schon an: Bei WPF geht es um die
grafische Darstellung von Programmoberflächen. Das in die
Jahre gekommene grafische Subsystem GDI und GDI+ von Windows
Forms-Anwendungen soll langfristig durch das neue nicht mehr
pixelorientierte, sondern
vektorbasierte grafische Subsystem abgelöst werden, das
mit WPF/.NET 3.0 eingeführt wird. Auf das Framework Version
2.0 wird eine weitere Schicht, das .NET Framework 3.0 aufgesetzt, das
unter anderem diese neue WPF-Technologie einführt.
|
WPF-Anwendungen besitzen im Gegensatz zu Windows Forms-Applikationen als Basisfenster nicht mehr
die Klasse „Form“, sondern „Window“. Und eine Web-Entsprechung mit den XAML-Browserapplikationen (WPF) basiert auf
der Klasse „Page“. Zahlreiche neue
WPF-eigene Steuerelemente, mit neuartigen Ereignissen und Eigenschaften bilden die Grundlage für WPF-spezifische Windows- und Browserapplikationen, die mit deutlich verbesserten grafischen Möglichkeiten ausgestattet werden können. 2D-, 3D-Darstellungen, Animationen, Echtzeitgrafik u.v.m. werden in hoher Qualität realisierbar: Kein Ruckeln mehr bei Bewegungsabläufen, sauber gezeichnete Kurven, glatte Übergänge, keine gezackten Klotzgrafiken mehr, exakte Positionierung im Anwendungsfenster, überzeugende 3D-Wiedergaben am 2D-Bildschirm - dank vektorbasierter Grafikdarstellung.
|
Moderne Grafikkarten können zeigen, was sie drauf haben. Einiges davon war auch bisher schon mit
DirectX möglich. Nur die Handhabung solcher grafischen Gestaltungen wird mit WPF für den Programmierer nun wesentlich vereinfacht. Auch in WPF wird im Hintergrund
DirectX verwendet, nur der Entwickler bzw. Designer merkt davon nichts.
|
Das von Microsoft angestrebte Ziel ist es, die Oberflächengestaltung von Anwendungen weitgehend von der Programmlogik eine Applikation
zu trennen. Der Designer entwirft in Absprache mit dem Programmierer eine Oberfläche mit WPF-Steuerelementen mittels eines XAML-Tools wie z.B. Microsoft Blend, während der Entwickler die Funktionen des Programms mit VB.NET oder C# in Visual Studio erstellt. Beides wird dann zum fertigen
Programm zusammengeführt.
|
|
Ganz neu und entscheidend wichtig bei der WPF-Anwendungsentwicklung ist die deklarative und XML-basierte
Markupsprache XAML, mit der die neuartigen WPF-Controls und grafische Objekte, aber auch Bewegungsabläufe bis hin zu 3D-Animationen in relativ einfacher Syntax direkt erzeugt werden können. Auf diese mittels der Beschreibungssprache XAML deklarierten Objekte kann dann mit den
.NET-Sprachen Visual Basic.NET oder C# zugegriffen und die Programmlogik entwickelt werden.
|
Programmiert wird im Prinzip also
zweigleisig: mit XAML wird das Design, die Oberfläche angelegt, und mit VB.NET oder C# wie bisher programmiert. Die Oberflächengestaltung einer WPF-Windowsanwendung kann man anfangs zunächst einmal „zu Fuß“ erlernen, bei komplexen grafischen Gestaltungen bis hin zu 3D-Darstellungen und Animationen werden dann aber doch sinnvoller Weise Grafiktools zum Einsatz kommen, die im Hintergrund XAML-Code generieren.
|
Microsoft bietet dafür speziell die neu entwickelte Expression-Produktfamilie an, wobei insbesondere das Tools
Expression Blend (Codename: Sparkle) hervorzuheben ist. Mit Blend können ähnlich wie bei Flash die Steuerelemente und anderen grafischen Objekte angelegt und gestaltet werden. Wer sich schon einmal in Flash
(Abobe Flash-Player) versucht hat, wird mit Blend sofort an dessen Entwicklungsoberfläche erinnert. Videos, Vektorgrafiken, hochauflösende Schriften, Animationen, Bitmaps und 3D-Elemente werden mit WPF-Elementen mit einer modernen interaktiven Benutzeroberfläche kombiniert. Über eine Timeline sind zeitliche Bewegungsabläufe für einzelne WPF-Objekte definierbar. WPF-Elemente können gestaltet und positioniert werden, Animationen und Audio/Video werden in Zeitabläufen miteinander verknüpft.
|
Und tatsächlich zielt Microsoft mit WPF auf das Web. Vielleicht kann zukünftig WPF als Browseranwendung die Flash-basierten Website-Animationen ersetzen?
Silverlight (WPF/E) weist den Weg dahin. Das „E“ in WPF/E steht für „Everywhere“, WPF überall, also auch im Web. Silverlight ist eine abgespeckte Variante von WPF, die Animationen und Audio/Video-Wiedergabe in Browsern möglich macht und eine
multimediale Webpräsentation realisiert.
|
Zurück zu Windows Presentation Foundation: Die zahlreichen WPF-Controls und grafischen WPF-Elemente lassen sich auch in Blend einfach über eine ToolBox einbinden. Über eine Vielzahl auch ganz neuartiger Ereignisse kann der Entwickler die Programmsteuerung bestimmen. Durch eine direkte
Verzahnung des Interactive Designers Blend mit Visual Studio 2005 können die zuvor gestalteten Objekte mit Funktionslogik in VB.NET bzw. C# ausgestattet werden. Und ein WPF-Windows-Application-Projekt kann zeitgleich und parallel im geöffneten Visual Studio und Expression Blend bearbeitet werden. Paradiesische Zeiten für Entwickler? Sie hätten es verdient. Nur: Wer realisiert in einem Ein-Mann-Unternehmen das Design? Der Entwickler natürlich! Was soll ich dazu sagen? Also ran an Blend!
|

Oberflächengestaltung in Microsoft Expression Blend
|

Die Programmlogik in Visual Studio
|
|
Die vier neuen Komponenten in .NET 3.0 |
|
WPF ist eine neue Klassenbibliothek des .NET-Frameworks .NET 3.0, das seit Anfang dieses Jahres 2007 mit dem Betriebssystem Vista ausgeliefert wird, aber auch unter Windows XP und Windows Server 2003 eingesetzt werden kann. WPF ist dabei eine der
vier neuen Komponenten von .NET 3.0:
- Windows Presentation Foundation (WPF)
Windows Presentation Foundation (WPF) ist die in diesem Tutorial vorgestellte Verbesserung der grafischen Oberflächenentwicklung. WPF ist zuständig für die Präsentation, die vektorbasierten Anwendungsoberfächen, Codename:
Avalon.
- Windows Communication Foundation (WCF)
Windows Communication Foundation (WCF) dient der Verbesserung der Kommunikation zwischen Anwendungen, Codename:
Indigo. Die bisher vielfältigen Möglichkeiten der Kommunikation sollen mit und ohne SOAP zu einem Gesamtkonzept vereinheitlicht werden.
- Windows Workflow Foundation (WF)
Windows Workflow Foundation (WF) widmet sich der vereinheitlichten Abfolge von Aktivitäten, dem Arbeitsfluss in Anwendungen. Anwendungseinheiten sollen weniger von der Programmierlogik als viel mehr von den tatsächlichen Betriebsabläufen her definiert werden. Modulare Einheiten werden so definiert, dass sie weitgehend die Realität abbilden, um eine verbesserte Lesbarkeit, Erweiterung und Wartung von Anwendungen zu ermöglichen.
- Window Cardspace (WCS)
Window Cardspace (WCS), Codename InfoCard, zielt ab auf eine sichere Kontrolle der Benutzeridentität. Phishing soll dadurch bekämpft werden, dass User ihre Passwörter nicht mehr selber verwalten, sondern dass Identitätsprovider eine Art elektronische Checkkarte zur Identifikation eines Benutzers herausgeben, sozusagen ein elektronischer Passport für Personen.
|
|
Installationsvoraussetzungen |
|
Um WPF–Anwendungen schreiben zu können benötigen Sie:
|
- Das .NET Framework 3.0
Unter den Betriebssystemen Windows XP und Windows Server 2003 müssen zunächst die neusten Services Packs
und anschließend das .NET Framework 3.0 installiert werden. Das Betriebssystem Windows Vista
enthält bereits .NET 3.0.
- Visual Studio 2005 (Professional oder Express)
- Microsoft Windows Software Development Kit (SDK)
- Visual Studio 2005 Extensions for WPF and WCF
.Net 3.0 Runtime (nur für Windows XP und Windows Server 2003):
|
Microsoft .NET Framework 3.0 Redistributable Package
|
Das Windows SDK für .NET 3.0:
|
Microsoft® Windows® Software Development Kit for Windows Vista™ and
.NET Framework 3.0 Runtime Components
Microsoft® Windows® Software Development Kit Update for Windows Vista™
|
Visual studio extensions for WF (englisch)
|
Visual Studio 2005 extensions for .NET Framework 3.0 (Windows Workflow
Foundation)
|
Visual studio extensions for WCF, WPF (englisch)
|
Visual Studio 2005 extensions for .NET Framework 3.0
(WCF & WPF), November 2006 CTP
|
Das neue grafische Tool Microsoft Expression Blend ist zu kaufen oder in einer 180-Testversion erhältlich unter:
|
Microsoft® Expression® Studio
|
XAML-Tools von Drittanbietern (zur Zeit kostenlos):
|
ZAM 3D
Aurora
|
Die Installationsabfolge
|
Ist das Visual Studio 2005 bzw. die VB-Express-Variante auf die aktuellsten Service Packs gebracht worden,
muss das Windows SDK (1,12 GByte) heruntergeladen und installiert werden.
Im Betriebssystem Vista ist .NET 3.0 schon standardmäßig vorhanden. Unter
Windows XP bzw. Windows Server 2003 sind die ".NET Framework 3.0 Runtime Components" noch zu installieren.
Anschließend müssen die "Visual Studio Extentions for WCF and WPF" heruntergeladen und installiert werden.
|
Die "Visual Studio Extensions for WF" sind nur für Workflow-Anwendungen notwendig.
Leider sind die Extensions nur in englischer Sprache zu haben. Daran wird sich auch nichts ändern bis nicht mit
Visual Studio 8 und der nächsten Version des Frameworks .NET 3.5 die Erweiterungen als Standard
in Visual Studio integriert sind. Als voraussichtlicher Erscheinungstermin von Visual Studio 8 und .NET 3.5 ist von Microsoft der 27. Februar 2008 angekündigt worden.
|
|
|
XAML (Extensible Application Markup Language), ein XML-Dialekt, ist die neue Sprache für die Oberflächengestaltung in WPF-Anwendungen. XAML ist eigenständig und unabhängig von WPF, und kann deshalb auch von anderen Tools generiert und verwendet werden. XAML ist eine deklarative Beschreibungssprache, mit der unter anderem auch WPF-Objekte instanziert und formatiert werden können. XAML ist, wie alle XML-Dateien, streng hierarchisch aufgebaut. In WPF-Anwendungen beschreibt XAML .NET-Objektbäume.
|
Wie leistungsfähig XAML ist und, um einen ersten Eindruck von der typischen
XAML-Syntax zu vermitteln, soll hier ein 3D-Animations-Beispiel gezeigt werden. Für den Einstieg ist zunächst nur der streng hierarchische Aufbau von XAML von Bedeutung. In einer Basisinstanz „Window1“ der Klasse Window werden mit xmlns=“…“ die grundlegenden Verweise auf die WPF-Libraries gesetzt. In einem WPF-Container, dem Panel-Element DockPanel, werden nun die 3D-Elemente definiert.
|
Grundlage für 3D ist der ViewPort3D, dem eine perspektivische Kamera mit bestimmten Eigenschaften zugeordnet wird. Eine 3D-Darstellung benötigt weiterhin ein Licht mit Farbe und Richtung, ein Material mit einer Oberflächenbeschaffenheit. Ein GeometrieModell definiert den Körper, der in diesem Fall eine Viereckfläche darstellt. Über RotateTransform3D wird eine Raumachse definiert, um die die Rotation mit einem DoubleAnimation-Element ausgeführt wird. Ausgelöst wird die Animation im RoutedEvent Viewport3D.Loaded des Triggers. Der Animationsverlauf wird mit Duration, From, To und RepeatBehavior festgeschrieben.
|
|
|
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ani3DPlane" Height="300" Width="300"
>
<DockPanel>
<Viewport3D Name="myViewport">
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="20" LookDirection="5,-2,-3"
UpDirection="0,1,0" NearPlaneDistance="0"
Position="-5,2,3" FieldOfView="45" />
</Viewport3D.Camera>
<ModelVisual3D x:Name="topModelVisual3D">
<!--<ModelVisual3D.Children>-->
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="-3,-4,-5" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D Geometry="{StaticResource myPlane}">
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<SolidColorBrush Color="Blue" Opacity="0.7" />
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="myAngleRotation"
Axis="1,1,1" Angle="1" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</ModelVisual3D>
<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="myAngleRotation"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:05"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Viewport3D.Triggers>
</Viewport3D>
</DockPanel>
</Window>
|
|
|
Ausgeführt ergibt dieser XAML-Code eine kontinuierliche Drehung eines Rechtecks um eine Raumachse. WPF unterstützt eine nahezu perfekte Grafik. Allerdings saubere Linienführung und glatte Bewegungsabläufe stehen in Abhängigkeit zur Leistungsfähigkeit Ihrer Grafikkarte. Gute Grafikkarten, die DirectX 10 unterstützen und dadurch voll Vista-fähig sind, erfüllen diese Voraussetzungen.
|
|
|
|
|
|
|
3D-Animation eines Rechtecks um eine Raumachse
|
XAML-Code testen mit XamlPad
|
Ein weiteres, ganz einfaches Beispiel für XAML instanziert eine Schaltfläche und positioniert den Button innerhalb eines übergeordneten
Canvas-Steuerelements:
|
|
|
<Canvas>
<Button Canvas.Left="200" Canvas.Top="100">
<TextBlock Text="Button anklicken" Foreground="Coral"/>
</Button>
</Canvas>
|
|
|
Mit der Installation des Microsoft Windows SDK finden Sie über das Startmenü ein für den Einstieg ganz hilfreiches Tool namens
XamlPad, mit dem sie die Sprach-Syntax von XAML und dessen visuelle Auswirkung direkt und einfach testen können. Obiges 3D-Beispiel können Sie ebenfalls ohne Visual Studio einfach in XamlPad hineinkopieren und testen. Geben Sie
den XAML-Code im Code-Abschnitt von XamlPad ein, wird der Button in einem zweiten darüber liegenden Fensterabschnitt in einer Page-Instanz direkt dargestellt. Hier das Beispiel mit der Schaltfläche:
|
XAML-Code in XamlPad testen
|
Aber eine wesentliche Einschränkung des Tools XamlPad ist hervorzuheben: In XamlPad können Sie nicht mit VB.NET oder mit C# programmieren. XamlPad eignet sich ausschließlich zur Darstellung von XAML. Um auf z.B. diese instanzierte Schaltfläche programmtechnisch z.B. über das Click-Event zugreifen zu können, benötigen Sie Visual Studio 2005.
|
Und noch ein Grundprinzip, was die Leistungsfähigkeit von XAML im Zusammenspiel mit VB.NET bzw. C# angeht: Alles, was Sie in
XAML deklarieren und darstellen können, können Sie selbstverständlich auch ausschließlich in den .NET-Sprachen alleine realisieren. Nur die Syntax von XAML ist kürzer und übersichtlicher und lässt sich über Tools generieren. Darüber hinaus haben die .NET-Sprachen mit den gewaltigen .NET-Klassenbibliotheken selbstverständlich viel mehr Möglichkeiten durch echte .NET-Programmierung. All dies kann XAML natürlich nicht. In der Regel wird die Anwendungsentwicklung mit WPF also
zweigleisig fahren; in XAML wird die Programmoberfläche deklariert und alle programmtechnischen Zugriffe über VB.NET oder C# umgesetzt.
|
|
WPF-Anwendungen in Visual Studio 2005 |
|
Mit der Installation der Orcas-Erweiterungen für WPF (Extensions for WPF and WCF) finden Sie in der Entwicklungsumgebung einen neuen Projekttyp mit eigenen Vorlagen:
.NET-Framework 3.0-Anwendungen und dort insbesondere die beiden wichtigsten Vorlagetypen
Windows-Application (WPF) und XAM-Browser Application (WPF).
|

Die Vorlagen des Projekttyps .NET Framework 3.0
|
Laden Sie eine neue WPF-Window-Application, so öffnet sich, ähnlich wie in XamlPad, in Visual Studio ein XAML-Codefenster und gleichzeitig darüber das Designfenster mit der Visualisierung der Instanzen in einem Window1.
|

Ein Button manuell im Xaml-Codefenster von Visual Studio
eingetippt
|
Im XAML-Codefenster von Visual Studio bekommen Sie nun – im Gegensatz zu XamlPad – eine
IntelliSense-Unterstützung bei der manuellen Eingabe der XML-Tags. Darüber hinaus schließt die Entwicklungsumgebung die eingetippten Tags automatisch durch den End-Tag ab. Neben diesen Eintipp-Erleichterungen werden auch Fehler bei der Eingabe wie gewohnt unterstrichen, benannt und Korrekturvorschläge angeboten. Übrigens ein Klick im oberen Designfenster aktualisiert die Visualisierung der Codeeingabe und Sie sehen direkt die Auswirkungen auf die Visualisierung.
|
Alternative können Sie den WPF-Button auch, so wie sie es von Windows Forms-Anwendungen her gewohnt sind, aus der ToolBox auf das Window-Fenster ziehen und mit der Maus positionieren. Nun wird die Position des Buttons im Grid-Containerelement mit dem Button-Attribut Margin für die Randabstände zum übergeordneten WPF-Element automatisch festgehalten.
|

Button per Drag & Drop aus der Toolbox geladen
|
Positionieren im Grid-Container
|
Eine Besonderheit des WPF-Grid-Elementes wollen wir nicht unerwähnt lassen. Bisher befindet sich der Button innerhalb der einzigen Zelle des Grid-Containers, der das gesamte Fenster der Window1-Instanz ausfüllt. Durch Klicks auf den vertikalen und horizontalen Fensterrand erstellen Sie über Hilfslinien Zellenbereiche innerhalb des Grid. Sie erkennen das an den hellblau unterlegten Randbereichen des Fensters mit den Nummern. Im Hintergrund werden RowDefinitions und ColumnDefinitions generiert. Verschieben Sie nun den Button, z.B. in eine andere Zelle, so werden die Margin-Werte neu generiert. Bei Größenveränderung der Schaltfläche werden die Height- und Width-Eigenschaften der WPF-Grid-Unterelemente über die RowDefinitions und ColumnDefinitions automatisch angepasst. Zu erkennen ist auch deutlich die vektorbasierte Genauigkeit mit 15 Stellen hinter dem Komma, die generiert wird, wenn Sie die Schaftfläche verändern. Also exakte Positionierung dank WPF. Die Maßeinheit
DIP (Device Independent Pixel), statt Pixel, ist immer bezogen auf die Grafikauflösung, also geräteabhängig.
|

Exaktes Positionieren des Buttons im Grid-Container
|
Die WPF-Steuerelemente
|
Ihnen werden einige der im obigen Screenshot eines WPF-Projektes erkennbaren Steuerelemente in der Toolbox der Entwicklungsumgebung Visual Studio 2005 aus Windows Forms-Projekten sehr vertraut vorkommen. Aber ein WPF-Button ist etwas ganz anderes als ein Windows
Forms-Button. Das gleiche gilt für die anderen Controls. Alle in der Toolbox geladenen Controls sind spezifische Steuerelemente für WPF-Anwendungen und haben so gut wie nichts mit Controls aus Windows Forms-Programmierung zu tun. Zwar ist es mit etwas Programmieraufwand möglich, über sogenannte
Interoperabilitätsklassen auch Windows Forms-Controls in WPF-Anwendungen zu verwenden, und umgekehrt WPF-Steuerelemente in Windows
Forms-Anwendungen, aber prinzipiell stammen die beiden Projekttypen aus unterschiedlichen Welten.
|
WPF-Steuerelemente werden über XAML instanziert. WPF-Controls besitzen sogenannte
Abhängigkeitseigenschaften (Dependency Properties), die über XAML per
DataBinding an Eigenschaften oder Objekte anderer WPF-Elemente geknüpft werden können. Daraus ergeben sich ungeahnte Möglichkeiten der Datenbindung bis hin zur Verknüpfung komplexer Objekte (z.B.
XML-Daten). Eine weitere Besonderheit von WPF-Controls ergibt sich aus der Hierarchie von
XAML. Ein Button kann z.B. wieder einen Button beinhalten und dieser ein Image und evtl. eine Textbox- usw. Diese
hierarchische Verschachtelung von Steuerelementen gibt eine unglaubliche Freiheit bei der Gestaltung von Oberflächen. Dazu kommen ganz neue Elemente, wie zum Beispiel die 2D-Elemente Ellipse und
Rectangle, die eine ganze Anzahl von eigenen und teils neuartigen Ereignissen besitzen. Ein Kreis kann z.B. auf ein Click- oder MouseEnter- Event direkt reagieren.
|
Die hierarchische Verschachtelung der WPF-Elemente durch XAML machte auch eine spezielle Ereignisbehandlung notwendig. Stellen Sie sich nur vor: auf, besser ausgedrückt „in“ einem Button liegt noch ein Button, in dem ein Bild und ein Kreis liegt und so weiter. Um nun die volle Ereignissteuerung zu bekommen, - auf was wurde z.B. geklickt, was liegt darunter, usw. – wurde die neue Technik der
Routed Events eingeführt.
|
Routed Events besteht, neben den normalen direkten Events (z.B.
Button_Click), im Wesentlichen aus zwei
Event-Verarbeitungsreihenfolgen: dem Tunneling und dem Bubbling. Bubbling beginnt die Abarbeitung der Events beim auslösenden Ereignis und durchläuft dann alle Ereignisse der nächsthöheren Elemente bis hin zur Wurzel des
XAML-Hierarchiebaumes. Und Tunneling steht für das umgekehrte
Eventrouting.
|
Schließlich ist auch noch eine besondere Gruppe von neuen WPF-Steuerelementen besonders hervorzuheben, mit denen man es im XAML-Code eigentlich immer zu tun
hat, die Container-Steuerelemente oder Panel-Controls. Sie dienen im Wesentlichen der Anordnung und Platzierung darin enthaltener
Steuerelemente: Die häufigsten und wichtigsten sind Grid, StackPanel, DockPanel
und Canvas. In solche Panels werden andere WPF-Elemente wie z.B. Buttons, Images, TextBlocks, ListBoxen und andere Controls eingebettet und angeordnet. Die zahlreichen, neuen und mit neuen Properties und Events ausgestatteten hochinteressanten WPF-Steuerelemente können hier nicht ausreichend dargestellt werden. Aber eines sollte doch noch erwähnt werden: das Media-Element.
|
Video abspielen mit dem Media-Element
|
Das WPF-Media-Element ist die neue einheitliche Schnittstelle für Medien. Das Media-Element bringt u.a. eine überzeugende Vereinfachung von Audio- und Video-Wiedergaben der verschiedensten Formate. Wie einfach ein Video mit XAML angespielt werden kann soll folgendes kleine Beispiel zeigen, das in XamlPad ausgeführt wird. Der Source-Eigenschaft muss nur der Pfad zur Videodatei zugewiesen werden. Ähnliches gilt für Audioformate zum Abspielen von Sounds.
|

Abspielen eines Videos mit dem WPF-Media-Element
|
|
|
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement Source ="c:\test\fly.wmv" Height="300" Width ="350" />
</Page>
|
|
|
Darüber hinaus lässt sich aber sowohl das Layout eines Media-Elementes als auch die Ablaufsteuerung nach eigenen Vorstellungen gestalten, und das mit XAML-Markup alleine, oder mit VB.NET- bzw. C#-Code, oder in der Kombination beider. Aber zunächst wollen wir unser Button-Beispiel fortzusetzen. Schließlich haben wir eine wichtige
Sache noch nicht gezeigt, wie denn der Code-Zugriff mit VB.NET-Code bzw. C#-Code auf WPF-Elemente
funktioniert.
|
|
XAML im Zusammenspiel mit VB.NET oder C# |
|
Wie Sie nun zu einem mit XAML deklarativ definierten WPF-Element einen Code-Zugriff mit VB.NET oder C# herstellen, soll am begonnenen Projekt-Beispiel mit der Schaltfläche weiterentwickelt werden. Ausgangspunkt ist ein in XAML erstellter und in einem Container platzierter Button, dem wir über das Click-Ereignis einen Codezugriff ermöglichen. Nehmen wir z.B. die zuerst hier dargestellte XAML-Deklaration einer Schaltfläche in einem
Canvas-Containerelement.
|
Für den Code-Zugriff müssen wir im XAML-Code zwei Erweiterungen hinzufügen. Um im Code ein WPF-Element ansprechen zu können, muss der Instanz über das
Name-Attribut ein Identifizierer verpasst werden (Name = „Button1“). Außerdem müssen wir im XAML-Abschnitt einen
Eventhandler - in diesem Fall für das Click-Ereignis – definieren, um eine entsprechende Ereignisprozedur im VB- bzw. C#-Code ansprechen zu können (Click = „OnButtonClick“).
|
|
|
<Canvas>
<Button Name="Button1"
Click="OnButtonClick"
Canvas.Left="200"
Canvas.Top="200">
<TextBlock Text="Button anklicken" Foreground="Blue"/>
</Button>
</Canvas>
|
|
|
Nun wechseln Sie in die VB- bzw. C#-Datei, die als CodeBehind-Datei mit der Window1.xaml-Datei verknüpft ist. Sie finden diese, wenn Sie im Projektmappen-Explorer auf das Symbol „Alle Dateien anzeigen“ und dann auf das Plus-Zeichen vor der
XAML-Datei Window1.xaml klicken. Die Datei heißt in Visual Basic .NET Window1.xaml.vb (in C# entsprechend mit einer cs-Endung).
|

CodeBehind-Datei sichtbar machen: Alle Dateien anzeigen
|
Öffnen Sie die Codedatei und fügen Sie folgende Ereignisprozedur ein:
|
|
|
Private Sub OnButtonClick(ByVal sender As Object, ByVal e _
As System.Windows.RoutedEventArgs)
MessageBox.Show("Hallo XAML")
End Sub
|
|
|
Über die Eventprozedur haben wir nun einen programmtechnischen Zugriff auf ein in XAML deklariertes WPF-Element hergestellt.
|
Animation einer Schaltfläche
|
Damit Sie nun nicht glauben, im Endeffekt sei das alles wie in .NET 2.0 - wie gehabt und nichts Neues -, so will ich wenigstens exemplarisch an einem dieses Projekt erweiternden Beispiel andeuten, was mit WPF-Anwendungen möglich wird. Wir bleiben bei dem Button, ergänzen aber den XAML-Abschnitt und den VB-Code. Unser Ziel ist es, die Schaltfläche sowohl im XAML-Markup wie auch über VB.NET-Code auf verschiedene Weise zu animieren und zu verändern. Dazu verwenden wir Animations-Elemente aus dem
XAML-Markup: Mithilfe der Pfadsprache für PathGeometry, die übrigens in den
XAML-Tools, den neuen Microsoft Expression-Tools (oder den Drittanbietertools ZAM 3D und Aurora) im Hintergrund automatisch generiert wird, definieren wir zunächst eine geschlossene
Figur. Wir machen dies hier manuell und ohne die Hilfe von Expression Blend, da wir nur eine einfache geschlossene
Figur zeichnen und auf dieser den Button entlang bewegen wollen.
|
Zusätzlich soll hier demonstriert werden, dass auch mit VB- bzw. C#-Code auf animierte XAML-Objekten zugegriffen werden kann. In diesem Fall verändert bei den Ereignissen MouseEnter und Click der Button sein Aussehen. Transparenz, Farbe, Größe und FontSize werden manipuliert. Zunächst aber bewegt sich der Button auf dem definierten Zeichenpfad, einer händisch definierten Acht-Schleife. Interessant ist es, dass der Hittest der Ereignisse auch in der Bewegung des Buttons exakt funktioniert, die Schaltfläche also während der Animation immer richtig lokalisiert wird.
|

Ein Button bewegt sich auf einem definierten Pfad.
|
Der XAML-Code in der Datei Window1-xaml:
|
|
|
<Canvas>
<Canvas.Resources>
<PathGeometry x:Key="path"
Figures="M 100 200 C 100 0, 100 300, 300 200
S 200 0 280 160 S 100 300 100 200" />
</Canvas.Resources>
<Path Stroke="Gray" StrokeThickness="1"
Data="{StaticResource path}" />
<Button Name="Button1"
Click="OnButtonClick"
MouseEnter="OnButtonMouseEnter"
>
WOW! XAML!
<Button.RenderTransform>
<RotateTransform x:Name="xform" />
</Button.RenderTransform>
</Button>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingPath
Storyboard.TargetName="Button1"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:10"
PathGeometry="{StaticResource path}"
Source="X" />
<DoubleAnimationUsingPath
Storyboard.TargetName="Button1"
Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:10"
PathGeometry="{StaticResource path}"
Source="Y" />
<DoubleAnimationUsingPath
Storyboard.TargetName="xform"
Storyboard.TargetProperty="Angle"
Duration="0:0:10"
PathGeometry="{StaticResource path}"
Source="Angle" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
|
|
|
Der VB.NET-Code in der CodeBehind-Datei Window1.xaml.vb:
|
|
|
Private Sub OnButtonClick(ByVal sender As Object, ByVal e As _
System.Windows.RoutedEventArgs)
'Button: Width, Height und FontSize animieren
Dim dblAniW As DoubleAnimation = New DoubleAnimation(200, 40, _
New TimeSpan(0, 0, 10))
Dim dblAniH As DoubleAnimation = New DoubleAnimation(40, 20, _
New TimeSpan(0, 0, 10))
Dim dblAniF As DoubleAnimation = New DoubleAnimation(30, 12, _
New TimeSpan(0, 0, 10))
Storyboard.SetTargetName(dblAniW, "Button1")
Storyboard.SetTargetName(dblAniH, "Button1")
Storyboard.SetTargetName(dblAniF, "Button1")
Storyboard.SetTargetProperty(dblAniW, New _
PropertyPath(Button.WidthProperty))
Storyboard.SetTargetProperty(dblAniH, New _
PropertyPath(Button.HeightProperty))
Storyboard.SetTargetProperty(dblAniF, New _
PropertyPath(Button.FontSizeProperty))
Dim stbrd As New Storyboard
stbrd.Children.Add(dblAniW)
stbrd.Children.Add(dblAniH)
stbrd.Children.Add(dblAniF)
stbrd.Begin(Button1)
End Sub
Private Sub OnButtonMouseEnter(ByVal sender As Object, ByVal e _
As System.Windows.Input.MouseEventArgs)
'Handles Button1.MouseEnter
'Button: Color und Alpha per Zufall
Dim cols As Color() = {Colors.Red, Colors.BlueViolet, _
Colors.Coral, Colors.Blue, Colors.GreenYellow, _
Colors.Goldenrod}
Dim alpha As Byte = CType(rdm.Next(0, 255), Byte)
Dim colorIndex As Integer = rdm.Next(6)
Button1.Background = New SolidColorBrush(Color.FromArgb(alpha, _
cols(colorIndex).R, cols(colorIndex).G, cols(colorIndex).B))
End Sub
|
|
|
Das Ergebnis beim Ausführen der Applikation bei einem
MouseEnter-Event:
|
|

Transparenz, Größe und FontSize der Schaltfläche werden in Events manipuliert
|
|
Expression Blend , XAML und Visual Studio |
|
Der Königsweg zum Erstellen von WPF-Anwendungen mit grafisch ansprechenden interaktiven Benutzeroberflächen ist aber der über das Tool
Expression Blend. Das neue Microsoft-Produkt mit dem Codenamen Sparkle generiert im Hintergrund XAML-Code, während Sie WPF-Steuerelemente aus einer ToolBox in das Designfenster ziehen, mit der Maus in Größe und Position anpassen und im Property-Fenster die gewünschten Eigenschaften einstellen – ganz so, wie Sie dies aus Visual Studio gewohnt sind. Nur, dass Sie hier viel mehr Möglichkeiten der grafischen Gestaltung besitzen.
|
Ein WPF-Objekt, z.B. einen WPF-Button, können Sie über eine sogenannte
Timeline innerhalb einer Zeitschiene in seinem Bewegungsablauf
steuern. Eine Schaltfläche lässt sich drehen, kippen,
scheren, und im Eigenschaftsfenster lassen sich Farbläufe mit wenigen Mausklicks realisieren
sowie zahlreiche andere Einstellungen vornehmen. Auf der Zeitschiene der Timeline können Sie parallel und zeitgleich die Animation verschiedener Objekte bestimmen und verwalten. Ähnlich, wie in Flash können Sie ganze multimediale Filme entwickeln und über Trigger Ereignisse auslösen.
|
Das Hauptfenster von Expression Blend zeigt in der Abbildung eine Schaltfläche, die mit der Maus aus der Toolbox geholt, positioniert, und in der Größe angepasst wurde. Zusätzlich wurde sowohl dem Button als auch dem Background des Fensters ein Farbverlauf über den Brushes-Abschnitt im
Eigenschaften-Fenster verpasst.
|

Ein Button wurde im Hauptfenster von Blend angelegt und angepasst.
Eine Timeline definiert die Button-Animation.
|

Das Fenster für die Interaktionen: die Timeline
|
In der Timeline können auslösende Trigger und für einzelne
WPF-Elemente Zeitabschnitte für Bewegungsabläufe und
Medienabspielphasen definiert werden. In unserem Beispiel wird über
das Ereignis Window.Loaded die Animation angestoßen, die im
Interaction-Fenster definiert werden. Der Button wurde in der Timeline während der Aufnahmen (Recording
on) von Sekunde zu Sekunde versetzt und gleichzeitig gedreht und in
der Größe verändert, so dass eine Bewegungsfolge für den WPF-Button
entstanden ist. Über F5 kann die Animation gestartet und getestet
werden, um anschließend eventuelle Korrekturen vorzunehmen oder Ergänzungen
hinzuzufügen.
|
|

Mit F5 testen Sie den in der Timeline definierten Bewegungsablauf.
|
Mit Klick auf den Reiter "XAML" öffnen Sie die XAML-Ansicht, können den generierten XAML-Code studieren und eventuell auch manuell editieren.
|

Die Xaml-Ansicht mit den von Blend generierten XAML-Code
|
Im Property-Fenster stehen nach Klick auf das Blitzsymbol (rechts oben) zahlreiche Ereignisse für das WPF-Element Button zur Verfügung. Und hier wird über das definierte Event der „Bogen“ nach Visual Basic geschlagen.
|
Zahlreiche Ereignisse stehen zur Auswahl
|
Paralleles Öffnen des Projektes in Visual Studio
|
Achtung! Hier passiert nun etwas ganz Entscheidendes. Wählen Sie ein Ereignis aus, benennen es und nach
Bestätigung durch die Enter-Taste öffnet sich Visual Studio 2005 im Code-Fenster des Projektes und generiert die zum Event gehörende Ereignisprozedur!
|

Please Wait ist das Signal, dass nun das Projekt auch in Visual Studio geladen wird.
|
Im nun dargestellten VB-Code wurde das Event OnMouseEnter mit seinen Parametern generiert, - eine feine Sache und eine weitere Erleichterung für den Entwickler. Den Code innerhalb der
Prozedur müssen Sie natürlich selber schreiben, eine Menge Schreibarbeit wurde Ihnen
jedoch abgenommen. Insbesondere die Parameter-Definition bei Eventprozeduren bietet bekanntermaßen viele Fehlerursachen, die so ausgeschlossen werden können.
|
Die VB.NET Code-Behinddatei Window1.xaml.vb mit hinterlegtem VB-NET-Code in der Ereignisprozedur
|
In unserem Beispiel wird im Ereignis OnMouseEnter die Farbe und Transparenz der Schaltfläche per Zufallsfunktion verändert.
|
 
 

Bewegungsabläufe beim Ausführen (F5) und MouseEnter auf die Schaltfläche
|
Mit unserem Button-Beispiel „kratzen“ wir natürlich nur an der Oberfläche der potentiellen Realisierungen. Die Fülle der grafischen Gestaltungsmöglichkeiten scheint hier schier unbegrenzt. Also legen Sie los und geben Sie Ihren Anwendungen ein modernes „look and feel“. Das Äußere einer Anwendung ist schließlich fast so wichtig wie die eigentliche Programmlogik und sollte nicht vernachlässigt werden. Und dies leistet WPF in zukünftigen Windows-Anwendungen.
|
|
Weiterführende Informationen und Literatur |
|
Ein Communitycast bei VB-fun.de aus dem Jahr 2006:
|
Der entfesselte Client: WPF
durchleuchten von Dirk Primbs
|
Eine noch immer aktuelle CommunityCast-Einführung in WPF aus dem Jahr 2006, der Einsteigern in WPF auch heute noch Brandneues zu erzählen hat und in die Gesamtzusammenhänge einführt.
|
MSDN Solve – Codeclip:
|
Wie arbeitet man mit Expression Blend und Visual Studio gemeinsam am selben
Projekt?, ein von VB-fun.de vorgeschlagenes Thema, beantwortet von Dirk
Primbs
|
Dirk Primbs von Microsoft führt in die Anwendungsoberflächen-Entwicklung mit Hilfe von Microsoft Expression Blend ein, April 2007.
|
Buch
Visual Basic 2005 & .NET 3.0 intern von Michael Werner und Boris Rieger
|
Zum Thema WPF finden Sie in diesem Buch 9 Kapitel auf 340 Seiten mit vielen Beispielprojekten zu Windows Presentation Foundation, alle Beispiele in Visual Basic
2005 geschrieben, und das Inhaltsverzeichnis ist auch als PDF-Datei
downloadbar
|
Buch Windows Presentation Foundation –
Crashkurs von Bernd Marquardt
|
Dieses Buch gibt dem Softwareentwickler einen Einstieg in die Möglichkeiten der Windows Presentation Foundation und erläutert mit Hilfe vieler Beispiele sowohl die einfachen Grundelemente, wie auch komplexe Anwendungen, wie Animation und 3D-Darstellungen. Das Zusammenwirken von XAML und Programmcode wird ausführlich erläutert. In weiteren Kapiteln werden die Themen Steuerelemente, Layout, Dialoge, Datenbindung und Multimedia behandelt.
|
Buch Windows Presentation
Foundation. WPF Grafische Oberflächen gestalten mit .NET 3.0 von
Dirk Frischalowski
|
Das Buch liefert einen gut strukturierten Überblick über sämtliche Bereiche der WPF-Entwicklung. Schwerpunktmäßig werden die Neuerungen mithilfe von XAML vorgestellt, aber auch die Codierung mit Csharp kommt nicht zu kurz. Zahlreiche Beispiele beschreiben die vielfältigen Möglichkeiten der WPF. Besonders hervorzuheben sind separate Kapitel zu Expression Blend, der UI Automation, den Dokumentservices, zur 3D-Grafik und der Erstellung von Bildeffekten.
|
|
Bei Fragen zu diesem Tutorial nutzen Sie bitte unser VB.Net-Forum. |
|
|
Um das Beispielprojekt ausführen zu können, muss Visual Basic 2005, das .Net-Framework 3.0 sowie das Microsoft Windows Software Development Kit (SDK) und die Visual Studio 2005 Extensions for WPF and WC
(siehe Installationsvoraussetzungen) installiert sein.
|
|
|