Einführung in Windows Presentation Foundation (WPF)
Autor/Einsender:   Michael Werner
Anregungen/Tipps an: 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. 
Was ist WPF?
Die vier neuen Komponenten in .NET 3.0
Installationsvoraussetzungen
WPF-Anwendungen in Visual Studio 2005
XAML im Zusammenspiel mit VB.NET oder C#
Expression Blend, XAML und Visual Studio
Weiterführende Informationen und Literatur
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.
Was ist WPF?
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:
  1. 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.
  2. Visual Studio 2005 (Professional oder Express)
  3. Microsoft Windows Software Development Kit (SDK)
  4. 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.
Die Markup-Sprache XAML
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.
Hinweis
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.


Beispiel-Projekt  (390 kB) Downloads bisher: [ 2669 ]
Tutoial als PDF-Datei  (1,4 MB) Downloads bisher: [ 1820 ]

Zum Seitenanfang

Startseite | VB-/VBA-Tipps | Projekte | Tutorials | API-Referenz | Komponenten | Bücherecke | Gewinnspiele | VB-/VBA-Forum | DirectX-Forum | VB.Net | .Net-Forum | Foren-Archiv | Chat | Spielplatz | Links | Suchen | Stichwortverzeichnis | Feedback | Impressum

Seite empfehlen Bug-Report
Letzte Aktualisierung: Samstag, 24. April 2021